基於 HTML5 的工業互聯網 3D 可視化應用

07-08

工業企業中生產線處於高速運轉，由工業設備所產生、採集和處理的數據量遠大於企業中計算機和人工產生的數據，生產線的高速運轉則對數據的實時性要求也更高。破解這些大數據就是企業在新一輪製造革命中贏得競爭力的鑰匙。因此，工業生產可視化系統是工業製造業的最佳選擇。

工業生產可視化是將虛擬現實技術有機融入了工業監控系統，系統展現界面以生產廠房的模擬場景為基礎，對各個工段、重要設備的形態都進行復原，作業流轉狀態可以在廠房視圖當中直接顯示。在單體設備視圖中，機械設備的運行模式直接以模擬動畫的形式展現，通過圖像、三維動畫以及計算機程式控制技術與實體模型相融合，實現對設備的可視化表達，使管理者對其所管理的設備有形象具體的概念。同時，對設備運行中產生的所有參數一目了然，從而大大減少管理者的勞動強度，提高管理效率和管理水平。

以下是基於 HT for Web（http://www.hightopo.com/）的裙房監控系統的具體解決方案動圖：

XXX裙房自控系統?

www.hightopo.com

基於 HT for Web（http://www.hightopo.com/）的 HTML5 技術除了應用在工業行業外，現在越來越多用戶實用 HT 在城市服務、農業、樓宇、管廊、安防、BIM、隧道等等傳統的領域進行實時聯網監控，通過數字孿生雙胞胎的方式將實體設備與具體的數據傳輸過去，方便管理員進行管理，也為監管省去了很大一筆人力開銷。

最初客戶給出的需求是實現動畫以及開關動畫的功能，控制動畫和燈光的開關佔據屏幕的比例不需要太大，按照人類習慣的操作方式來說，放在右上角是最合適的，剩下的整屏就由 3D 場景來填充，主次分明。

3D 場景搭建

要將工業生產可視化，3D 的展現是必不可少，HT 需要創建一個 3D 組件，搭建靠 2 行代碼來實現：

var g3d = new ht.graph3d.Graph3dView();// Hightopo 的 3D 組件（三維場景地基）g3d.addToDOM();// 將 3D 組將添加到 body 體中

HT 的組件一般都會嵌入 BorderPane（https://hightopo.com/guide/guide/core/borderpane/ht-borderpane-guide.html）、SplitView（https://hightopo.com/guide/guide/core/splitview/ht-splitview-guide.html）和 TabView （https://hightopo.com/guide/guide/core/tabview/ht-tabview-guide.html）等容器中使用，而最外層的 HT 組件則需要用戶手工將 getView() 返回的底層 div 元素添加到頁面的 DOM 元素中，這裡需要注意的是，當父容器大小變化時，如果父容器是 BorderPane 和 SplitView 等這些HT預定義的容器組件，則 HT 的容器會自動遞歸調用孩子組件 invalidate 函數通知更新。但如果父容器是原生的 html 元素，則 HT 組件無法獲知需要更新，因此最外層的 HT 組件一般需要監聽 window 的窗口大小變化事件，調用最外層組件 invalidate 函數進行更新。

為了最外層組件載入填充滿窗口的方便性，HT 的所有組件都有 addToDOM 函數，其實現邏輯如下，其中 iv 是 invalidate 的簡寫：

