官方示例（十）：網(wǎng)頁開發(fā)3D粒子系統(tǒng)實現(xiàn)降雨效果 ThingJS

時間：2023-06-05 03:57:02 | 來源：網(wǎng)站運營

時間：2023-06-05 03:57:02 來源：網(wǎng)站運營

官方示例（十）：網(wǎng)頁開發(fā)3D粒子系統(tǒng)實現(xiàn)降雨效果 ThingJS：

簡介：氣溫的變化會帶動水汽條件的變化，帶來降雪、降雨、降冰雹等奇異的天氣現(xiàn)象，不僅僅是人的活動會受到影響，物聯(lián)網(wǎng)設(shè)備管理、傳感器監(jiān)測及安全作業(yè)都要相應(yīng)調(diào)整。
為了提前準備好預(yù)案工作，3D孿生場景的仿真過程就派上了用場，比如預(yù)測緊急情況或事故災(zāi)害的后果，并基于數(shù)字孿生模型以及數(shù)字仿真兩個條件，以完成必要的危機解決方案。

demo演示地址：物聯(lián)網(wǎng)3D可視化PaaS平臺 - 數(shù)字孿生可視化平臺

#前端 #3D開發(fā) #物聯(lián)網(wǎng)

1. 加載3D場景
2. 雨滴計時器
3. 開發(fā)降雨效果

在數(shù)字孿生仿真過程中，需要3D場景可視化作為基本設(shè)施，進行交互開發(fā)和數(shù)據(jù)對接。現(xiàn)在就來講解一下，如何基于ThingJS平臺開發(fā)降雨等天氣效果，讓你的3D場景更加逼真！

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

1. 加載3D場景

ThingJS不需要從0到1開發(fā)一個3D場景，建模設(shè)計師利用CampusBuilder（又稱模模搭，3D場景搭建工具），拖拉拽就可以零代碼完成3D場景搭建；前端開發(fā)基于統(tǒng)一的平臺數(shù)據(jù)，從菜單欄直接加載url進行二次開發(fā)。

2. 雨滴計時器

若要創(chuàng)建雨滴計時器，setTimeout和setInterval的語法相同，都可以用來實現(xiàn)在一個固定時間段之后去執(zhí)行JavaScript的，該如何取舍與判斷？

相同點

它們都有兩個參數(shù)，一個是將要執(zhí)行的代碼字符串，還有一個是以毫秒為單位的時間間隔，當(dāng)過了那個時間段之后就將執(zhí)行那段代碼。

不同點

這兩個函數(shù)還是有區(qū)別的，setInterval在執(zhí)行完一次代碼之后，經(jīng)過了那個固定的時間間隔，它還會自動重復(fù)執(zhí)行代碼，而setTimeout只執(zhí)行一次那段代碼。

雨滴計時器使用“interval”, 表示在執(zhí)行完一次代碼之后，經(jīng)過了那個固定的時間間隔，它還會自動重復(fù)執(zhí)行代碼，形成降雨效果，而不是只執(zhí)行一次那段代碼。

3. 開發(fā)降雨效果

這里給出兩種創(chuàng)建和繪制雨滴的方法，第一種是粒子效果，第二種是canvas畫布效果。

方法一：創(chuàng)建粒子實現(xiàn)降雨效果

直接調(diào)用ThingJS API的底層粒子系統(tǒng)“ParticleSystem”，前端開發(fā)需要針對粒子進行命名、設(shè)置場景坐標，并修改粒子的密度參數(shù)（最大及最?。．?dāng)鼠標“on”點擊事件發(fā)生時，依據(jù)“interval”計時器來反復(fù)運行這段粒子代碼，形成大型降雨效果。

進入官網(wǎng)-官方示例-粒子模塊查看代碼>>

// 創(chuàng)建粒子 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]; } }); // 設(shè)置粒子最大密度 particle.setGroupAttribute('maxParticleCount', 10000); // 設(shè)置粒子最小密度 particle.setParticleAttribute('particleCount', 5000);}

方法二：創(chuàng)建canvas繪制實現(xiàn)降雨效果

（1）創(chuàng)建畫布

在HTML界面創(chuàng)建canvas畫布，將畫布添加到ThingJS內(nèi)置的2D界面div中，并設(shè)置當(dāng)前窗口的寬和高。為了統(tǒng)一視覺，通過獲取雨滴對象數(shù)組，整體設(shè)置雨滴長度、下落速度、偏轉(zhuǎn)角度等參數(shù)；這里的雨滴計時器設(shè)置為每50毫秒調(diào)用一次繪制雨滴的函數(shù)。

interval = setInterval(newDrop, 50); // 設(shè)置每50毫秒調(diào)用一次繪制雨滴的函數(shù)

（2）繪制雨滴

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

結(jié)尾：ThingJS擁有強大的物聯(lián)網(wǎng)開發(fā)邏輯，開發(fā)者接入平臺api能力，輕松完成物聯(lián)網(wǎng)場景下3D交互架構(gòu)的搭建，加速3D項目開發(fā)！

---

關(guān)于ThingJS

ThingJS平臺提供物聯(lián)網(wǎng)3D可視化組件，讓3D開發(fā)更輕松！直接Javascript調(diào)用3D腳本，基于200個3D開發(fā)源碼示例，讓你全面了解物聯(lián)網(wǎng)可視化開發(fā)邏輯。場景搭建-3D腳本開發(fā)-數(shù)據(jù)對接-項目部署的一站式服務(wù)讓開發(fā)更高效，同20萬個開發(fā)者一起成為數(shù)字孿生技術(shù)創(chuàng)新者！