基於 HTML5 WebGL 的 3D 風機 Web 組態工業互聯網應用

時間  2019-11-20
標籤 基於 html5 html webgl 3d 風機 web 工業 互聯網 應用 欄目 HTML5 简体版
原文   原文鏈接

基於 HTML5 WebGL 的 3D 風機 Web 組態工業互聯網應用

前言

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

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

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

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

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

從上面設計圖中能夠看到頁面佈局主要四部分組成：table 表格，錶盤，echarts 圖表，3d 風機模型。編輯器

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

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

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

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

在如上的項目中使用的風機模型是經過 MAYA 和 MODO 建模製做而成，這兩個工具導出的 obj 和 mtl 文件，在 HT 編輯器中能夠經過解析這兩個文件來生成 3d 場景中的風機部件模型，而後經過 HT 的 3d 編輯器場景搭建完成總體風機場景。

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

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

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

三、風機葉片旋轉效果；

在明確所須要的交互功能需求後，咱們就能夠一步一步來實現它。

技能儲備

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

因此在學習過程當中基礎最重要，再大的項目解析到最小也仍是要經過基礎代碼一步一步實現。

相關文章
相關標籤/搜索
每日一句
    每一个你不满意的现在，都有一个你没有努力的曾经。
本站公眾號
   歡迎關注本站公眾號,獲取更多信息
聯繫我們 最近搜索 最新文章 沪ICP备13005482号-10 MyBatis教程 SQL 教程 MySQL教程 Java 教程 Thymeleaf 教程 Hibernate教程 Spring教程 Redis教程