介：氣溫的變化會(huì)帶動(dòng)水汽條件的變化，帶來降雪、降雨、降冰雹等奇異的天氣現(xiàn)象，不僅僅是人的活動(dòng)會(huì)受到影響，物聯(lián)網(wǎng)設(shè)備管理、傳感器監(jiān)測及安全作業(yè)都要相應(yīng)調(diào)整。

為了提前準(zhǔn)備好預(yù)案工作，3D孿生場景的仿真過程就派上了用場，比如預(yù)測緊急情況或事故災(zāi)害的后果，并基于數(shù)字孿生模型以及數(shù)字仿真兩個(gè)條件，以完成必要的危機(jī)解決方案。

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

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

1. 加載3D場景
2. 雨滴計(jì)時(shí)器
3. 降雨效果

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

官方教程分為三個(gè)部分：（1）加載場景；（2）雨滴計(jì)時(shí)器；（3）降雨效果。

1. 加載場景

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

2. 雨滴計(jì)時(shí)器

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

相同點(diǎn)

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

不同點(diǎn)

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

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

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

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

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

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

進(jìn)入官網(wǎng)-官方示例-粒子模塊查看代碼>> http://www.thingjs.com/guide/?m=sample

// 創(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繪制實(shí)現(xiàn)降雨效果

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

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

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

（2）繪制雨滴

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

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

關(guān)于ThingJS

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