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

前言

在網絡迅速發展的今天，人們的交流已經再也不僅限與面對面，一個視頻通話就能拉近彼此之間的距離，而在工業管控上卻不單單侷限於實時視頻流的監控，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