選單

從零開始學習3D視覺化之場景層級(2)

1、 動態建立組合場景

2、 載入後的樓層和建築對齊

3、 預知未知載入場景的物體結構

對於一些大型的

3D視覺化

場景,使用 CampusBuilder 直接製作會比較困難,直接載入也存在效能、載入時間等問題。

解決這個問題首先在CampusBuilder 中可以分成多個工程進行搭建,比如園區和所有建築的外立面使用一個獨立的工程進行搭建,每棟建築的室內分別使用其他獨立工程進行搭建。但是在搭建過程中需要注意每個工程裡的物體命名必須保證唯一。

1、動態建立組合場景

例如,我按如下步驟來搭建3D視覺化園區並開發應用。

1、搭建一個3D視覺化園區,園區內有一個建築,我會分成兩個工程進行搭建,分別是“XX工業園區”、“XX工業園區-辦公樓室內”。

2、分別匯出各個工程,並同步到 ThingJS 平臺;

3、在 ThingJS 先載入“XX工業園區”,該園區中包含建築,但該建築只有外立面。

4、使用事件,可重新註冊進入建築的響應函式,事件回撥內使用 app。create() ,動態載入“XX工業園區-辦公樓室內”這個園區工程。

5、使用程式碼,獲取“辦公樓TMP”這個3D視覺化園區物體的建築,將其下的“辦公樓樓層一”,“辦公樓樓層二”,新增到本來只有外立面的“辦公樓”物件身上。再將“XX工業園區-辦公樓室內”和“辦公樓TMP”這些臨時物件刪掉。

從零開始學習3D視覺化之場景層級(2)

2、載入後的樓層和建築對齊

為保證後面載入的3D視覺化樓層和之前載入建築對齊,可以這樣做:

在 CampusBuilder 搭建3D視覺化場景時,保證樓層相對建築“辦公樓”和“辦公樓 TMP”的位置一致。

在 ThingJS 線上開發中,將“辦公樓 TMP”下的樓層“掛接”到“辦公樓”時,設定樓層的相對座標。

buildingTmp。floors。forEach(function (floor) {buildingMain。add({ object: floor, // 設定相對座標,樓層相對於建築的位置保持一致 localPosition: floor。localPosition });})

從零開始學習3D視覺化之場景層級(2)

3、預知未載入場景的物體結構

如果需要在未載入3D視覺化場景的時候知道一個物體在場景層級裡的位置,以便於將視角切換過去,有兩種方法:

1、可以透過 app。getCampusJSON 介面,在不載入園區場景的情況下,解析出該園區的場景樹結構,做些類似上面動態載入場景的操作,在3D系統中建立完整的場景結構。再透過 EnterLevel 相關事件,配合上面自動動態載入的方案,就可以找到並切換到物體。

2、也可以自行建立後臺資料結構,後臺進行查詢,通知前臺,前臺使用 EnterLevel 相關事件,配合上面自動動態載入的方案,就可以找到並切換到物體。

從零開始學習3D視覺化之場景層級(2)

細心的朋友會發現,給每個物體都起一個名字是為了以後對功能做擴充套件,就相當於該物體在場景中有了唯一的標識,後面會很方便。到此,我就完成了動態載入一個完整的3D視覺化“辦公樓”。完整程式碼可以點選ThingJS官方示例檢視。