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

前言

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