前言

在當今?工業4.0?新時代的推動下，不僅迎來了?工業互聯網?的發展，還開啟了?5G 時代?的新次源。而伴隨著帶寬的提升，網絡信息飛速發展，能源管控上與實時預警在工業互聯網中也占著舉足輕重的地位，而對于高爐煉鐵的發展上來看，目前已完成國內260座高爐的數字化和智能化落地，并推動煉鐵大數據平臺在俄羅斯、越南、伊朗、印尼等“一帶一路”國家鋼鐵企業中應用，充分體現了高爐智能化大屏產業應運而生。我們將使用?Hightopo（以下簡稱 HT ）的?HT for Web?產品上的 web 組態跟大家介紹一下通過 2/3D 融合搭建的高爐煉鐵廠可視化系統。

HT 可以快速實現豐富的 2D 組態和 3D 組態效果，可以根據需求發揮自己的想象，玩轉很多新奇的功能，并且通過優勢互補的作用下，完善出一套完整的可視化系統解決方案。所以在可視化系統的實現上，3D 場景采用以 HT 輕量化 HTML5/WebGL 建模的方案，實現快速建模、運行時輕量化到甚至手機終端瀏覽器即可 3D 可視化運維的良好效果；而在對應的 2D 圖紙上，使用特殊的矢量，在各種比例下不失真，加上布局機制，解決了不同屏幕比例下的展示問題。

本文將從以下三個方面與大家分享高爐煉鐵廠在大屏展示上的實現：

1、頁面搭建：介紹基礎的 2D 圖紙與 3D 場景融合的項目搭建；

2、數據對接：進行面板數據的對接展示；

3、動畫實現：鐵水罐車運輸、傳送帶運送以及場景漫游的實現；

界面簡介及效果預覽

在整個高爐煉鐵廠可視化系統的 2D 面板上，呈現了昨日歷史與今日實時的一些重要預警數據，在管控上能起到實時監控的作用，也能與歷史數據進行對比，從而使生產與安全達到預期的預警效果；其次 3D 場景通過輕量化的模型呈現出一座高爐煉鐵廠的基本運作流程以及鐵水罐車運送鋼鐵的動畫，加上環繞的漫游效果，起到全方位的實時監控狀態的變化。

?

案例詳情：https://www.hightopo.com/

代碼實現

一、頁面搭建

在內容實現上，采用了 HT 輕量化模型以及 web 組態，以 2/3D 結合的方式，通過的 json 反序列化得到 2D 圖紙和 3D 場景的完整呈現。首先會通過建 ht.graph.GraphView 和 ht.graph3d.Graph3dView 來呈現 2D 和 3D 的內容。 2D 視圖組件和 3D 視圖組件進行 deserialize() 反序列化對應的 url 寄存的 json 呈現出場景與圖紙的內容，兩者通過對數據模型 DataModel 里的子源素設置標簽來進行數據綁定，實現功能上的展示。

// 將 3D 組件加入到 body 下 g3d.addToDOM(); // 將 2D 組件加入到 3D 組件的根 div 下，父子 DOM 事件會冒泡，這樣不會影響 3D 場景的交互 g2d.addToDOM(g3d.getView());

在內容呈現上還需要將組件加入到 body 下，一般 2/3D 結合的項目上，都會使用 2D 組件加入到 3D 組件的根 div 下，然后 3D 組件再加入到 body下的方式實現面板與場景的加載。

// 修改左右鍵交互方式 let mapInteractor = new ht.graph3d.MapInteractor(this.g3d); g3d.setInteractors([mapInteractor]); // 設置修改最大仰角為 PI / 2 mapInteractor.maxPhi = Math.PI / 2;// 避免 2D 與 3D 交互重疊 let div2d = g2d.getView(); const handler = e => {if (g2d.getDataAt(e)) {e.stopPropagation();} }; div2d.addEventListener('mousedown', handler); div2d.addEventListener('touchstart', handler); div2d.addEventListener(getWheelEventName(div2d), handler);// 在一個 HTMLElement 上，可能支持下面三個事件的一種或者兩種，但實際回調只會回調一種事件，優先回調標準事件，觸發標準事件后，不會觸發兼容性事件 function getWheelEventName(element) {if ('onwheel' in element) { // 標準事件return 'wheel';} else if (document.onmousewheel !== undefined) { // 通用舊版事件return 'mousewheel';} else { // 舊版 Firefox 事件return 'DOMMouseScroll';} }

同時，在交互與呈現上改變了一些實現方式。例如，修改了左右鍵的交互方式，設置左鍵點擊旋轉 3D 場景，右鍵點擊為 pan 抓圖的場景移動方式。其次，在點擊 2D 在點到圖源像素時，我們希望不觸發 3D 的交互，例如在對 2D 面板表格中用滾輪滑動的時候，會觸發 3D 場景的縮放，這里通過監聽 moudedown、touchstart 和 wheel 三種交互來進行控制，對于 wheel 的監聽方式，為了保證兼容性就通過封裝一個 getWheelEventName() 的方法來得到事件名。

