使用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] // 設定粒子相對於父物體的位置
 });
}

飄雪效果

程式碼如下：

/**
 * 通過建立粒子實現飄雪效果
 */
function createSnow() {
 resetAll();
 // 建立降雪效果
 var particleSnow = app.create({
 type: 'ParticleSy程式設計客棧stem',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',name: 'Water',url: 'https://model.3dmomoda.com/models/19081611ewlkh7xqy71uzixefob8uq1x/0/particles',position: [0
 
程式設計客棧,5]
 });
}

降雨效果

程式碼如下：

/**
 * 通過建立粒子實現降雨效果
 */
function createByParticle() {
 resetAll();
 // 建立粒子
 var particle = app.create({
 type: 'ParticleSystem',name: 'Rain',url: 'h程式設計客棧ttps://model.3dmomoda.com/models/18112113d4jcj4xcoyxecxehf3zodmvp/0/particles',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 QuUtO為視覺化應用提供了簡單、豐富的功能，只需要具有基本的 javascript 開發經驗即可上手。使用者通過接入平臺api，輕鬆整合3D視覺化介面，場景搭建-線上開發-資料對接-專案部署，讓開發更高效！

以上就是ThingJS粒子特效一鍵實現雨雪效果的詳細內容，更多關於ThingJS 實現雨雪效果的資料請關注我們其它相關文章！