前言

在目前大數據時代背景之下，數據可視化的需求也變得越來越龐大,在數據可視化的背景之下，通過智能機器間的鏈接并最終將人機鏈接,結合軟件和大數據分析的工業互聯網也將變得越來越容易實現!

國家也敏銳意識到時代特性并及時把握時機，培育新的經濟增長點，推動“中國制造”升級,實現工業大國到工業強國的質變，而諸多的業內人士也正在努力完成對自己的“升級”與“改造”，而大數據的數據可視化與工業的結合，實現了工控的可視化，大大地提高工控管理效率，風險把控能力，產業流程有效監督等等。

如今得益于基于 HTML5 WebGL 的出現，從技術上實現工控數字化管理模式變得簡單易行，核心提高對工控設備信息的可視化與管理效率，可以實時掌握設備每個參數的狀態，對資源的實時管理，對整體運行穩定性風險度有極高的可控性。

如下所示，便是一個基于 HTML5 WebGL 的 3D 風機 Web 組態工業互聯網應用中的風機項目：

此項目鏈接：基于 HTML5 WebGL 的 3D 風機 Web 組態工業互聯網應用（http://www.hightopo.com/demo/FanDevice/）

從上面設計圖中可以看到頁面布局主要四部分組成：table 表格，表盤，echarts 圖表，3d 風機模型。

在這個頁面中非常具體而又全面的展示了風機設備的相關設備信息，比如風機設備名稱，風機參數，發電量數據，機艙溫度以及功率風速折線圖表等等，這對于管理員而言是一種享受！

在 3d 風機模型出可以對風機進行拉近拉遠等交互，實現風機外殼透明化、隱藏、顯示效果，如圖所示：

在拉近風機隱藏風機外殼顯示內部部件時候可以點擊部件獲取點擊部件詳細信息：

在如上整個風機項目中技術核心同時也是難點的是對 3d 風機模型的交互操作實現上，在此我把 3d 風機模型單獨拿出來做講解，其完整風機交互效果如下動圖所示：

在如上的項目中使用的風機模型是通過 MAYA 和 MODO 建模制作而成，這兩個工具導出的 obj 和 mtl 文件。

在開始操作之前先確認需求，從上面效果圖中分析可以看到主要有三個功能需求：

1、滾輪滾動時風機外殼透明化到隱藏再到顯示效果；

2、點擊風機內部部件時有對應的彈窗出現以及點擊彈窗隱藏；

3、風機葉片旋轉效果；

在明確所需要的交互功能需求后，我們就可以一步一步來實現它。

實現功能

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 功能的實現整體原理很簡單，萬變不離其宗，最終都是獲取對象然后綁定事件實現效果。再復雜的功能通過解析后發現最終也不過是一個又一個簡單小功能組合到一起最后實現大的功能。

所以在學習過程中基礎最重要，再大的項目解析到最小也還是要通過基礎代碼一步一步實現。

總結

以上是生活随笔為你收集整理的c#web页面显示弹窗_基于 HTML5 WebGL 的 3D 风机 Web 组态工业互联网应用的全部內容，希望文章能夠幫你解決所遇到的問題。

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