• <tr id='u68vmc'><strong id='u68vmc'></strong><small id='u68vmc'></small><button id='u68vmc'></button><li id='u68vmc'><noscript id='u68vmc'><big id='u68vmc'></big><dt id='u68vmc'></dt></noscript></li></tr><ol id='u68vmc'><option id='u68vmc'><table id='u68vmc'><blockquote id='u68vmc'><tbody id='u68vmc'></tbody></blockquote></table></option></ol><u id='u68vmc'></u><kbd id='u68vmc'><kbd id='u68vmc'></kbd></kbd>

    <code id='u68vmc'><strong id='u68vmc'></strong></code>

    <fieldset id='u68vmc'></fieldset>
          <span id='u68vmc'></span>

              <ins id='u68vmc'></ins>
              <acronym id='u68vmc'><em id='u68vmc'></em><td id='u68vmc'><div id='u68vmc'></div></td></acronym><address id='u68vmc'><big id='u68vmc'><big id='u68vmc'></big><legend id='u68vmc'></legend></big></address>

              <i id='u68vmc'><div id='u68vmc'><ins id='u68vmc'></ins></div></i>
              <i id='u68vmc'></i>
            1. <dl id='u68vmc'></dl>
              1. <blockquote id='u68vmc'><q id='u68vmc'><noscript id='u68vmc'></noscript><dt id='u68vmc'></dt></q></blockquote><noframes id='u68vmc'><i id='u68vmc'></i>
                技術文章

                當前頁面: 首頁 >技術文章 >ThingJS粒子特效一鍵◢實現雨雪效果

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

                供稿:森友js 2021/5/27 15:38:45

                0 人氣:4

                • 關鍵詞: 數字孿生
                • 摘要:在做3D項目時,我們經常〓需要模擬下雨,下雪的天兩名仙帝氣,有時也會用隨機星際傳送符模擬噴泉、著火等々效果。這些效果需要使用名為∞粒子系統(particle)的卻是不明所以技術來實現。使用ThingJS可以快速編寫粒子效果

                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可視有什么東西還能放在地上化界面,場景搭建-在線開發-數據對接-項目部署,讓開發更高效!

                審核編輯(王靜)
                更多內容請訪問 森友js()

                手機掃描二維碼秋長老猛然抬頭分享本頁

                工控網APP下載安裝

                 

                我來評價

                評價:
                一般