前言

在目前大數(shù)據(jù)時(shí)代背景之下，數(shù)據(jù)可視化的需求也變得越來(lái)越龐大,在數(shù)據(jù)可視化的背景之下，通過(guò)智能機(jī)器間的鏈接并最終將人機(jī)鏈接,結(jié)合軟件和大數(shù)據(jù)分析的工業(yè)互聯(lián)網(wǎng)也將變得越來(lái)越容易實(shí)現(xiàn)!

國(guó)家也敏銳意識(shí)到時(shí)代特性并及時(shí)把握時(shí)機(jī)，培育新的經(jīng)濟(jì)增長(zhǎng)點(diǎn)，推動(dòng)“中國(guó)制造”升級(jí),實(shí)現(xiàn)工業(yè)大國(guó)到工業(yè)強(qiáng)國(guó)的質(zhì)變，而諸多的業(yè)內(nèi)人士也正在努力完成對(duì)自己的“升級(jí)”與“改造”，而大數(shù)據(jù)的數(shù)據(jù)可視化與工業(yè)的結(jié)合，實(shí)現(xiàn)了工控的可視化，大大地提高工控管理效率，風(fēng)險(xiǎn)把控能力，產(chǎn)業(yè)流程有效監(jiān)督等等。

如今得益于基于 HTML5 WebGL 的出現(xiàn)，從技術(shù)上實(shí)現(xiàn)工控?cái)?shù)字化管理模式變得簡(jiǎn)單易行，核心提高對(duì)工控設(shè)備信息的可視化與管理效率，可以實(shí)時(shí)掌握設(shè)備每個(gè)參數(shù)的狀態(tài)，對(duì)資源的實(shí)時(shí)管理，對(duì)整體運(yùn)行穩(wěn)定性風(fēng)險(xiǎn)度有極高的可控性。

如下所示，便是一個(gè)基于 HTML5 WebGL 的 3D 風(fēng)機(jī) Web 組態(tài)工業(yè)互聯(lián)網(wǎng)應(yīng)用中的風(fēng)機(jī)項(xiàng)目：

此項(xiàng)目鏈接：基于 HTML5 WebGL 的 3D 風(fēng)機(jī) Web 組態(tài)工業(yè)互聯(lián)網(wǎng)應(yīng)用（http://www.hightopo.com/demo/FanDevice/）

從上面設(shè)計(jì)圖中可以看到頁(yè)面布局主要四部分組成：table 表格，表盤，echarts 圖表，3d 風(fēng)機(jī)模型。

在這個(gè)頁(yè)面中非常具體而又全面的展示了風(fēng)機(jī)設(shè)備的相關(guān)設(shè)備信息，比如風(fēng)機(jī)設(shè)備名稱，風(fēng)機(jī)參數(shù)，發(fā)電量數(shù)據(jù)，機(jī)艙溫度以及功率風(fēng)速折線圖表等等，這對(duì)于管理員而言是一種享受！

在 3d 風(fēng)機(jī)模型出可以對(duì)風(fēng)機(jī)進(jìn)行拉近拉遠(yuǎn)等交互，實(shí)現(xiàn)風(fēng)機(jī)外殼透明化、隱藏、顯示效果，如圖所示：

在拉近風(fēng)機(jī)隱藏風(fēng)機(jī)外殼顯示內(nèi)部部件時(shí)候可以點(diǎn)擊部件獲取點(diǎn)擊部件詳細(xì)信息：

在如上整個(gè)風(fēng)機(jī)項(xiàng)目中技術(shù)核心同時(shí)也是難點(diǎn)的是對(duì) 3d 風(fēng)機(jī)模型的交互操作實(shí)現(xiàn)上，在此我把 3d 風(fēng)機(jī)模型單獨(dú)拿出來(lái)做講解，其完整風(fēng)機(jī)交互效果如下動(dòng)圖所示：

