前言
在目前大數據時代背景之下，數據可視化的需求也變得越來越龐大,在數據可視化的背景之下，通過智能機器間的鏈接並最終將人機鏈接,結合軟件和大數據分析的工業互聯網也將變得越來越容易實現!
國家也敏銳意識到時代特性並及時把握時機，培育新的經濟增長點，推動“中國制造”升級,實現工業大國到工業強國的質變，而諸多的業內人士也正在努力完成對自己的“升級”與“改造”，而大數據的數據可視化與工業的結合，實現了工控的可視化，大大地提高工控管理效率，風險把控能力，產業流程有效監督等等。
如下所示，便是一個基於 HTML5 WebGL 的 3D 風機 Web 組態工業互聯網應用中的風機項目：
此項目鏈接：基於 HTML5 WebGL 的 3D 風機 Web 組態工業互聯網應用（http://www.hightopo.com/demo/FanDevice/）
從上面設計圖中可以看到頁面布局主要四部分組成：table 表格，表盤，echarts 圖表，3d 風機模型。
在這個頁面中非常具體而又全面的展示了風機設備的相關設備信息，比如風機設備名稱，風機參數，發電量數據，機艙溫度以及功率風速折線圖表等等，這對於管理員而言是一種享受！
在 3d 風機模型出可以對風機進行拉近拉遠等交互，實現風機外殼透明化、隱藏、顯示效果，如圖所示：
在拉近風機隱藏風機外殼顯示內部部件時候可以點擊部件獲取點擊部件詳細信息：
在如上整個風機項目中技術核心同時也是難點的是對 3d 風機模型的交互操作實現上，在此我把 3d 風機模型單獨拿出來做講解，其完整風機交互效果如下動圖所示：
在如上的項目中使用的風機模型是通過 MAYA 和 MODO 建模制作而成，這兩個工具導出的 obj 和 mtl 文件，在 HT 編輯器中可以通過解析這兩個文件來生成 3d 場景中的風機部件模型，然后通過 HT 的 3d 編輯器場景搭建完成整體風機場景。
在開始操作之前先確認需求，從上面效果圖中分析可以看到主要有三個功能需求：
1、滾輪滾動時風機外殼透明化到隱藏再到顯示效果；
2、點擊風機內部部件時有對應的彈窗出現以及點擊彈窗隱藏；
3、風機葉片旋轉效果；
在明確所需要的交互功能需求后，我們就可以一步一步來實現它。
技能儲備
本 demo 需要掌握 HT for Web 的 2d 和 3d 相關 技術，具體技術參考資料可以去 HT for Web 官網圖撲軟件了解。
實現功能
1,滾輪滾動時風機外殼透明化到隱藏效果
由於該風機場景是由多個子模型拼裝形成,所以在加載場景時候存在子模型加載的異步問題,存在的異步問題會導致在獲取子模型並對其綁定事件時候發生錯誤,比如提示該子模型 undefined，所以要先解決這個問題。
ht.Default.handleModelLoaded = function (data) { //模型加載完成時回調 }
通過 handleModelLoaded 解決模型加載異步問題后，就可以在函數內針對模型進行事件綁定操作。
首先聲明一個數組，是三個模型的 tag 名，通過后面的 for 循環獲取這三個模型：
//風機三個外殼 var fanArr = ['風機_葉片', '風機_機箱外殼2', '風機_輪轂外殼'];
然后在 handleModelLoaded 方法的函數內對風機外殼模型進行操作：
for (var i = 0; i < fanArr.length; i++) { //滾輪控制拉遠拉近時風機部件透明化 if (data == 'models/機械設備/風力發電機/' + fanArr[i] + '.json') { var model = ht.Default.getShape3dModel('models/機械設備/風力發電機/' + fanArr[i] + '.json'); //通過tag標簽名獲取模型 var tags = g3d.dm().getDataByTag(fanArr[i]); //綁定滾輪事件 g3d.getView().addEventListener('mousewheel', function (e) { //獲取eye到center距離 //通過distance判斷顯示隱藏的滾輪距離 var distance = ht.Default.getDistance(g3d.getEye(), [0, 9500, 0]); if (distance < 2700 && distance > 2100) { //拉近機箱外殼透明化 tags.setStyle('shape3d.transparent', true); tags.setStyle('shape3d.opacity', 0.5); tags.setStyle('shape3d.visible', true); //拉遠隱藏顯示框 for (var j2 = 0; j2 < eightArr.length; j2++) { var textViews = g3d.dm().getDataByTag(eightArr[j2] + 'show'); textViews.setStyle('3d.visible', false); } } else if (distance > 2700) { //拉遠恢復原狀 tags.setStyle('shape3d.transparent', false); tags.setStyle('shape3d.opacity', 1); } else if (distance < 2100) { //拉近隱藏機箱外殼 tags.setStyle('shape3d.visible', false); } }) } }
如此就實現了第一個目標，成功實現滾輪滾動時風機外殼透明化到隱藏效果。
然后接着第二個目標。
2,點擊風機內部部件時有對應的彈窗出現
實現該效果無非就是兩步走，獲取部件模型,然后給模型綁定點擊事件（點擊顯示彈窗,點擊彈窗隱藏彈窗）
首先聲明一個部件數組：
//風機內部九大部件 var parts = ['風機_控制櫃', '風機_發電機', '風機_風冷裝置', '風機_制動聯結裝置', '風機_油冷裝置', '風機_齒輪箱', '風機_主軸', '風機_轉子齒輪', '風機_變槳系統'];
然后代碼實現,也是放在 handleModelLoaded 方法的函數內：
//九大部件與彈窗綁定點擊事件 g3d.mi(function (e) { //交互事件監聽器 //綁定點擊事件 if (e.kind === 'clickData') { for (var j = 0; j < parts.length; j++) { if (e.data.getTag() === parts[j]) { for (var j2 = 0; j2 < parts.length; j2++) { //通過tag標簽名獲取模型圖元 var textViews = g3d.dm().getDataByTag(eightArr[j2] + 'show'); textViews.setStyle('3d.visible', false); } //通過tag標簽名獲取彈窗圖元 var textView = g3d.dm().getDataByTag(eightArr[j] + 'show'); textView.setStyle('3d.visible', true); } //彈窗點擊事件 if (e.data.getTag() === parts[j] + 'show') { var textView2 = g3d.dm().getDataByTag(parts[j] + 'show'); textView2.setStyle('3d.visible', false); } } } })
在實現部件點擊顯示彈窗和點擊彈窗隱藏效果后，就差最后一步，完成風機葉片旋轉效果。
3,風機葉片旋轉效果
風機葉片旋轉原理非常簡單，本質就是控制 rotation 的參數，通過 startAnim 方法遞增參數值實現葉片旋轉動態效果。
還是老路子，先獲取風機葉片模型，然后再修改和賦予 rotation 參數值，代碼實現也是放在 handleModelLoaded 方法的函數內。
//風機葉片旋轉 if (data == 'models/機械設備/風力發電機/風機_輪轂外殼.json') { var rotation = ''; var deg = Math.PI / 180; var speed = 2; function animation() { //獲取風機模型 var modelWheel = g3d.dm().getDataByTag('風機_輪轂外殼'); ht.Default.startAnim({ duration: 5500, // 動畫周期毫秒數，默認采用 action: function (v, t) { rotation = [0, 0, deg * (speed--)]; modelWheel.setRotation3d(rotation); }, finishFunc: function () { //動畫結束后調用 animation(); } }) } animation(); }
4-完整代碼
完成三個功能需求后完整核心代碼如下所示：
//風機三個外殼 var fanArr = ['風機_葉片', '風機_機箱外殼2', '風機_輪轂外殼']; //風機內部九大部件 var parts = ['風機_控制櫃', '風機_發電機', '風機_風冷裝置', '風機_制動聯結裝置', '風機_油冷裝置', '風機_齒輪箱', '風機_主軸', '風機_轉子齒輪', '風機_變槳系統']; ht.Default.handleModelLoaded = function (data) { //模型加載完成的回調 for (var i = 0; i < fanArr.length; i++) { //滾輪控制拉遠拉近時風機部件透明化 if (data == 'models/機械設備/風力發電機/' + fanArr[i] + '.json') { var model = ht.Default.getShape3dModel('models/機械設備/風力發電機/' + fanArr[i] + '.json'); // console.log(model); var tags = g3d.dm().getDataByTag(fanArr[i]); g3d.getView().addEventListener('mousewheel', function (e) { //獲取eye到center距離 var distance = ht.Default.getDistance(g3d.getEye(), [0, 9500, 0]); if (distance < 2700 && distance > 2100) { //拉近機箱外殼透明化 tags.setStyle('shape3d.transparent', true); tags.setStyle('shape3d.opacity', 0.5); tags.setStyle('shape3d.visible', true); //拉遠隱藏顯示框 for (var j2 = 0; j2 < eightArr.length; j2++) { var textViews = g3d.dm().getDataByTag(eightArr[j2] + 'show'); textViews.setStyle('3d.visible', false); } } else if (distance > 2700) { //拉遠恢復原狀 tags.setStyle('shape3d.transparent', false); tags.setStyle('shape3d.opacity', 1); } else if (distance < 2100) { //拉近隱藏機箱外殼 tags.setStyle('shape3d.visible', false); } }) } } //九大部件與彈窗綁定點擊事件 g3d.mi(function (e) { //交互事件監聽器 if (e.kind === 'clickData') { for (var j = 0; j < parts.length; j++) { if (e.data.getTag() === parts[j]) { for (var j2 = 0; j2 < parts.length; j2++) { var textViews = g3d.dm().getDataByTag(eightArr[j2] + 'show'); textViews.setStyle('3d.visible', false); } var textView = g3d.dm().getDataByTag(eightArr[j] + 'show'); textView.setStyle('3d.visible', true); } //彈窗點擊事件 if (e.data.getTag() === eightArr[j] + 'show') { var textView2 = g3d.dm().getDataByTag(eightArr[j] + 'show'); textView2.setStyle('3d.visible', false); } } } }) //風機葉片旋轉 if (data == 'models/機械設備/風力發電機/風機_輪轂外殼.json') { var rotation = ''; var deg = Math.PI / 180; var speed = 2; function animation() { //獲取風機模型 var modelWheel = g3d.dm().getDataByTag('風機_輪轂外殼'); ht.Default.startAnim({ duration: 5500, // 動畫周期毫秒數，默認采用 action: function (v, t) { rotation = [0, 0, deg * (speed--)]; modelWheel.setRotation3d(rotation); }, finishFunc: function () { //動畫結束后調用 animation(); } }) } animation(); } }
結束語
這個風機 demo 功能的實現整體原理很簡單，萬變不離其宗，最終都是獲取對象然后綁定事件實現效果。再復雜的功能通過解析后發現最終也不過是一個又一個簡單小功能組合到一起最后實現大的功能。