前言

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

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

本文將從以下三個(gè)方面與大家分享高爐煉鐵廠在大屏展示上的實(shí)現(xiàn)：

1、頁面搭建：介紹基礎(chǔ)的 2D 圖紙與 3D 場(chǎng)景融合的項(xiàng)目搭建；

2、數(shù)據(jù)對(duì)接：進(jìn)行面板數(shù)據(jù)的對(duì)接展示；

3、動(dòng)畫實(shí)現(xiàn)：鐵水罐車運(yùn)輸、傳送帶運(yùn)送以及場(chǎng)景漫游的實(shí)現(xiàn)；

界面簡介及效果預(yù)覽

在整個(gè)高爐煉鐵廠可視化系統(tǒng)的 2D 面板上，呈現(xiàn)了昨日歷史與今日實(shí)時(shí)的一些重要預(yù)警數(shù)據(jù)，在管控上能起到實(shí)時(shí)監(jiān)控的作用，也能與歷史數(shù)據(jù)進(jìn)行對(duì)比，從而使生產(chǎn)與安全達(dá)到預(yù)期的預(yù)警效果；其次 3D 場(chǎng)景通過輕量化的模型呈現(xiàn)出一座高爐煉鐵廠的基本運(yùn)作流程以及鐵水罐車運(yùn)送鋼鐵的動(dòng)畫，加上環(huán)繞的漫游效果，起到全方位的實(shí)時(shí)監(jiān)控狀態(tài)的變化。

?

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

代碼實(shí)現(xiàn)

一、頁面搭建

在內(nèi)容實(shí)現(xiàn)上，采用了 HT 輕量化模型以及 web 組態(tài)，以 2/3D 結(jié)合的方式，通過的 json 反序列化得到 2D 圖紙和 3D 場(chǎng)景的完整呈現(xiàn)。首先會(huì)通過建 ht.graph.GraphView 和 ht.graph3d.Graph3dView 來呈現(xiàn) 2D 和 3D 的內(nèi)容。 2D 視圖組件和 3D 視圖組件進(jìn)行 deserialize() 反序列化對(duì)應(yīng)的 url 寄存的 json 呈現(xiàn)出場(chǎng)景與圖紙的內(nèi)容，兩者通過對(duì)數(shù)據(jù)模型 DataModel 里的子源素設(shè)置標(biāo)簽來進(jìn)行數(shù)據(jù)綁定，實(shí)現(xiàn)功能上的展示。

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

在內(nèi)容呈現(xiàn)上還需要將組件加入到 body 下，一般 2/3D 結(jié)合的項(xiàng)目上，都會(huì)使用 2D 組件加入到 3D 組件的根 div 下，然后 3D 組件再加入到 body下的方式實(shí)現(xiàn)面板與場(chǎng)景的加載。

// 修改左右鍵交互方式 let mapInteractor = new ht.graph3d.MapInteractor(this.g3d); g3d.setInteractors([mapInteractor]); // 設(shè)置修改最大仰角為 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);// 在一個(gè) HTMLElement 上，可能支持下面三個(gè)事件的一種或者兩種，但實(shí)際回調(diào)只會(huì)回調(diào)一種事件，優(yōu)先回調(diào)標(biāo)準(zhǔn)事件，觸發(fā)標(biāo)準(zhǔn)事件后，不會(huì)觸發(fā)兼容性事件 function getWheelEventName(element) {if ('onwheel' in element) { // 標(biāo)準(zhǔn)事件return 'wheel';} else if (document.onmousewheel !== undefined) { // 通用舊版事件return 'mousewheel';} else { // 舊版 Firefox 事件return 'DOMMouseScroll';} }

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

二、數(shù)據(jù)對(duì)接

在 2D 面板的呈現(xiàn)上，會(huì)有許多的圖表數(shù)據(jù)信息，我們可以通過訪問后臺(tái)數(shù)據(jù)接口得到數(shù)據(jù)，然后在 2D 或者 3D 對(duì)應(yīng)的組件上取得相應(yīng)的數(shù)據(jù)模型 dataModel，通過對(duì)數(shù)據(jù)模型里設(shè)置唯一的標(biāo)識(shí) tag 的子節(jié)點(diǎn)進(jìn)行對(duì)接數(shù)據(jù)就可以了。例如現(xiàn)在我們要對(duì) 2D 面板的數(shù)據(jù)進(jìn)行綁定，我們只需要通過 2D 組件的 g2d 得到數(shù)據(jù)模型，通過 g2d.dm().getDataByTag(tag) 就可以得到設(shè)置有唯一標(biāo)識(shí)的 tag 節(jié)點(diǎn)，來對(duì)接數(shù)據(jù)或者設(shè)置狀態(tài)展示了。

對(duì)于數(shù)據(jù)接口的獲取，可以運(yùn)用主流的 jQuery 框架下的 ajax、基于 promise 的 HTTP 庫的 axios 通過輪詢調(diào)用接口實(shí)時(shí)獲取數(shù)據(jù)或者使用 HTML5 提供的一種在單個(gè) TCP 連接上進(jìn)行全雙工通訊的協(xié)議 WebSocket，可以雙向進(jìn)行數(shù)據(jù)傳輸，在選擇運(yùn)用上可以匹配自己的實(shí)現(xiàn)需求，而本系統(tǒng)是采用通過 axios 調(diào)用接口獲取實(shí)時(shí)數(shù)據(jù)。

