工控網首頁
>

應用設計

>

ThingJS粒子特效一鍵實現雨雪效果

ThingJS粒子特效一鍵實現雨雪效果

2021/5/27 15:38:45

1、粒子效果

2、加載場景

3、不同粒子效果實現

在做3D項目時,我們經常需要模擬下雨,下雪的天氣,有時也會模擬噴泉、著火等效果。這些效果需要使用名為粒子系統(particle)的技術來實現。使用ThingJS可以快速編寫粒子效果,比如:下雨、下雪(可以控制雨雪大?。?、噴水、火焰效果等,甚至可以通過對接第三方的數據,實時控制三維場景的效果(比如:對接天氣接口)。

1、粒子效果

ThingJS 提供 ParticleSystem 物體類來實現粒子效果。自己制作粒子效果需要圖片處理、寫代碼、3D渲染, 是個很艱巨的任務,需要掌握大量 3D 算法知識,還要掌握 shader 語言。ThingJS封裝了粒子效果的實現方法,減少了代碼量和開發投入,更受3D開發初學者的歡迎,直接用query查詢API接口,在場景中加入火焰效果。

ThingJS內置一些粒子效果可以直接調用,可點擊在線開發選擇代碼塊進行調用。

2、 加載場景

CampusBuilder(又稱模模搭)搭建場景完成后,在ThingJS直接加載url進行二次開發。

// 加載場景代碼 
var app = new THING.App({
 url: 'https://www.thingjs.com/static/models/storehouse' // 場景地址
});

3、不同粒子特效實現

  • 火焰效果

代碼如下:

/**
 * 通過創建粒子實現火焰效果
 */
function createFire() {
 resetAll();
 // 創建粒子
 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] // 設置粒子相對于父物體的位置
 });
}
  • 飄雪效果

代碼如下:

/**
 * 通過創建粒子實現飄雪效果
 */
function createSnow() {
 resetAll();
 // 創建降雪效果
 var particleSnow = app.create({
 type: 'ParticleSystem',
 id: 'No1234567',
 name: 'Snow',
 url: 'https://model.3dmomoda.com/models/18112014q3t8aunaabahzxbxcochavap/0/particles',
 position: [0, 50, 0]
 });
}
  • 噴水效果

代碼如下:

/**
 * 通過創建粒子實現噴水效果
 */
function createWater() {
 resetAll();
 // 創建噴水效果
 var particle = app.create({
 id: 'water01',
 type: 'ParticleSystem',
 name: 'Water',
 url: 'https://model.3dmomoda.com/models/19081611ewlkh7xqy71uzixefob8uq1x/0/particles',
 position: [0, 0, 5]
 });
}
  • 降雨效果

代碼如下:

/**
 * 通過創建粒子實現降雨效果
 */
function createByParticle() {
 resetAll();
 // 創建粒子
 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', 1000);
 // 設置粒子最小密度
 particle.setParticleAttribute('particleCount', 500);
 
}

雨雪天氣,是通過粒子圖片渲染來實現的,我們可以通過控制粒子數量的最大密度和最小密度來實現降雨降雪量大小。

  • 清除粒子效果

function resetAll() {
 // 獲取當前已創建的粒子
 var particle = app.query('.ParticleSystem');
 // 判斷當前有無創建的粒子
 if (particle) {
 // 存在,將已創建的粒子刪除
 particle.destroy();
 }
}

結尾:

ThingJS面向物聯網的3D可視化開發平臺擁有強大的物聯網開發邏輯,ThingJS 為可視化應用提供了簡單、豐富的功能,只需要具有基本的 Javascript 開發經驗即可上手。使用者通過接入平臺api,輕松集成3D可視化界面,場景搭建-在線開發-數據對接-項目部署,讓開發更高效!

審核編輯(
王靜
)
投訴建議

評論

查看更多評論
其他資訊

查看更多

模模搭古城搭建學習筆記3:建筑篇

工業制造業的熱點話題:數字孿生技術變革