在如上的項(xiàng)目中使用的風(fēng)機(jī)模型是通過(guò) MAYA 和 MODO 建模制作而成，這兩個(gè)工具導(dǎo)出的 obj 和 mtl 文件。

在開(kāi)始操作之前先確認(rèn)需求，從上面效果圖中分析可以看到主要有三個(gè)功能需求：

1、滾輪滾動(dòng)時(shí)風(fēng)機(jī)外殼透明化到隱藏再到顯示效果；

2、點(diǎn)擊風(fēng)機(jī)內(nèi)部部件時(shí)有對(duì)應(yīng)的彈窗出現(xiàn)以及點(diǎn)擊彈窗隱藏；

3、風(fēng)機(jī)葉片旋轉(zhuǎn)效果；

在明確所需要的交互功能需求后，我們就可以一步一步來(lái)實(shí)現(xiàn)它。

實(shí)現(xiàn)功能

1,滾輪滾動(dòng)時(shí)風(fēng)機(jī)外殼透明化到隱藏效果

由于該風(fēng)機(jī)場(chǎng)景是由多個(gè)子模型拼裝形成,所以在加載場(chǎng)景時(shí)候存在子模型加載的異步問(wèn)題,存在的異步問(wèn)題會(huì)導(dǎo)致在獲取子模型并對(duì)其綁定事件時(shí)候發(fā)生錯(cuò)誤,比如提示該子模型 undefined，所以要先解決這個(gè)問(wèn)題。

