ThingJS demo展現：3D場景輕鬆切換

 

ThingJS 3D開發框架不只易學並且很適合屏幕展現，具備廣闊的物聯網發展前景。

 

使用ThingJS官方神奇模模搭來搭建場景，這個相信你們都很熟悉，它的場景可以自動同步到ThingJS網站中去，畢竟是一家親，若是ThingJS在線平臺找不到，那不是平臺的問題，而是你的操做問題！記得回到模模搭客戶端查看是否同步徹底，或者是上傳的obj模型由於標準或者規範的問題而被拒絕的，就可能致使場景沒法正常同步，只要查看標準文檔進行操做就能夠啦！

物聯網可視化項目主要涉及大型而複雜的園區、地理地形或者工程等，越複雜就越須要合理規劃，ThingJS是如何簡化這些開發流程的呢？咱們是有神器助攻的！ThingJS通過多年開發經驗的沉澱，得出了四個開發步驟：場景搭建、在線開發、數據對接、項目部署，同時把建模和開發分開，設計人員使用CampusBuilder（又稱模模搭）或者cityBuilder搭建工具，無代碼輕鬆拖拽元素便可製做模型，隨後開發人員使用ThingJS在線開發，從官方示例瞭解最新的酷炫功能，基於JS代碼輕鬆開發，不須要額外培訓！

模模搭能夠選擇對應的模型搭建一個工廠或者是糧倉，可是特殊模型也有，能夠從其餘位置加載並上傳使用，ThingJS推薦使用3DMAX工具搭建特殊模型，並提供3DMAX上傳插件來完成傳輸，這些插件資源均可以在官網-資源中心下載。

在線開發的時候如何引用任何場景的URL？使用快捷鍵Ctrl+J或者直接點擊園區icon打開園區界面，雙擊對應場景便可出現該場景的URL，引用完畢以後，參考以下官方示例進行不一樣的場景切換，一切清楚明白無保留！

如何在ThingJS開發平臺進行一個場景的動態切換，有如下三步：

一、首先要有兩個以上能夠選擇切換的場景，在模模搭場景搭建工具中進行建模

二、初始界面默認爲第一個加載的場景，嵌入自由進出場景層級的功能

三、加入一個切換按鈕，經過點擊這個按鈕，場景之間能夠迅速切換，呈現淡入效果

由於物聯網數字化轉型，對於3D可視化的需求是空前的，爲了知足這一需求，小步快步屢次迭代是最好的策略，這裏就少不了一款低成本又易用的工具支持。

代碼示例以下：

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49

/**  * 說明：經過動態建立場景，實現場景切換  */   // 場景地址 var campusUrl = [     'https://www.thingjs.com/static/models/storehouse', 'https://www.thingjs.com/./uploads/wechat/oLX7p0wh7Ct3Y4sowypU5zinmUKY/scene/ %E5%9B%BE%E4%B9%A6%E9%A6%86%E5%A4%96' ] // 存儲建立完成的園區 var curCampus;   var app = new THING.App({     url: campusUrl[0] });   app.on('load', function (ev) {     curCampus = ev.campus;     app.level.change(curCampus);       new THING.widget.Button('場景切換', function () {         var url = curCampus.url;           // 動態建立園區         if (url === campusUrl[0]) {             createCampus(campusUrl[1]);         }         else {             createCampus(campusUrl[0]);         }     }); }); function createCampus(url) {     app.create({         type: "Campus",         url: url,         position: [0, 0, 0],         visible: false, // 建立園區過程當中隱藏園區         complete: function (ev) {             // 新園區建立完成後刪除以前的             curCampus.destroy();             // 將新園區賦給全局變量             curCampus = ev.object;             // 建立完成後顯示（漸現）             curCampus.fadeIn();             app.level.change(curCampus);         }     }); }