ThingJS粒子特效一鍵實(shí)現(xiàn)雨雪效果
使用ThingJS可以快速編寫粒子效果,比如:下雨、下雪(可以控制雨雪大?。?、噴水、火焰效果等,甚至可以通過對接第三方的數(shù)據(jù),實(shí)時(shí)控制三維場景的效果(比如:對接天氣接口)。
1、粒子效果
ThingJS 提供 ParticleSystem 物體類來實(shí)現(xiàn)粒子效果。自己制作粒子效果需要圖片處理、寫代碼、3D渲染, 是個(gè)很艱巨的任務(wù),需要掌握大量 3D 算法知識,還要掌握 shader 語言。ThingJS封裝了粒子效果的實(shí)現(xiàn)方法,減少了代碼量和開發(fā)投入,更受3D開發(fā)初學(xué)者的歡迎,直接用query查詢API接口,在場景中加入火焰效果。
ThingJS內(nèi)置一些粒子效果可以直接調(diào)用,可點(diǎn)擊在線開發(fā)選擇代碼塊進(jìn)行調(diào)用。
2、 加載場景
CampusBuilder(又稱模模搭)搭建場景完成后,在ThingJS直接加載url進(jìn)行二次開發(fā)。
// 加載場景代碼 var app = new THING.App({ url: 'https://www.thingjs.com/static/models/storehouse' // 場景地址 });
3、不同粒子特效實(shí)現(xiàn)
火焰效果
代碼如下:
/** * 通過創(chuàng)建粒子實(shí)現(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)建粒子實(shí)現(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)建粒子實(shí)現(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)建粒子實(shí)現(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); }
雨雪天氣,是通過粒子圖片渲染來實(shí)現(xiàn)的,我們可以通過控制粒子數(shù)量的最大密度和最小密度來實(shí)現(xiàn)降雨降雪量大小。
清除粒子效果
function resetAll() { // 獲取當(dāng)前已創(chuàng)建的粒子 var particle = app.query('.ParticleSystem'); // 判斷當(dāng)前有無創(chuàng)建的粒子 if (particle) { // 存在,將已創(chuàng)建的粒子刪除 particle.destroy(); } }
結(jié)尾:
ThingJS面向物聯(lián)網(wǎng)的3D可視化開發(fā)平臺(tái)擁有強(qiáng)大的物聯(lián)網(wǎng)開發(fā)邏輯,ThingJS 為可視化應(yīng)用提供了簡單、豐富的功能,只需要具有基本的 Javascript 開發(fā)經(jīng)驗(yàn)即可上手。使用者通過接入平臺(tái)api,輕松集成3D可視化界面,場景搭建-在線開發(fā)-數(shù)據(jù)對接-項(xiàng)目部署,讓開發(fā)更高效!
以上就是ThingJS粒子特效一鍵實(shí)現(xiàn)雨雪效果的詳細(xì)內(nèi)容,更多關(guān)于ThingJS 實(shí)現(xiàn)雨雪效果的資料請關(guān)注腳本之家其它相關(guān)文章!
- js canvas實(shí)現(xiàn)隨機(jī)粒子特效
- js實(shí)現(xiàn)三角形粒子運(yùn)動(dòng)
- js實(shí)現(xiàn)3D粒子酷炫動(dòng)態(tài)旋轉(zhuǎn)特效
- JavaScript動(dòng)畫實(shí)例之粒子文本的實(shí)現(xiàn)方法詳解
- JS實(shí)現(xiàn)躲避粒子小游戲
- javascript Canvas動(dòng)態(tài)粒子連線
- JavaScript實(shí)現(xiàn)鼠標(biāo)移動(dòng)粒子跟隨效果
- 基于three.js實(shí)現(xiàn)的3D粒子動(dòng)效實(shí)例代碼
- 原生JS+HTML5實(shí)現(xiàn)跟隨鼠標(biāo)一起流動(dòng)的粒子動(dòng)畫效果
- 使用3D引擎threeJS實(shí)現(xiàn)星空粒子移動(dòng)效果
相關(guān)文章
用javascript獲取當(dāng)頁面上鼠標(biāo)光標(biāo)位置和觸發(fā)事件的對象的代碼
用 javascript 獲取當(dāng)頁面上鼠標(biāo)(光標(biāo))位置 和 觸發(fā)事件的對象 的方法2009-12-12網(wǎng)頁加載時(shí)頁面顯示進(jìn)度條加載完成之后顯示網(wǎng)頁內(nèi)容
網(wǎng)頁加載時(shí)頁面顯示進(jìn)度條(加載完成時(shí)顯示網(wǎng)頁內(nèi)容),這種效果在瀏覽網(wǎng)頁很常見,本文也介紹一種實(shí)現(xiàn)方法,需要了解的朋友可以參考下2012-12-12微信小程序?qū)崿F(xiàn)菜單左右聯(lián)動(dòng)
這篇文章主要為大家詳細(xì)介紹了微信小程序?qū)崿F(xiàn)菜單左右聯(lián)動(dòng),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-05-05js 動(dòng)態(tài)修改css文件用到了cssRule
js 動(dòng)態(tài)修改css文件,循環(huán)用的underscore,在使用cssRule只能使用cssRule.style.padding=0px,詳細(xì)示例如下2014-08-08