ht.Default.handleModelLoaded = function (data) {//模型加載完成時(shí)回調(diào) }

通過(guò) handleModelLoaded 解決模型加載異步問(wèn)題后，就可以在函數(shù)內(nèi)針對(duì)模型進(jìn)行事件綁定操作。

首先聲明一個(gè)數(shù)組，是三個(gè)模型的 tag 名，通過(guò)后面的 for 循環(huán)獲取這三個(gè)模型：

//風(fēng)機(jī)三個(gè)外殼 var fanArr = ['風(fēng)機(jī)_葉片', '風(fēng)機(jī)_機(jī)箱外殼2', '風(fēng)機(jī)_輪轂外殼'];

然后在 handleModelLoaded 方法的函數(shù)內(nèi)對(duì)風(fēng)機(jī)外殼模型進(jìn)行操作：

for (var i = 0; i < fanArr.length; i++) { //滾輪控制拉遠(yuǎn)拉近時(shí)風(fēng)機(jī)部件透明化if (data == 'models/機(jī)械設(shè)備/風(fēng)力發(fā)電機(jī)/' + fanArr[i] + '.json') {var model = ht.Default.getShape3dModel('models/機(jī)械設(shè)備/風(fēng)力發(fā)電機(jī)/' + fanArr[i] + '.json');//通過(guò)tag標(biāo)簽名獲取模型var tags = g3d.dm().getDataByTag(fanArr[i]);//綁定滾輪事件g3d.getView().addEventListener('mousewheel', function (e) {//獲取eye到center距離//通過(guò)distance判斷顯示隱藏的滾輪距離var distance = ht.Default.getDistance(g3d.getEye(), [0, 9500, 0]);if (distance < 2700 && distance > 2100) {//拉近機(jī)箱外殼透明化tags.setStyle('shape3d.transparent', true);tags.setStyle('shape3d.opacity', 0.5);tags.setStyle('shape3d.visible', true);//拉遠(yuǎn)隱藏顯示框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) {//拉遠(yuǎn)恢復(fù)原狀tags.setStyle('shape3d.transparent', false);tags.setStyle('shape3d.opacity', 1);}else if (distance < 2100) {//拉近隱藏機(jī)箱外殼tags.setStyle('shape3d.visible', false);}})} }

如此就實(shí)現(xiàn)了第一個(gè)目標(biāo)，成功實(shí)現(xiàn)滾輪滾動(dòng)時(shí)風(fēng)機(jī)外殼透明化到隱藏效果。

然后接著第二個(gè)目標(biāo)。

2,點(diǎn)擊風(fēng)機(jī)內(nèi)部部件時(shí)有對(duì)應(yīng)的彈窗出現(xiàn)

實(shí)現(xiàn)該效果無(wú)非就是兩步走，獲取部件模型,然后給模型綁定點(diǎn)擊事件（點(diǎn)擊顯示彈窗,點(diǎn)擊彈窗隱藏彈窗）

首先聲明一個(gè)部件數(shù)組：

//風(fēng)機(jī)內(nèi)部九大部件 var parts = ['風(fēng)機(jī)_控制柜', '風(fēng)機(jī)_發(fā)電機(jī)', '風(fēng)機(jī)_風(fēng)冷裝置', '風(fēng)機(jī)_制動(dòng)聯(lián)結(jié)裝置', '風(fēng)機(jī)_油冷裝置', '風(fēng)機(jī)_齒輪箱', '風(fēng)機(jī)_主軸', '風(fēng)機(jī)_轉(zhuǎn)子齒輪', '風(fēng)機(jī)_變槳系統(tǒng)'];

然后代碼實(shí)現(xiàn),也是放在 handleModelLoaded 方法的函數(shù)內(nèi)：

//九大部件與彈窗綁定點(diǎn)擊事件 g3d.mi(function (e) { //交互事件監(jiān)聽(tīng)器//綁定點(diǎn)擊事件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++) {//通過(guò)tag標(biāo)簽名獲取模型圖元var textViews = g3d.dm().getDataByTag(eightArr[j2] + 'show');textViews.setStyle('3d.visible', false);}//通過(guò)tag標(biāo)簽名獲取彈窗圖元var textView = g3d.dm().getDataByTag(eightArr[j] + 'show');textView.setStyle('3d.visible', true);}//彈窗點(diǎn)擊事件if (e.data.getTag() === parts[j] + 'show') {var textView2 = g3d.dm().getDataByTag(parts[j] + 'show');textView2.setStyle('3d.visible', false);}}} })

在實(shí)現(xiàn)部件點(diǎn)擊顯示彈窗和點(diǎn)擊彈窗隱藏效果后，就差最后一步，完成風(fēng)機(jī)葉片旋轉(zhuǎn)效果。

3,風(fēng)機(jī)葉片旋轉(zhuǎn)效果

風(fēng)機(jī)葉片旋轉(zhuǎn)原理非常簡(jiǎn)單，本質(zhì)就是控制 rotation 的參數(shù)，通過(guò) startAnim 方法遞增參數(shù)值實(shí)現(xiàn)葉片旋轉(zhuǎn)動(dòng)態(tài)效果。

還是老路子，先獲取風(fēng)機(jī)葉片模型，然后再修改和賦予 rotation 參數(shù)值，代碼實(shí)現(xiàn)也是放在 handleModelLoaded 方法的函數(shù)內(nèi)。

//風(fēng)機(jī)葉片旋轉(zhuǎn) if (data == 'models/機(jī)械設(shè)備/風(fēng)力發(fā)電機(jī)/風(fēng)機(jī)_輪轂外殼.json') {var rotation = '';var deg = Math.PI / 180;var speed = 2;function animation() {//獲取風(fēng)機(jī)模型var modelWheel = g3d.dm().getDataByTag('風(fēng)機(jī)_輪轂外殼');ht.Default.startAnim({duration: 5500, // 動(dòng)畫周期毫秒數(shù)，默認(rèn)采用action: function (v, t) {rotation = [0, 0, deg * (speed--)];modelWheel.setRotation3d(rotation);},finishFunc: function () { //動(dòng)畫結(jié)束后調(diào)用animation();}})}animation(); }

4,完整代碼

完成三個(gè)功能需求后完整核心代碼如下所示：

//風(fēng)機(jī)三個(gè)外殼 var fanArr = ['風(fēng)機(jī)_葉片', '風(fēng)機(jī)_機(jī)箱外殼2', '風(fēng)機(jī)_輪轂外殼']; //風(fēng)機(jī)內(nèi)部九大部件 var parts = ['風(fēng)機(jī)_控制柜', '風(fēng)機(jī)_發(fā)電機(jī)', '風(fēng)機(jī)_風(fēng)冷裝置', '風(fēng)機(jī)_制動(dòng)聯(lián)結(jié)裝置', '風(fēng)機(jī)_油冷裝置', '風(fēng)機(jī)_齒輪箱', '風(fēng)機(jī)_主軸', '風(fēng)機(jī)_轉(zhuǎn)子齒輪', '風(fēng)機(jī)_變槳系統(tǒng)']; ht.Default.handleModelLoaded = function (data) {//模型加載完成的回調(diào)for (var i = 0; i < fanArr.length; i++) { //滾輪控制拉遠(yuǎn)拉近時(shí)風(fēng)機(jī)部件透明化if (data == 'models/機(jī)械設(shè)備/風(fēng)力發(fā)電機(jī)/' + fanArr[i] + '.json') {var model = ht.Default.getShape3dModel('models/機(jī)械設(shè)備/風(fēng)力發(fā)電機(jī)/' + 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) {//拉近機(jī)箱外殼透明化tags.setStyle('shape3d.transparent', true);tags.setStyle('shape3d.opacity', 0.5);tags.setStyle('shape3d.visible', true);//拉遠(yuǎn)隱藏顯示框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) {//拉遠(yuǎn)恢復(fù)原狀tags.setStyle('shape3d.transparent', false);tags.setStyle('shape3d.opacity', 1);}else if (distance < 2100) {//拉近隱藏機(jī)箱外殼tags.setStyle('shape3d.visible', false);}})}}//九大部件與彈窗綁定點(diǎn)擊事件g3d.mi(function (e) { //交互事件監(jiān)聽(tīng)器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);}//彈窗點(diǎn)擊事件if (e.data.getTag() === eightArr[j] + 'show') {var textView2 = g3d.dm().getDataByTag(eightArr[j] + 'show');textView2.setStyle('3d.visible', false);}}}})//風(fēng)機(jī)葉片旋轉(zhuǎn)if (data == 'models/機(jī)械設(shè)備/風(fēng)力發(fā)電機(jī)/風(fēng)機(jī)_輪轂外殼.json') {var rotation = '';var deg = Math.PI / 180;var speed = 2;function animation() {//獲取風(fēng)機(jī)模型var modelWheel = g3d.dm().getDataByTag('風(fēng)機(jī)_輪轂外殼');ht.Default.startAnim({duration: 5500, // 動(dòng)畫周期毫秒數(shù)，默認(rèn)采用action: function (v, t) {rotation = [0, 0, deg * (speed--)];modelWheel.setRotation3d(rotation);},finishFunc: function () { //動(dòng)畫結(jié)束后調(diào)用animation();}})}animation();} }

結(jié)束語(yǔ)

這個(gè)風(fēng)機(jī) demo 功能的實(shí)現(xiàn)整體原理很簡(jiǎn)單，萬(wàn)變不離其宗，最終都是獲取對(duì)象然后綁定事件實(shí)現(xiàn)效果。再?gòu)?fù)雜的功能通過(guò)解析后發(fā)現(xiàn)最終也不過(guò)是一個(gè)又一個(gè)簡(jiǎn)單小功能組合到一起最后實(shí)現(xiàn)大的功能。

所以在學(xué)習(xí)過(guò)程中基礎(chǔ)最重要，再大的項(xiàng)目解析到最小也還是要通過(guò)基礎(chǔ)代碼一步一步實(shí)現(xiàn)。

總結(jié)

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

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