整合營銷服務商
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
電腦端+手機端+微信端=數據同步管理
免費咨詢熱線：
文主要介紹用canvas畫布技術實現特炫酷的雨滴效果！如下效果圖：
實現代碼：
定義好畫布的布局：<canvas id="can"></canvas>
css樣式：
canvas畫布JS代碼（帶詳細解釋）：
更多知識請關注“恒星網絡”頭條號！
介：氣溫的變化會帶動水汽條件的變化，帶來降雪、降雨、降冰雹等奇異的天氣現象，不僅僅是人的活動會受到影響，物聯網設備管理、傳感器監測及安全作業都要相應調整。
為了提前準備好預案工作，3D孿生場景的仿真過程就派上了用場，比如預測緊急情況或事故災害的后果，并基于數字孿生模型以及數字仿真兩個條件，以完成必要的危機解決方案。
demo演示地址：http://www.thingjs.com/guide/?m=sample
#前端 #3D開發 #物聯網
在數字孿生仿真過程中，需要3D場景可視化作為基本設施，進行交互開發和數據對接。現在就來講解一下，如何基于ThingJS平臺開發降雨等天氣效果，讓你的3D場景更加逼真！
官方教程分為三個部分：（1）加載場景；（2）雨滴計時器；（3）降雨效果。
ThingJS不需要從0到1開發一個3D場景，建模設計師利用CampusBuilder（又稱模模搭，3D場景搭建工具），拖拉拽就可以零代碼完成3D場景搭建；前端開發基于統一的平臺數據，從菜單欄直接加載url進行二次開發。
若要創建雨滴計時器，setTimeout和setInterval的語法相同，都可以用來實現在一個固定時間段之后去執行JavaScript的，該如何取舍與判斷？
它們都有兩個參數，一個是將要執行的代碼字符串，還有一個是以毫秒為單位的時間間隔，當過了那個時間段之后就將執行那段代碼。
這兩個函數還是有區別的，setInterval在執行完一次代碼之后，經過了那個固定的時間間隔，它還會自動重復執行代碼，而setTimeout只執行一次那段代碼。
雨滴計時器使用“interval”, 表示在執行完一次代碼之后，經過了那個固定的時間間隔，它還會自動重復執行代碼，形成降雨效果，而不是只執行一次那段代碼。
這里給出兩種創建和繪制雨滴的方法，第一種是粒子效果，第二種是canvas畫布效果。
直接調用ThingJS API的底層粒子系統“ParticleSystem”，前端開發需要針對粒子進行命名、設置場景坐標，并修改粒子的密度參數（最大及最小）。當鼠標“on”點擊事件發生時，依據“interval”計時器來反復運行這段粒子代碼，形成大型降雨效果。
進入官網-官方示例-粒子模塊查看代碼>> http://www.thingjs.com/guide/?m=sample
// 創建粒子 var particle=app.create({ type: 'ParticleSystem', name: 'Rain', url: 'https://model.3dmomoda.com/models/18112113d4jcj4xcoyxecxehf3zodmvp/0/particles', position: [0, 300, 0], complete: function (ev) { ev.object.scale=[10, 10, 10]; } });
// 設置粒子最大密度 particle.setGroupAttribute('maxParticleCount', 10000);
// 設置粒子最小密度 particle.setParticleAttribute('particleCount', 5000); }
在HTML界面創建canvas畫布，將畫布添加到ThingJS內置的2D界面div中，并設置當前窗口的寬和高。為了統一視覺，通過獲取雨滴對象數組，整體設置雨滴長度、下落速度、偏轉角度等參數；這里的雨滴計時器設置為每50毫秒調用一次繪制雨滴的函數。
interval=setInterval(newDrop, 50); // 設置每50毫秒調用一次繪制雨滴的函數
前端可以控制線寬、線的樣式、顏色甚至漸變顏色，漸變顏色要注意修改線條的斜度和對應的顏色，把自然界的光影效果考慮到3D場景內，更加真實。最后繪制一條雨落路徑，設置起點、終點，讓雨滴能夠不脫離，形成持續降雨效果，連非開發人員理解也毫無隔閡！
結尾：ThingJS擁有強大的物聯網開發邏輯，開發者接入平臺api能力，輕松完成物聯網場景下3D交互架構的搭建，加速3D項目開發！
關于ThingJS
ThingJS提供物聯網3D可視化組件，讓3D開發更輕松！直接Javascript調用3D腳本，基于200個3D開發源碼示例，讓你全面了解物聯網可視化開發邏輯。場景搭建-3D腳本開發-數據對接-項目部署的一站式服務讓開發更高效，同20萬個開發者一起成為數字孿生技術創新者！
*請認真填寫需求信息，我們會在24小時內與您取得聯系。
