官方示例（十）：網頁開發3D粒子系統實現降雨效果 ThingJS

簡介：氣溫的變化會帶動水汽條件的變化，帶來降雪、降雨、降冰雹等奇異的天氣現象，不單單是人的活動會受到影響，物聯網設備管理、傳感器監測及安全做業都要相應調整。
爲了提早準備好預案工做，3D孿生場景的仿真過程就派上了用場，好比預測緊急狀況或事故災害的後果，並基於數字孿生模型以及數字仿真兩個條件，以完成必要的危機解決方案。

demo演示地址：http://www.thingjs.com/guide/?m=sample

#前端 #3D開發 #物聯網

1. 加載場景
2. 雨滴計時器
3. 降雨效果
   
   在數字孿生仿真過程當中，須要3D場景可視化做爲基本設施，進行交互開發和數據對接。如今就來說解一下，如何基於ThingJS平臺開發降雨等天氣效果，讓你的3D場景更加逼真！

官方教程分爲三個部分：（1）加載場景；（2）雨滴計時器；（3）降雨效果。

1. 加載場景

ThingJS不須要從0到1開發一個3D場景，建模設計師利用CampusBuilder（又稱模模搭，3D場景搭建工具），拖拉拽就能夠零代碼完成3D場景搭建；前端開發基於統一的平臺數據，從菜單欄直接加載url進行二次開發。

2. 雨滴計時器

若要建立雨滴計時器，setTimeout和setInterval的語法相同，均可以用來實如今一個固定時間段以後去執行，該如何取捨與判斷？

相同點

它們都有兩個參數，一個是將要執行的代碼字符串，還有一個是以毫秒爲單位的時間間隔，當過了那個時間段以後就將執行那段代碼。

不一樣點

這兩個函數仍是有區別的，setInterval在執行完一次代碼以後，通過了那個固定的時間間隔，它還會自動重複執行代碼，而setTimeout只執行一次那段代碼。

雨滴計時器使用「interval」, 表示在執行完一次代碼以後，通過了那個固定的時間間隔，它還會自動重複執行代碼，造成降雨效果，而不是隻執行一次那段代碼。

3. 降雨效果

這裏給出兩種建立和繪製雨滴的方法，第一種是粒子效果，第二種是canvas畫布效果。

方法一：建立粒子實現降雨效果

直接調用ThingJS API的底層粒子系統「ParticleSystem」，前端開發須要針對粒子進行命名、設置場景座標，並修改粒子的密度參數（最大及最小）。當鼠標「on」點擊事件發生時，依據「interval」計時器來反覆運行這段粒子代碼，造成大型降雨效果。

進入官網-官方示例-粒子模塊查看代碼>>

// 建立粒子 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); }

方法二：建立canvas繪製實現降雨效果

（1）建立畫布

在HTML界面建立canvas畫布，將畫布添加到ThingJS內置的2D界面div中，並設置當前窗口的寬和高。爲了統一視覺，經過獲取雨滴對象數組，總體設置雨滴長度、下落速度、偏轉角度等參數；這裏的雨滴計時器設置爲每50毫秒調用一次繪製雨滴的函數。

interval = setInterval(newDrop, 50); // 設置每50毫秒調用一次繪製雨滴的函數

（2）繪製雨滴

前端能夠控制線寬、線的樣式、顏色甚至漸變顏色，漸變顏色要注意修改線條的斜度和對應的顏色，把天然界的光影效果考慮到3D場景內，更加真實。最後繪製一條雨落路徑，設置起點、終點，讓雨滴可以不脫離，造成持續降雨效果，連非開發人員理解也毫無隔閡！

結尾：ThingJS擁有強大的物聯網開發邏輯，開發者接入平臺api能力，輕鬆完成物聯網場景下3D交互架構的搭建，加速3D項目開發！

關於ThingJS

ThingJS提供物聯網3D可視化組件，讓3D開發更輕鬆！直接Javascript調用3D腳本，基於200個3D開發源碼示例，讓你全面瞭解物聯網可視化開發邏輯。場景搭建-3D腳本開發-數據對接-項目部署的一站式服務讓開發更高效，同20萬個開發者一塊兒成爲數字孿生技術創新者！