工業企業中生產線處於高速運轉，由工業裝置所產生、採集和處理的資料量遠大於企業中計算機和人工產生的資料，生產線的高速運轉則對資料的實時性要求也更高。破解這些大資料就是企業在新一輪製造革命中贏得競爭力的鑰匙。因此，工業生產視覺化系統是工業製造業的最佳選擇。
工業生產視覺化是將虛擬現實技術有機融入了工業監控系統，系統展現介面以生產廠房的模擬場景為基礎，對各個工段、重要裝置的形態都進行復原，作業流轉狀態可以在廠房檢視當中直接顯示。在單體裝置檢視中，機械裝置的執行模式直接以模擬動畫的形式展現，通過影像、三維動畫以及計算機程控技術與實體模型相融合，實現對裝置的視覺化表達，使管理者對其所管理的裝置有形象具體的概念。同時，對裝置執行中產生的所有引數一目瞭然，從而大大減少管理者的勞動強度，提高管理效率和管理水平。
以下是基於 HT for Web（http://www.hightopo.com/）的裙房監控系統的具體解決方案動圖：
http://www.hightopo.com/demo/annexMonitor/
基於 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 資料容器新增/移除排程任務來控制當前葉輪轉動/停止、容器水位變化與否：
var alarm = dm.getDataByTag(`alarm`);// 獲取告警圖示節點
setInterval(function() {
var random = Math.floor(Math.random()*5);
if (random === 1) {
alarm.s(`shape3d.image`, `symbols/電信/故障 2.json`);// 設定告警圖示節點為“故障”圖示
dm.removeScheduleTask(task.yelunTask);// 將葉輪的動畫加上
}
else {
alarm.s(`shape3d.image`, `symbols/電信/正常 2.json`);// 設定告警圖示節點為“正常”圖示
dm.addScheduleTask(task.yelunTask);// 移除葉輪的動畫
}
}, 1000);
複製程式碼開啟/關閉動畫
上一小節我們已經提到了開啟/關閉動畫的方式，這邊我們運用 form 表單，手動操作動畫的開啟和關閉（注：這裡只說明第一行的“水流開關”）。
工業網際網路還有一個好處，就是能夠遠端來控制現場的開關，同時也能快速監測到裝置是否故障，能夠及時反饋給維修人員，減少了時間成本，以及降低了生產停滯的風險。
首先，我們需要建立一個 formPane （https://hightopo.com/guide/guide/plugin/form/ht-form-guide.html）表單元件，在這個表單元件中新增行資料，這邊操作動畫的開啟和關閉我是用的 checkbox，值變化只有 true 和 false，這個情況用這個是比較優的選擇。然後通過監聽這個 checkbox 的值的變化事件，設定動畫的開啟（新增）或者關閉（移除）。
function createForm(task) {
var form = new ht.widget.FormPane();// 建立 form 表單元件物件
form.setWidth(160);// 設定表單元件的寬度
form.setHeight(90);// 設定表單元件的高度
// 設定表單元件底層 div 的樣式屬性
form.getView().style.right = `10px`;
form.getView().style.top = `10px`;
form.getView().style.background = `rgba(255, 255, 255, 0.2)`;
form.getView().style.borderRadius = `5px`;
document.body.appendChild(form.getView());// 將 form 表單底層 div 新增到 body 體中
// 水閥開啟和關閉
form.addRow([// 給 form 表單新增一行資料
{
checkBox: {// 核取方塊類，HT 將此封裝到 form 中 實際上建立了一個 ht.widget.CheckBox 元件
label: `水流開關`,// 設定 checkbox 的文字內容
labelColor: `#fff`,// 設定 checkbox 文字顏色
selected: true,// 設定此 checkbox 是否選中
onValueChanged: function() {// 監聽值變化事件
if (this.isSelected()) dm.addScheduleTask(task.arrowTask);// 如果這個 checkBox 選中，則新增動畫(開啟水閥)
else dm.removeScheduleTask(task.arrowTask);// 如果這個 checkBox 未被選中，則移除動畫(關閉水閥)
}
}
}
], [0.1]);// 設定這個行資料中列的寬度
return form;
}
複製程式碼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，之後對節點的設定模型即可：
var waterPump6 = dm.getDataByTag(`水泵06`);// 獲取 tag 為“水泵06”的節點
waterPump6.s({// 設定該節點的樣式屬性
`note`: `點我切換模型`,// 設定標註文字內容
`note.transparent`: true,// 設定標註在 3D 下是否透明
`note.t3`: [0, 0, -50],// 設定標註在 3D 下的偏移
`note.reverse.flip`: true//設定標註背面是否顯示正面的內容
});
g3d.mi(function(e) {// 監聽 3D 元件上的事件
if(e.kind === `clickData`) {// 點選節點事件
// 模型點選切換
if (e.data === waterPump6 && e.data.s(`shape3d`) === `models/裙房系統/水泵.json`) e.data.s(`shape3d`, `models/fengji.json`);// 設定點選節點的 shape3d 樣式屬性
else if (e.data === waterPump6 && e.data.s(`shape3d`) === `models/fengji.json`) e.data.s(`shape3d`, `models/裙房系統/水泵.json`);// 設定點選節點的 shape3d 樣式屬性
}
});
複製程式碼HT 設定模型是通過設定節點的樣式屬性 node.setStyle（簡寫為 node.s）為 shape3d 來實現的。
點選隱藏/顯示屬性視窗
上面說到了事件的監聽，既然同為點選事件，我們就在一個監聽事件裡面進行具體的操作即可，在上面的 if (e.kind === `clickData`) 判斷中新增顯示/隱藏屬性視窗的邏輯：
var waterPump5 = dm.getDataByTag(`水泵05`);
waterPump6.s({
`note`: `點我切換模型`,
`note.transparent`: true,
`note.t3`: [0, 0, -50],
`note.reverse.flip`: true
});
g3d.mi(function(e) {
if(e.kind === `clickData`) {
// 模型點選切換
if (e.data === waterPump6 && e.data.s(`shape3d`) === `models/裙房系統/水泵.json`) e.data.s(`shape3d`, `models/fengji.json`);
else if (e.data === waterPump6 && e.data.s(`shape3d`) === `models/fengji.json`) e.data.s(`shape3d`, `models/裙房系統/水泵.json`);
// 模型點選 隱藏/顯示屬性視窗
if (e.data === waterPump5) {// 判斷點選的圖元是否為 waterPump5
if(giveWater.s(`3d.visible`)) {// 判斷當前屬性視窗是否為顯示狀態
giveWater.s(`3d.visible`, false);// 設定屬性視窗不可見
e.data.s(`note`, `點我顯示屬性視窗`);// 更改標註中的顯示內容
}
else {
giveWater.s(`3d.visible`, true);// 設定屬性視窗可見
e.data.s(`note`, `點我隱藏屬性視窗`)// 更改標註中的顯示內容 }
}
}
});
複製程式碼文字內容/顏色變換
工業生產現場資料肯定是不斷地變化，數字孿生的特性也在這裡充分地展示出來，根據裝置返回的資料不斷地更新顯示資料，清晰地展示了當前裝置的動態。
通過 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”:
var billboardArray = [];
// 通過 tag 獲取節點
var temperature1 = dm.getDataByTag(`回水溫度1`);// 獲取 tag 為"回水溫度1"的節點
billboardArray.push(temperature1);
var temperature2 = dm.getDataByTag(`回水溫度2`);
billboardArray.push(temperature2);
var returnPress = dm.getDataByTag(`回水壓力`);
billboardArray.push(returnPress);
var givePress = dm.getDataByTag(`供水壓力`);
billboardArray.push(givePress);
var giveTemp = dm.getDataByTag(`供水溫度`);
billboardArray.push(giveTemp);
var giveWater = dm.getDataByTag(`供水流量`);
billboardArray.push(giveWater);
// 文字標籤內容變換
billboardArray.forEach(function(billboard) {
billboard.a(`label`, billboard.getTag());// 設定資料繫結屬性為 label 的屬性值為當前節點的 tag 內容
});
// 文字標籤數字變換+顏色變換 更改圖示中繫結的 value 屬性值
setInterval(function() {
billboardArray.forEach(function(billboard) {
var random = Math.random()*100;
billboard.a(`value`, random.toFixed(2));
// 設定圖示中“數值內容顏色”
if (random > 70 && random <= 80) billboard.a(`valueColor`, `#00FFFF`);
else if (random > 80 && random <= 90) billboard.a(`valueColor`, `#FFA000`);
else if (random > 90) billboard.a(`valueColor`, `#FF0000`);
else billboard.a(`valueColor`, ``);
});
}, 1000);
複製程式碼工業網際網路 3D 的視覺化應用非常廣泛，除了裙房監控系統，工業裝置比如變壓器的資料監控以及智慧樓宇外還有很多很多，甚至可以運用到農業以及城市規劃上……最後，有興趣的朋友可以私信或留言交流一下技術或者交個朋友。