1、 建立App

2、 載入場景

3、 載入地圖

在數字孿生視覺化行業，搭建模型以及3D場景都是讓人頭疼的事，但是有一個平臺解決了這些難題，它就是ThingJS。作為面向物聯網的3D視覺化開發平臺其特點是：簡單易學、提升效率、快速搭建、豐富模型、一鍵部署，前端工程師也能輕鬆進行數字孿生視覺化專案開發。如果你是一位數字孿生視覺化的初學者或正打算入門，你可以閱讀本文並在我的程式碼基礎之上繼續深入學習。

首先登入ThingJS官方網站，註冊賬戶後點擊線上開發就可以開始開發我們的數字孿生視覺化視覺化專案啦！開始的第一個步驟是建立App，下面我就通過建立App開始學習ThingJS。

1、 建立App

App 物件是 ThingJS 庫的功能入口，用於 3D 場景初始化。

下面通過建立 App 物件，對 3D 場景進行初始化，此時，App 物件為空。

var app = new THING.App();

並通過新增屬性名稱和屬性值，來設定 App 物件屬性。

var app = new THING.App({ name: value, });

name 為 App 物件屬性的名稱。value 為 App 物件屬性的值。

2、 載入場景

數字孿生視覺化場景可以在CampusBuilder（又稱模模搭）或者CityBuilder中建立，園區儲存後會自動同步到ThingJS同一賬號下。

將下面的程式碼輸入到專案檔案中，即可載入ThingJS示例園區。

var app = new THING.App({ url: "models/storehouse/", });
 

執行專案後，在預覽視窗中，可以展示出 ThingJS示例園區，如下圖所示。

上述程式碼中 url: "models/storehouse" 指園區場景資料的地址，此處為選填，該地址可寫絕對路徑也可寫相對路徑。當然也可以不輸入路徑，在你需要的時候通過 app.create 建立園區物體，從而載入園區。

3、載入地圖

將下面的程式碼輸入到專案檔案中，再把 myMapDirectory 替換為所需載入的地圖路徑即可，工具欄點選地圖可以獲得地圖路徑。通過日誌視窗（快捷鍵Ctrl+1），可檢視地圖層級數量。

var app = new THING.App(); // 3D場景初始化
 
app.background = [0, 0, 0]; // 設定場景背景為黑色
 
//引用地圖元件指令碼
THING.Utils.dynamicLoad(['https://www.thingjs.com/uearth/uearth.min.js'], function () {
 app.create({
 type: 'Map',
 url: 'myMapDirectory',
 complete: function (event) {
 console.log(event.object.userLayers.length);//日誌視窗顯示地圖層級數量
 }
 });
});
 

通過本文，我們已經瞭解瞭如何建立App、 載入園區，載入地圖，大家可點選進入ThingJS官網線上開發頁面ThingJS - 物聯網3D視覺化開發平臺 - 數字孿生視覺化平臺，點選檢視官方提供的示例，可以獨立完成建立數字孿生視覺化場景。