二、數據對接

在 2D 面板的呈現上，會有許多的圖表數據信息，我們可以通過訪問后臺數據接口得到數據，然后在 2D 或者 3D 對應的組件上取得相應的數據模型 dataModel，通過對數據模型里設置唯一的標識 tag 的子節點進行對接數據就可以了。例如現在我們要對 2D 面板的數據進行綁定，我們只需要通過 2D 組件的 g2d 得到數據模型，通過 g2d.dm().getDataByTag(tag) 就可以得到設置有唯一標識的 tag 節點，來對接數據或者設置狀態展示了。

對于數據接口的獲取，可以運用主流的 jQuery 框架下的 ajax、基于 promise 的 HTTP 庫的 axios 通過輪詢調用接口實時獲取數據或者使用 HTML5 提供的一種在單個 TCP 連接上進行全雙工通訊的協議 WebSocket，可以雙向進行數據傳輸，在選擇運用上可以匹配自己的實現需求，而本系統是采用通過 axios 調用接口獲取實時數據。

通過 axios 輪詢調用接口，實時獲取安全指數和實時數據信息（風量、風溫和富氧量）：

requestData() {let dm = this.view.dm();// 安全指數數據對接并載入圓環動畫axios.get('/levelData').then(res => {setBindingDatasWithAnim(dm, res, 800, v => Math.round(v));});// 實時數據(風量、風溫和富氧量)數據對接并載入進度條動畫axios.post('/nature', ['windNumber', 'windTemp', 'oxygenNumber']).then(res => {setBindingDatasWithAnim(dm, res, 800, v => parseFloat(v.toFixed(1)));}); }

?

?

對接數據后，實現一些圓環或者進度條值的增減動畫，其本質上是運用 HT 自帶的動畫函數 ht.Default.startAnim()，通過判斷數據綁定的屬性后，設定新值與舊值差額的范圍動畫，然后用戶定義函數 easing 參數通過數學公式來控制動畫的運動的快慢，例如勻速變化、先慢后快等效果。

這里通過動畫函數封裝了一個差值的動畫效果，參數如下：

• node：動畫處理的節點；
• name：數據綁定的名稱；
• value：數據綁定的值；
• format：綁定數據值的格式規范；
• accesstype：數據綁定的屬性從屬 ；
• duration：動畫時間；

setValueWithAnimation (node, name, value, format, accesstype = 's', duration = 300) {let oldValue;// 判斷數據綁定為自定義屬性 attr 后根據綁定名字取出舊值if (accesstype === 'a') {oldValue = node.a(name);}// 判斷數據綁定為樣式屬性 style 后根據綁定名字取出舊值else if (accesstype === 's') {oldValue = node.s(name);}// 默認通過取值器 getter 得到數據綁定的值else {oldValue = node[ht.Default.getter(name)]();}// 設置新舊值的差額let range = value - oldValue;// 執行動畫函數ht.Default.startAnim({duration: duration,easing: function (t) { return 1 - (--t) * t * t * t; },action: (v, t) => {// 新值增長的動畫范圍let newValue = oldValue + range * v;// 判斷有格式則制定數據格式if (format) {newValue = format(newValue);}// 判斷數據綁定為自定義屬性 attr 后設定新值if (accesstype === 'a') {node.a(name, newValue);}// 判斷數據綁定為樣式屬性 style 后設定新值else if (accesstype === 's') {node.s(name, newValue);}// 默認通過存值器 setter 設置數據綁定的新值else {node[ht.Default.setter(name)]()(node, newValue);}}}); }

我們時常會在公開的預警場合或者宣傳場合看見輪播滾動的數據信息，采用這種方法在公示的同時也不會遺漏掉任何一條數據信息，如果搭配上一些例如淡入淡出的過場效果，更會吸引關注的眼球。而對于實時警報信息的面板表格的實現，也是在添加新數據時，實現了一種過渡的 UI 交互上的沉浸感，主要還是運用了 HT 自帶的動畫函數 ht.Default.startAnim()，橫向通過滾動 100 寬度并數據透明度慢慢浮現，縱向采用向下偏移一行表格行高 54 來添加新的警報信息。

三、動畫實現

在靜態的場景以及面板下，很難直觀地去體現一個 2/3D 嵌合的系統的優越性。動畫卻是賦予生命靈魂的所在，一個恰到好處的 UI 動畫設計可以使面板的交互體驗鮮活起來，而在 3D 場景中，通過一組簡單形象的鐵水罐車運輸和傳送帶運送可以讓人清晰地明白生產運輸的流程，對于模型建筑的管控，利用好視角切入點，我們可以設置全方位的沉浸式漫游巡視。綜上，通過輕量模型場景與矢量組件面板的優勢疊加，可以呈現出一套靈活的高爐煉鐵廠生產預警系統。

在漫游巡視下，為了更全方位地體現場景，我們通過裁剪的方式來顯示和隱藏兩側的面板數據。

data.s('clip.percentage') 是 HT 節點自帶的樣式屬性，其本質意義就是可以通過指定的方向進行對于整個矢量圖標的裁剪：

一部電影可以通過各種鏡頭的切換下呈現不盡相同的敘事效果，日劇夕陽下熱血跑的急速切換或者幽暗角落下驚恐的淡入淡出，都是一種敘事的處理手段。在 HT 設定的 3D 場景中同樣地也存在著許許多多敘述的手法，最為基礎的設定就是通過場景中的主觀眼睛 eye 和場景中心 center 來搭配各種動畫的實現，可以自己設定值的方法函數來修改，也可以通過 HT 自身封裝的方法函數來處理，例如 flyTo() 和 moveCamera() 就是最為基礎的相機動畫，有興趣的話可以了解一下，自己動手嘗試搭配，肯定能最大地發揮 3D 場景的優勢所在。

漫游動畫是為了更好地從不同的視角去巡視場景，只要通過設置幾組眼睛視角，運用 HT 的 moveCamera() 相機視角移動的動畫，依次去對應眼睛的視角就可以自動地切換不同視角下場景的效果。

// 默認設置的眼睛視角數組 const ROAM_EYES = [[1683.6555274005063, 939.9999999999993, 742.6554147474625],[1717.1004359371925, 512.9256996098727, -1223.5575465999652],[-181.41773461002046, 245.58303266170844, -2043.6755074222654],[-1695.7113902533574, 790.0214102589537, -877.645744191523],[-1848.1700283399357, 1105.522705042774, 1054.1519814237804],[-108, 940, 1837] ]; // 開啟相機移動漫游動畫 playRoam() {// 設置場景眼睛視角let eye = ROAM_EYES[this.roamIndex];// 開啟相機視角移動動畫 moveCamerathis._roamAnim = this.view.moveCamera(eye, [0, 0, 0], {duration: this.roamIndex ? 3000 : 4000,easing: Easing.easeOut,finishFunc: () => {this.roamIndex ++;let nextEye = ROAM_EYES[this.roamIndex];// 判斷是否有下一組眼睛視角，有的話繼續執行相機視角移動動畫，反之則重置漫游動畫if (nextEye) {this.playRoam();}else {// 事件派發執行顯示面板動畫event.fire(EVENT_SHOW_PANEL);this.resetRoam();}}}); }

如果說場景視角漫游是一種大局整體觀的體現，那么鐵水罐車裝載與運輸以及傳送帶的運送則是一個高爐煉鐵流程的拼圖。通過一系列動畫流程的表達，你會很清晰地發現，特定的 3D 場景下的講解說明具有完整的故事串聯性。

以下是鐵水罐車裝載與運輸的動畫流程：

?

在 3D 場景中使用 x, y, z 來分別表示三個軸，通過不斷修改節點的 3D 坐標就可以實現位移效果 car.setPosition3d(x, y, z)，而對于鐵水罐車上的裝載標簽則使用吸附的功能，使其吸附在鐵水罐車上就能跟著一起行駛移動，然后在指定的空間坐標位置上通過 car.s('3d.visible', true | false) 來控制鐵水罐車的出現與隱藏的效果。

?

而關于傳送帶上煤塊、鐵礦的傳輸和管道氣體流通的指示，通過使用 UV 紋理貼圖的偏移來實現會方便很多，先來看看效果上的呈現：

?

?

對于三維模型，有兩個重要的坐標系統，就是頂點的位置坐標（X、Y、Z）以及 UV 坐標。形象地說，UV 就是貼圖映射到模型表面的依據，U 和 V 分別是圖片在顯示器水平、垂直方向上的坐標，取值一般都是0~1。而傳送帶以及管道的指示就是用這種方法實現的，HT 的模型節點自帶 uv 值的樣式屬性，我們只需要不斷地控制其偏移變化，就能實現傳輸的效果：

// 設置初始偏移值 let offset1 = 0, trackOffset = 0; // 一直調用設置偏移值 setInterval(() => {flows.each(node => {node.s({'top.uv.offset': [-offset1, 0],'front.uv.offset': [-offset1, 0],});});track.s('shape3d.uv.offset', [0, -trackOffset]);// 偏移值增加offset1 += 0.1;trackOffset += 0.03; }, 100);

總結

數字化?和?智能化?大屏管控是?工業互聯網?的發展趨勢，在很大程度上解放了人力和勞力，在信息飛速傳訊的時代，大數據可視化和智能管控的結合，會演繹出許多驚奇的效果碰撞。對實時數據監管下，預警信息也相當重要，保障生產有序進行的同時，我們也要關注安全問題，所以在大屏上呈現的許多內容，都極其具有行業跟上工業互聯網的步伐代表性。

2019 我們也更新了數百個工業互聯網 2D/3D 可視化案例集，在這里你能發現許多新奇的實例，也能發掘出不一樣的工業互聯網：《分享數百個 HT 工業互聯網 2D 3D 可視化應用案例?》，更多行業應用實例可以點擊下方查看更多官網案例~

總結

以上是生活随笔為你收集整理的工业互联网新发展：基于 HTML5 WebGL 的高炉炼铁厂可视化系统！的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。