ThingJS粒子特效一鍵實(shí)現(xiàn)雨雪效果

更新時(shí)間：2021年05月28日 17:26:07 作者：ThingJS_小锘

在做3D項(xiàng)目時(shí)，我們經(jīng)常需要模擬下雨，下雪的天氣，有時(shí)也會(huì)模擬噴泉、著火等效果。這些效果需要使用名為粒子系統(tǒng)(particle)的技術(shù)來(lái)實(shí)現(xiàn)。使用ThingJS可以快速編寫粒子效果，本文就來(lái)看看如何實(shí)現(xiàn)

1、粒子效果

ThingJS 提供 ParticleSystem 物體類來(lái)實(shí)現(xiàn)粒子效果。自己制作粒子效果需要圖片處理、寫代碼、3D渲染，是個(gè)很艱巨的任務(wù)，需要掌握大量 3D 算法知識(shí)，還要掌握 shader 語(yǔ)言。ThingJS封裝了粒子效果的實(shí)現(xiàn)方法，減少了代碼量和開(kāi)發(fā)投入，更受3D開(kāi)發(fā)初學(xué)者的歡迎，直接用query查詢API接口，在場(chǎng)景中加入火焰效果。

ThingJS內(nèi)置一些粒子效果可以直接調(diào)用,可點(diǎn)擊在線開(kāi)發(fā)選擇代碼塊進(jìn)行調(diào)用。

2、加載場(chǎng)景

CampusBuilder（又稱模模搭）搭建場(chǎng)景完成后，在ThingJS直接加載url進(jìn)行二次開(kāi)發(fā)。

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

3、不同粒子特效實(shí)現(xiàn)

火焰效果

代碼如下：

/**
 * 通過(guò)創(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è)置粒子相對(duì)于父物體的位置
 });
}

飄雪效果

代碼如下：

/**
 * 通過(guò)創(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]
 });
}

噴水效果

代碼如下：

/**
 * 通過(guò)創(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]
 });
}

降雨效果

代碼如下：

/**
 * 通過(guò)創(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);
 
}

雨雪天氣，是通過(guò)粒子圖片渲染來(lái)實(shí)現(xiàn)的，我們可以通過(guò)控制粒子數(shù)量的最大密度和最小密度來(lái)實(shí)現(xiàn)降雨降雪量大小。

清除粒子效果

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

結(jié)尾：

ThingJS面向物聯(lián)網(wǎng)的3D可視化開(kāi)發(fā)平臺(tái)擁有強(qiáng)大的物聯(lián)網(wǎng)開(kāi)發(fā)邏輯，ThingJS 為可視化應(yīng)用提供了簡(jiǎn)單、豐富的功能，只需要具有基本的 Javascript 開(kāi)發(fā)經(jīng)驗(yàn)即可上手。使用者通過(guò)接入平臺(tái)api，輕松集成3D可視化界面，場(chǎng)景搭建-在線開(kāi)發(fā)-數(shù)據(jù)對(duì)接-項(xiàng)目部署，讓開(kāi)發(fā)更高效！

以上就是ThingJS粒子特效一鍵實(shí)現(xiàn)雨雪效果的詳細(xì)內(nèi)容，更多關(guān)于ThingJS 實(shí)現(xiàn)雨雪效果的資料請(qǐng)關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: