ThingJS粒子特效一鍵實現(xiàn)雨雪效果
使用ThingJS可以快速編寫粒子效果,比如:下雨、下雪(可以控制雨雪大小)、噴水、火焰效果等,甚至可以通過對接第三方的數(shù)據(jù),實時控制三維場景的效果(比如:對接天氣接口)。
1、粒子效果
ThingJS 提供 ParticleSystem 物體類來實現(xiàn)粒子效果。自己制作粒子效果需要圖片處理、寫代碼、3D渲染, 是個很艱巨的任務(wù),需要掌握大量 3D 算法知識,還要掌握 shader 語言。ThingJS封裝了粒子效果的實現(xiàn)方法,減少了代碼量和開發(fā)投入,更受3D開發(fā)初學(xué)者的歡迎,直接用query查詢API接口,在場景中加入火焰效果。
ThingJS內(nèi)置一些粒子效果可以直接調(diào)用,可點擊在線開發(fā)選擇代碼塊進行調(diào)用。
2、 加載場景
CampusBuilder(又稱模模搭)搭建場景完成后,在ThingJS直接加載url進行二次開發(fā)。
// 加載場景代碼 var app = new THING.App({ url: 'https://www.thingjs.com/static/models/storehouse' // 場景地址 });
3、不同粒子特效實現(xiàn)
火焰效果
代碼如下:
/** * 通過創(chuàng)建粒子實現(xiàn)火焰效果 */ function createFire() { resetAll(); // 創(chuàng)建粒子 var particle = app.create({ id: 'fire01', type: 'ParticleSystem', name: 'Fire', parent: app.query('car01')[0], url: 'https://model.3dmomoda.com/models/19061018snbajhvuzrheq9sbgwdoefuk/0/particles', localPosition: [0, 0, 0] // 設(shè)置粒子相對于父物體的位置 }); }
飄雪效果
代碼如下:
/** * 通過創(chuàng)建粒子實現(xiàn)飄雪效果 */ function createSnow() { resetAll(); // 創(chuàng)建降雪效果 var particleSnow = app.create({ type: 'ParticleSystem', id: 'No1234567', name: 'Snow', url: 'https://model.3dmomoda.com/models/18112014q3t8aunaabahzxbxcochavap/0/particles', position: [0, 50, 0] }); }
噴水效果
代碼如下:
/** * 通過創(chuàng)建粒子實現(xiàn)噴水效果 */ function createWater() { resetAll(); // 創(chuàng)建噴水效果 var particle = app.create({ id: 'water01', type: 'ParticleSystem', name: 'Water', url: 'https://model.3dmomoda.com/models/19081611ewlkh7xqy71uzixefob8uq1x/0/particles', position: [0, 0, 5] }); }
降雨效果
代碼如下:
/** * 通過創(chuàng)建粒子實現(xiàn)降雨效果 */ function createByParticle() { resetAll(); // 創(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', 1000); // 設(shè)置粒子最小密度 particle.setParticleAttribute('particleCount', 500); }
雨雪天氣,是通過粒子圖片渲染來實現(xiàn)的,我們可以通過控制粒子數(shù)量的最大密度和最小密度來實現(xiàn)降雨降雪量大小。
清除粒子效果
function resetAll() { // 獲取當前已創(chuàng)建的粒子 var particle = app.query('.ParticleSystem'); // 判斷當前有無創(chuàng)建的粒子 if (particle) { // 存在,將已創(chuàng)建的粒子刪除 particle.destroy(); } }
結(jié)尾:
ThingJS面向物聯(lián)網(wǎng)的3D可視化開發(fā)平臺擁有強大的物聯(lián)網(wǎng)開發(fā)邏輯,ThingJS 為可視化應(yīng)用提供了簡單、豐富的功能,只需要具有基本的 Javascript 開發(fā)經(jīng)驗即可上手。使用者通過接入平臺api,輕松集成3D可視化界面,場景搭建-在線開發(fā)-數(shù)據(jù)對接-項目部署,讓開發(fā)更高效!
以上就是ThingJS粒子特效一鍵實現(xiàn)雨雪效果的詳細內(nèi)容,更多關(guān)于ThingJS 實現(xiàn)雨雪效果的資料請關(guān)注腳本之家其它相關(guān)文章!
相關(guān)文章
用javascript獲取當頁面上鼠標光標位置和觸發(fā)事件的對象的代碼
用 javascript 獲取當頁面上鼠標(光標)位置 和 觸發(fā)事件的對象 的方法2009-12-12網(wǎng)頁加載時頁面顯示進度條加載完成之后顯示網(wǎng)頁內(nèi)容
網(wǎng)頁加載時頁面顯示進度條(加載完成時顯示網(wǎng)頁內(nèi)容),這種效果在瀏覽網(wǎng)頁很常見,本文也介紹一種實現(xiàn)方法,需要了解的朋友可以參考下2012-12-12