告別傳統工業互聯網，提高數字管控思維：三維組態分散式能源站
// 創建三維拓撲視圖
this.g3d = new ht.graph3d.Graph3dView();
this.g3dDm = this.g3d.dm();
// 將 3D 組件加入到 body 下
this.g3d.addToDOM();
// 修改左右鍵交互方式
let mapInteractor = new ht.graph3d.MapInteractor(this.g3d);
this.g3d.setInteractors([mapInteractor]);
// 修改最大仰角為 PI / 2
mapInteractor.maxPhi = Math.PI / 2;
為了能在懸浮建築模型的時候，視覺上有交互體驗，這裡設置了模型的高亮模式。
// 設置滑鼠懸浮高亮模式
this.g3d.setHighlightMode('mouseover');
// 設置高亮顏色
ht.Style['highlight.color'] = '#FEB64D';
場景渲染載入出來後，我們就能對於分散式能源站的工業流程可以通過管道的動畫來展示。HT 提供的 ht.Shape 是極其強大的圖元類型，其在 GraphView 和 Graph3dView 組件上都能展示出各種二維和三維的形狀效果， 其擴展子類 ht.PolyLine 可實現三維空間管道的功能，我們可以通過 ht.PolyLine 繪製出流程所經的路徑，通過 ht.Default.startAnim() 動畫函數去執行調用變化管道上的 uv 貼圖的偏移值，就可以達到流動的效果。
實現的程式碼如下：
animflow() {
// 動畫執行函數
ht.Default.startAnim({
duration: 2000,
easing: (t) => { return t },
action: (v, t) => {
// 通過數據模型獲取唯一標識 tag 得到管道節點設置 uv 偏移流動動畫
this.g3dDm.getDataByTag('flow1').setStyle('top.uv.offset', [ v, 0 ]);
this.g3dDm.getDataByTag('flow2').setStyle('top.uv.offset', [ v, 0.5 ]);
this,g3dDm.getDataByTag('flow3').setStyle('top.uv.offset', [ -v, 0.5 ]);
...
},
finishFunc: () => {
animflow();
}
});
}
而場景中呈現出來的數據，我們可以通過對接一些主流的介面，例如 ajax、axios 或者是 WebSocket，根據自己對接交互的需求，可以判斷採用輪詢調用介面或者是對接雙向進行數據傳輸，起到實時刷新數據的需求，而數據的載體可以對接到 HT 的 3D公告板 billboard 上進行展示：
billboard 同樣是基於 ht.Shape 的子類，對於 Shape 不管是在 2D 組態或者是 3D 組態上呈現，都可以通過一些定義的屬性 styleMap 來設定一些本身自帶的屬性值，當然用戶也可以自己通過在 attrObject 里設定一些自定義屬性。而分散式能源站中，我們通過對 billboard 設定了一些屬性值來控制公告板的屬性資訊：
let billboard = new ht.Node();
billboard.s({
// 設定 shpe3d 的類型為公告板 billboard
"shape3d": "billboard",
// 設置公告板的圖片 image
"shape3d.image": "symbols/htdesign/box/panel.json",
// 設置公告板始終自動旋轉面對螢幕
"shape3d.autorotate": true,
// 設置公告板開啟透明
"shape3d.transparent": true,
// 設置公告板不可移動
"3d.movable": false,
// 設置公告板始終置頂
"shape3d.alwaysOnTop": true,
// 設置公告板不可選中
"3d.selectable": false,
// 公告板開啟快取
"shape3d.image.cache": true
});
如果貼圖是矢量，對於開啟了快取的公告板，性能上會大大提高。對比一下這個 例子，你會發現快取機制上性能的差異性。由此看出，快取機制對於整體場景的流暢度是至關重要的，對於一些不必要實時刷新的面板資訊，我們可以採取快取的方式，並且在下一次更新的時候調用 Graph3dView.invalidateShape3dCachedImage(node)來手動刷新這個節點，從而大大提高了場景的性能：
g3d.invalidateShape3dCachedImage(billboard);
