告別傳統工業互聯網，提高數字管控思維：三維組態分佈式能源站

前言

在網絡迅速發展的今天，人們的交流已經不再僅限與面對面，一個視頻通話就能拉近彼此之間的距離，而在工業管控上卻不僅僅侷限於實時視頻流的監控，HTML 本身擁有強大的 web 組件可供我們去實施一些好玩的例子，甚至加上一些簡單有趣的動畫和實時數據的對接，效果上可不止提高了一個水平。加上現如今已經啓動許久的 工業4.0 衍生出的新一代 工業互聯網 和不久才面世於衆的5G新時代，數據可視化與網絡帶寬發展的碰撞，激發出了一代 3D 數據可視化監管的發展。而 Hightopo（以下簡稱 HT ）的 HT for Web 產品上的 web 組態提供了豐富的 2D 組態 和 3D 組態 效果，可以根據需求快速實現一套完整的數據可視化系統。本文將通過一個 HT 的 3D 組態 實現的一個可視化分佈式能源站系統帶你走進豐富的組態的大門。

界面簡介及效果預覽

場景搭建上我們呈現了以熱、電、冷聯供爲主要形式的多聯產系統的分佈式能源站系統，根據管道流動傳遞的流程步驟下，有效地實現了能源的梯級利用的展示效果：

代碼實現

在能源站的建設中，分佈式能源站是指小規模化、利用熱、電、冷聯供爲主要形式分佈於負荷附近的清潔環保發電設施，是一種相對可靠又高效的發電形式。

3D 場景實現上通過創建 ht.graph3d.Graph3dView 來呈現 3D 的內容，3D 視圖組件進行 deserialize() 反序列化對應的 json 呈現出 3D 場景內容，然後將 3D 組件再加入到 body下的方式實現場景的加載渲染的效果。還可以自定義修改一些交互或者視角上的限制，如修改左右鍵的交互方式或者設置場景的最大仰角，都能使用戶在交互體驗上更爲流暢。

// 創建三維拓撲視圖
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);

總結

歷經了2018的工業互聯網元年和2019的 5G 元年，不止是分佈式能源站可視化系統的呈現，工業互聯網在管控方面將迎來了新時代。爲了給精彩的 HTML web 組態添加上絢麗的顏色，HT 在 2D 組態 和 3D 組態 上不斷地完善，可以通過 2/3D 融合的場景與圖紙搭建出一個個好玩的可視化系統。而作爲在 3D 組態上可以呈現出多樣化效果下搭建的可視化系統場景，傳統上一些數據可視化的工藝流程同樣能通過 2D 組態來實現：換熱站遠程監控系統

2019 我們也更新了數百個工業互聯網 2D/3D 可視化案例集，在這裏你能發現許多新奇的實例，也能發掘出不一樣的工業互聯網：https://mp.weixin.qq.com/s/ZbhB6LO2kBRPrRIfHlKGQA

同時，你也可以查看更多案例及效果：https://www.hightopo.com/demos/index.html