通過 axios 輪詢調(diào)用接口，實(shí)時(shí)獲取安全指數(shù)和實(shí)時(shí)數(shù)據(jù)信息（風(fēng)量、風(fēng)溫和富氧量）：

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

?

?

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

這里通過動(dòng)畫函數(shù)封裝了一個(gè)差值的動(dòng)畫效果，參數(shù)如下：

• node：動(dòng)畫處理的節(jié)點(diǎn)；
• name：數(shù)據(jù)綁定的名稱；
• value：數(shù)據(jù)綁定的值；
• format：綁定數(shù)據(jù)值的格式規(guī)范；
• accesstype：數(shù)據(jù)綁定的屬性從屬 ；
• duration：動(dòng)畫時(shí)間；

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

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

三、動(dòng)畫實(shí)現(xiàn)

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

在漫游巡視下，為了更全方位地體現(xiàn)場(chǎng)景，我們通過裁剪的方式來顯示和隱藏兩側(cè)的面板數(shù)據(jù)。

data.s('clip.percentage') 是 HT 節(jié)點(diǎn)自帶的樣式屬性，其本質(zhì)意義就是可以通過指定的方向進(jìn)行對(duì)于整個(gè)矢量圖標(biāo)的裁剪：

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

漫游動(dòng)畫是為了更好地從不同的視角去巡視場(chǎng)景，只要通過設(shè)置幾組眼睛視角，運(yùn)用 HT 的 moveCamera() 相機(jī)視角移動(dòng)的動(dòng)畫，依次去對(duì)應(yīng)眼睛的視角就可以自動(dòng)地切換不同視角下場(chǎng)景的效果。

// 默認(rèn)設(shè)置的眼睛視角數(shù)組 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] ]; // 開啟相機(jī)移動(dòng)漫游動(dòng)畫 playRoam() {// 設(shè)置場(chǎng)景眼睛視角let eye = ROAM_EYES[this.roamIndex];// 開啟相機(jī)視角移動(dòng)動(dòng)畫 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];// 判斷是否有下一組眼睛視角，有的話繼續(xù)執(zhí)行相機(jī)視角移動(dòng)動(dòng)畫，反之則重置漫游動(dòng)畫if (nextEye) {this.playRoam();}else {// 事件派發(fā)執(zhí)行顯示面板動(dòng)畫event.fire(EVENT_SHOW_PANEL);this.resetRoam();}}}); }

如果說場(chǎng)景視角漫游是一種大局整體觀的體現(xiàn)，那么鐵水罐車裝載與運(yùn)輸以及傳送帶的運(yùn)送則是一個(gè)高爐煉鐵流程的拼圖。通過一系列動(dòng)畫流程的表達(dá)，你會(huì)很清晰地發(fā)現(xiàn)，特定的 3D 場(chǎng)景下的講解說明具有完整的故事串聯(lián)性。

以下是鐵水罐車裝載與運(yùn)輸?shù)膭?dòng)畫流程：

?

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

?

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

?

?

對(duì)于三維模型，有兩個(gè)重要的坐標(biāo)系統(tǒng)，就是頂點(diǎn)的位置坐標(biāo)（X、Y、Z）以及 UV 坐標(biāo)。形象地說，UV 就是貼圖映射到模型表面的依據(jù)，U 和 V 分別是圖片在顯示器水平、垂直方向上的坐標(biāo)，取值一般都是0~1。而傳送帶以及管道的指示就是用這種方法實(shí)現(xiàn)的，HT 的模型節(jié)點(diǎn)自帶 uv 值的樣式屬性，我們只需要不斷地控制其偏移變化，就能實(shí)現(xiàn)傳輸?shù)男Ч?#xff1a;

// 設(shè)置初始偏移值 let offset1 = 0, trackOffset = 0; // 一直調(diào)用設(shè)置偏移值 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);

總結(jié)

數(shù)字化?和?智能化?大屏管控是?工業(yè)互聯(lián)網(wǎng)?的發(fā)展趨勢(shì)，在很大程度上解放了人力和勞力，在信息飛速傳訊的時(shí)代，大數(shù)據(jù)可視化和智能管控的結(jié)合，會(huì)演繹出許多驚奇的效果碰撞。對(duì)實(shí)時(shí)數(shù)據(jù)監(jiān)管下，預(yù)警信息也相當(dāng)重要，保障生產(chǎn)有序進(jìn)行的同時(shí)，我們也要關(guān)注安全問題，所以在大屏上呈現(xiàn)的許多內(nèi)容，都極其具有行業(yè)跟上工業(yè)互聯(lián)網(wǎng)的步伐代表性。

2019 我們也更新了數(shù)百個(gè)工業(yè)互聯(lián)網(wǎng) 2D/3D 可視化案例集，在這里你能發(fā)現(xiàn)許多新奇的實(shí)例，也能發(fā)掘出不一樣的工業(yè)互聯(lián)網(wǎng)：《分享數(shù)百個(gè) HT 工業(yè)互聯(lián)網(wǎng) 2D 3D 可視化應(yīng)用案例?》，更多行業(yè)應(yīng)用實(shí)例可以點(diǎn)擊下方查看更多官網(wǎng)案例~

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。