addToDOM = function(){ var self = this, view = self.getView(),//獲取組件的底層 div style = view.style; document.body.appendChild(view);//將組件底層div添加進body中 style.left = 0;//ht 默認將所有的組件的position都設置為absolute絕對定位 style.right = 0; style.top = 0; style.bottom = 0; window.addEventListener(resize, function () { self.iv(); }, false);//窗口大小改變事件，調用刷新函數}

接下來我們要向場景中添加各種模型，用代碼生成模型是非常痛苦的，我們將整個場景的模型都放到一個 JSON 文件中，並通過 ht.Default.xhrLoad 方法將這個 JSON 轉換為 3D 場景顯示在界面上：

var dm = g3d.dm();// 獲取 HT 3D 組件的數據容器ht.Default.xhrLoad(scenes/system.json, function(text) { dm.deserialize(text);// 將函數的 text（json）參數傳給 deserialize 反序列化方法，可將 json 內容中的元素添加到 dataModel 數據容器中進行顯示}

ht.Default.xhrLoad 方法是一個非同步載入 json 文件的方法，第一個參數為傳入的 json 文件，路徑是相對於 html 文件的，第二個參數是回調函數，在傳入的 json 文件解析完畢之後做的操作。此方法為非同步載入，因此需要對 dm 數據容器中的數據進行獲取或操作的話，需要將獲取/操作的代碼寫在 dm.deserialize(text) 方法之後，因為此時 dm 數據容器中才有節點。

上面將 JSON 文件發序列化到 dm 數據容器中後界面顯示如下：

上圖中整個場景的背景是我後期用代碼添加的，通過前面的 addToDOM 函數可以知道我們可以通過 getView 方法獲取 HT 3D 組件的底層 div，因此要在此 div 上添加一張背景圖也就不難了。剩下的 3D 模型部分都是由 JSON 反序列化出來的。

場景中葉輪的轉動

工業葉輪的轉動不可能是整個模型在轉動，而是中間的「滾輪」在轉動，這要求設計師在創建模型的時候就將這個部分分離出來，然後我給此部分設置 tag 唯一標識為「yelun」，通過 dm.getDataByTag(yelun) 即可獲取到這個節點，然後給這個節點設置旋轉動畫。

HT 中調度進行的流程是，先通過 DataModel （https://hightopo.com/guide/guide/core/datamodel/ht-datamodel-guide.html）添加調度任務，DataModel 會在調度任務指定的時間間隔到達時，遍歷 DataModel 所有圖元回調調度任務的 action 函數，可在該函數中對傳入的 Data 圖元做相應的屬性修改以達到動畫效果。

根據上面對調度任務的說明，我們了解到向 dm 數據容器中添加調度任務會遍歷整個數據容器，數據容器中內容不多的時候可能感覺不到，但當數據容器中內容多且模型重的情況下，對 dm 數據容器進行過濾就非常有必要了，而且如果添加多個調度任務都遍歷了整個數據容器，那麼對電腦的性能要求可想而知。我一開始使用的時候就是遺漏了對 dm 數據容器的過濾，因為場景不大，所以一開始沒有感覺，後來加了燈光後很重，就立馬出現問題了，才發現遺漏了對 data 的過濾判斷。

因此，調度任務傳入的參數對象中 action 方法傳入了一個 data 值，用於設置當前動畫的對象，不是此對象的直接可以 return 掉，不做任何操作：

var task = [];var yelun = dm.getDataByTag(yelun);// 獲取 tag 為 yelun 的節點// 創建一個動畫調度任務task.yelunTask = { interval: 100,// 動畫持續時間 action: function(data) {// 動畫內容 if (data !== yelun) return; // 設置 yelun 節點的 x 軸旋轉為當前 x 軸旋轉值再加上 Math.PI/12 yelun.setRotationX(yelun.getRotationX() + Math.PI/12); }}dm.addScheduleTask(task.yelunTask);// 將調度任務添加到數據容器中

容器水位的上升下降

容器中水位的上升下降也是數字孿生（雙胞胎）的體現，數據同步進行展現給監控人員，監控人員不需要進行數據採集系統也能直接獲取當前數據。

這裡將容器水位的上升下降放到一個動畫調度任務里了，也就是說通過 dm 數據容器操作這個調度任務就能夠同時操作這兩個部分的動畫，將上一小節中的 yelunTask 調度任務的 action 更改一下，因為上面的代碼只對 yelun 節點進行了操作，我們需要對裝水的容器也進行操作。首先獲取裝水的容器，這裡將這個節點的唯一標識 tag 設置為「cylinder」：

var cylinder = dm.getDataByTag(cylinder);然後更改調度中的 action 部分代碼：action: function(data) { if (!(data === yelun || data === cylinder)) return; // 葉輪轉動 yelun.setRotationX(yelun.getRotationX() + Math.PI/12); // 容器水位變化 if (cylinder.getTall() === 100) cylinder.setTall(0);// 容器水位高度到達 100 的值時，重置為 0else cylinder.setTall(cylinder.getTall() + 1);}

葉輪轉動故障展示

因為沒有數據的傳輸，所以這邊故障信息我只能自己造假數據了，我創建了一個 10 以內的整數隨機數，判斷這個值是否為 1，如果為 1 就將運作正常的圖標變換成告警圖標，同時我還通過這個值來設置 dm 數據容器添加/移除調度任務來控制當前葉輪轉動/停止、容器水位變化與否：

開啟/關閉動畫

上一小節我們已經提到了開啟/關閉動畫的方式，這邊我們運用 form 表單，手動操作動畫的開啟和關閉（註：這裡只說明第一行的「水流開關」）。

工業互聯網還有一個好處，就是能夠遠程來控制現場的開關，同時也能快速監測到設備是否故障，能夠及時反饋給維修人員，減少了時間成本，以及降低了生產停滯的風險。

首先，我們需要創建一個 formPane （https://hightopo.com/guide/guide/plugin/form/ht-form-guide.html）表單組件，在這個表單組件中添加行數據，這邊操作動畫的開啟和關閉我是用的 checkbox，值變化只有 true 和 false，這個情況用這個是比較優的選擇。然後通過監聽這個 checkbox 的值的變化事件，設置動畫的開啟（添加）或者關閉（移除）。

addRow 方法上面代碼中一言兩語解釋不清楚，參考如下說明：

addRow(items, widths, height, params) 添加一行組件

items為元素數組，元素可為字元串、json 格式描述的組件參數信息、html 元素或者為 null 的空
widths 為每個元素寬度信息數組，寬度值大於 1 代表固定絕對值，小於等於 1 代表相對值，也可為 80+0.3 的組合
height 為行高信息，值大於 1 代表固定絕對值，小於等於 1 代表相對值，也可為 80+0.3 的組合，為空時採用默認行高
params 為 json 格式的額外參數，例如插入行索引以及行邊框或背景顏色等，如 { index: 2, background: yellow, borderColor: red }

上面代碼中提到的 arrowTask 是對場景中的「箭頭」流動添加的動畫調度任務，通過控制 form 表單中 checkbox 複選框是否選中可直接操作 dm 是否添加/移除動畫調度任務。

燈光的開啟/關閉

控制燈光的開啟和關閉，這裡也是通過 form 表單上的 checkbox 複選框來進行操作的。一般建議不要使用燈光，渲染太燒性能了，這裡只是為了效果而添加做一個說明。

首先我們需要創建一個「燈」節點，然後通過設置樣式屬性 setStyle 來設置燈的類型、顏色、燈照範圍等等屬性：

// 添加燈光var light = new ht.Light();// 創建一個燈節點（繼承於 ht.Node）（https://hightopo.com/guide/guide/core/lighting/ht-lighting-guide.html）light.p3([15, 120, 50]);// 設置此節點的位置light.setTag(light);// 設置此節點的唯一標識dm.add(light);// 將此節點添加到 dm 數據容器中進行顯示light.s({// 設置此節點的樣式屬性 setStyle 簡寫為 s light.type: point,// 設置燈類型 light.color: rgb(252,252,149),// 設置燈顏色 light.range: 1400,// 設置燈照範圍 3d.visible: false// 設置此節點在 3d 上不可見});

然後在 form 表單上添加一行用來控制燈的開關、燈的顏色燈功能：

// 9、燈光開啟和關閉以及顏色切換form.addRow([// form 中添加一行 { id: lightDisabled,// 設置此項的 id 值，可通過 form.getItemById 獲取此項 checkBox: {// 複選框組件 label: 開關燈,// 設置複選框文本內容 labelColor: #fff,// 設置複選框文本顏色 selected: true,// 設置複選框是否選中 onValueChanged: function() {// 監聽值變化事件 dm.getDataByTag(light).s(light.disabled, !this.getValue());// 獲取燈節點並設置是否關閉燈光效果，light.disabled 屬性默認為false，可設置為true關閉燈效果 } }},{ colorPicker: {// 顏色選擇器組件 value: rgb(252,252,149),// 設置當前值 instant: true,// 設置是否處於即時狀態，將會實時改變模型值 onValueChanged: function() {// 監聽值變化事件 dm.getDataByTag(light).s(light.color, this.getValue())// 設置燈的顏色為當前選中的顏色 } } }], [0.1, 0.1]);

點擊切換模型

HT 將事件監聽封裝到 mi 事件（https://hightopo.com/guide/guide/core/3d/ht-3d-guide.html#ref_interactionlistener）中，mi 方法中有多種事件，這裡我們需要的是單擊節點的事件監聽 clickData 事件，通過判斷事件類型 e.kind 是否為 clickData，之後對節點的設置模型即可：

HT 設置模型是通過設置節點的樣式屬性 node.setStyle（簡寫為 node.s）為 shape3d 來實現的。

點擊隱藏/顯示屬性窗口

上面說到了事件的監聽，既然同為點擊事件，我們就在一個監聽事件裡面進行具體的操作即可，在上面的 if (e.kind === clickData) 判斷中添加顯示/隱藏屬性窗口的邏輯：

文本內容/顏色變換

工業生產現場數據肯定是不斷地變化，數字孿生的特性也在這裡充分地展示出來，根據設備返回的數據不斷地更新顯示數據，清晰地展示了當前設備的動態。

通過 tag 獲取場景中對應的屬性窗口的節點，此節點為一個面板，相當於六面體有六面，這個節點類型就只有一面，並通過設置屬性 shape3d.image 設置此節點上的圖片為 tooltips.json 矢量圖標（https://hightopo.com/guide/guide/core/vector/ht-vector-guide.html）。矢量在 Hightopo（HT）中是矢量圖形的簡稱，常見的 png 和 jpg 這類的柵格點陣圖，通過存儲每個像素的顏色信息來描述圖形，這種方式的圖片在拉伸放大或縮小時會出現圖形模糊，線條變粗出現鋸齒等問題。而矢量圖片通過點、線和多邊形來描述圖形，因此在無限放大和縮小圖片的情況下依然能保持一致的精確度。而且 HT 的矢量圖形還有一個非常重要的特點，就是能夠對矢量圖形上的任何一個部分都進行數據綁定，也就是說上圖中的五張圖，我們可以只繪製一張圖，通過數據綁定來改變這張圖上的文本以及數值內容。

矢量圖標中的數據綁定可以用在工業中的生產看板、大屏中的數據顯示等等，都能夠以一種高效的方式進行產品的整合。

矢量圖形的數據綁定能夠再寫一篇文章進行闡述了，這裡就不多提，大家自行去官網上查看「矢量手冊」以及「數據綁定手冊」，說明的比較詳細。

獲取到對應的節點之後，通過 node.a 方法可以獲取和設置數據綁定（https://hightopo.com/guide/guide/core/databinding/ht-databinding-guide.html#ref_vector）的屬性，這裡我們綁定的是文本內容「label」和數值「value」以及數值顏色「valueColor」:

工業互聯網 3D 的可視化應用非常廣泛，除了裙房監控系統，工業設備比如變壓器的數據監控以及智能樓宇外還有很多很多，甚至可以運用到農業以及城市規划上......最後，有興趣的朋友可以私信或留言交流一下技術或者交個朋友。