基于 WebGL 的 HTML5 3D 棉花加工監控系統

前言

現在的棉花加工行業還停留在傳統的反應式維護模式當中，當棉花加下廠的裝置突然出現故障時，控制程式需要更換。這種情況下，首先需要客戶向裝置生産廠家請求派出技術人員進行維護，然後生産廠家才能根據情況再派人到現場進行處理。由于棉花加工裝置分布在中國各地乃至出口到世界各地，從客戶反應問題到廠家派人到達現場的時間周期就會很長，少則 一天，個别偏遠的地方可能會需要幾天，不同程度地影響到企業生産活動的繼續進行。傳統的反應式維護存在以下缺點：售後服務響應速度慢；維護成本高；生産效率低下；停車率高；管理成本高；無法應對合格工程師不足的情況。

遠端監控系統主要是通過分布于棉花加工生産線各種裝置的傳感器、開關信号、視訊監控裝置、 PLC 控制器等裝置，通過智能聯網裝置內建到網際網路和區域網路上面，實作對生産、營運情況的随時掌握，建立網絡範圍内的監控資料和網上知識資源庫，根據現場采集的裝置運作資料進行遠端診斷和線上維修。

http://www.hightopo.com/demo/Plucker/

代碼實作

建立場景

首先是建立一個三維場景（ https://hightopo.com/guide/guide/core/3d/ht-3d-guide.html ） ，通過将場景中的元素添加到儲存資料的資料容器（ http://www.hightopo.com/guide/guide/core/datamodel/ht-datamodel-guide.html ） 中即可：

var dm = new ht.DataModel(); // 資料容器
var g3d = new ht.graph3d.Graph3dView(dm); // 三維元件
g3d.addToDOM(); // 将三維元件添加到 body 體中
           

上面代碼中出現的 addToDOM 方法是将調用此方法的元件通過 getView 方法擷取到此元件的底層 div，随後将此 div 添加到 body 體中。HT 的元件一般都會嵌入 BorderPane、SplitView 和 TabView 等容器中使用，而最外層的HT元件則需要使用者手工将 getView() 傳回的底層 div 元素添加到頁面的 DOM 元素中，這裡需要注意的是，當父容器大小變化時，如果父容器是 BorderPane 和 SplitView 等這些HT預定義的容器元件，則HT的容器會自動遞歸調用孩子元件 invalidate 函數通知更新。但如果父容器是原生的 html 元素， 則 HT 元件無法獲知需要更新，是以最外層的 HT 元件一般需要監聽 window 的視窗大小變化事件，調用最外層元件 invalidate 函數進行更新。

為了最外層元件加載填充滿視窗的友善性，HT 的所有元件都有 addToDOM 函數，其實作邏輯如下，其中 iv 是 invalidate 的簡寫：

addToDOM = function(){
    var self = this,
        view = self.getView(), //擷取元件的底層 div
        style = view.style;
    document.body.appendChild(view); //将元件底層 div 添加進 body 中
    style.left = '0'; //ht 預設将所有的元件的 position 都設定為 absolute 絕對定位
    style.right = '0';
    style.top = '0';
    style.bottom = '0';
    window.addEventListener('resize', function () { self.iv(); }, false); //視窗大小改變事件，調用重新整理函數
}
           

整個大環境搭建好了後，我們需要向場景中添加 3D 模型，并進行位置的擺放，這裡采用的是将整個場景的模型以及模型的擺放放在一個 JSON 格式的檔案中，然後通過将這個 JSON 檔案反序列化到資料容器 DataModel 中，即可呈現 JSON 檔案中的場景内容以及模型的擺放位置：

ht.Default.xhrLoad('scenes/抓棉機.json', function(text) { // 加載 JSON 檔案
    dm.deserialize(text); // 将 JSON 反序列化到資料容器中
});
           

上面出現的 ht.Default.xhrLoad 方法是一個封裝好的異步加載檔案的函數，可以通過這種方法來加載 JSON 檔案，因為此方法為異步加載，是以如果要操作此函數反序列化後的資料容器中的元素，需要在此函數中進行後續的操作。

場景動畫

因為整個場景中的元素都是從此 JSON 檔案中反序列化出來的，此 JSON 檔案中儲存的隻有場景的内容，并不包括動畫以及互動，對于不同部分的元素的動畫也不同，我們需要單獨将這些元素取出來，這裡通過 dm.getDataByTag(tag) 方法實作(https://hightopo.com/guide/guide/core/datamodel/ht-datamodel-guide.html#ref_datamodel)，此方法通過 tag 唯一辨別來擷取節點的資訊：

var equipment = dm.getDataByTag('equipment'); // 擷取軋棉機的節點
var hand = dm.getDataByTag('hand'); // 擷取軋棉機“手”節點
var light = dm.getDataByTag('light'); // 擷取軋棉機頂部的訓示燈的節點
           

擷取到這些需要做動畫的節點後，這裡我用的是動畫插件 setAnimation (https://hightopo.com/guide/guide/plugin/animation/ht-animation-guide.html)方法來做的，動畫插件更進一步對動畫進行封裝，使用者隻需用描述性的說明 HT 即可自動實作動畫過程，動畫插件可以将圖元的一個或多個屬性值 (如 width、height、opacity 等)從一個值平滑的緩動至另一個值，同時提供了豐富的緩動方式用于實作各種效果。但是使用這個插件前得先引入 ht-animation.js 檔案：

<script src="ht.js"></script> <!--先引入ht.js-->
<script src="ht-animation.js"></script>
           

這裡總共有三個部分有動畫，采用的方法大緻相同，這裡僅對整個軋棉機的機身的左右移動的動畫進行說明。

equipment.setAnimation({ // 動畫調用方法
    moveDown: { // 定義了一個名為 moveDown 的動畫過程，這個動畫過程改變圖元的 x 軸坐标，将其從 623 變化至 -256
        from: 623, // 動畫開始時的屬性值
        to: -256, // 動畫結束時的屬性值
        interval: equipInterval, // 動畫間隔，機關ms
        next: ["moveUp"], // 字元串類型，指定目前動畫完成之後，要執行的下個動畫，可将多個動畫融合
        onUpdate: function(value) { // 回調函數，動畫的每一幀都會回調此函數
            this.setX(value); // 設定該節點的 x 軸的值為目前動畫 from 到 to 的值
            formPane.getItemById('xValue').element = value.toFixed(2); // 擷取 form 表單上的 xValue 元素，同時改變此值
            formPane.iv(); // 表單内容變化後要通知表單進行重新整理變化
        }
    },
    moveUp: { // 定義了一個名為 moveUp 的動畫過程，這個動畫過程改變圖元的 x 軸坐标，将其從 -256 變化至 623
        from: -256,
        to: 623,
        interval: equipInterval,
        next: ["moveDown"],
        onUpdate: function(value) {
            this.setX(value);
            formPane.getItemById('xValue').element = value.toFixed(2);
            formPane.iv();
        }
    },
    start: ['moveDown'] // start是一個數組，用于指定要啟動的一個或多個動畫
});
           

注意，要使用動畫，首先您需要調用 ht.DataModel#enableAnimation(interval) 啟動全局動畫定時器，預設 interval 為 16ms，如果不設定此參數值，則 DataModel 定時器每隔 16ms 左右就會周遊自己所有的 Data，根據 Data 的 animation 配置執行動畫。

表單建立

前面代碼中出現的 form 表單(https://hightopo.com/guide/guide/plugin/form/ht-form-guide.html)，是通過 createForm 方法建立的，此方法定義如下（PS：由于 form 表單的清單稍長，這裡就選取幾個比較有代表性的表單元素進行說明）：

// 建立 form 表單
function createForm() {
    var fp = new ht.widget.FormPane(); // 建立表單元件執行個體
    fp.setWidth(200); // 設定表單元件的寬度
    fp.setHeight(250); // 設定表單元件的高度
    fp.getView().style.top = '8%'; // 設定表單元件的樣式
    fp.getView().style.right = 0;
    fp.getView().style.background = 'rgba(255, 255, 255, 0.3)';
    document.body.appendChild(fp.getView()); // 将表單元件的底層 div 添加到 body 體中

    var equipment = dm.getDataByTag('equipment'); // 通過 tag 唯一辨別擷取元素
    var hand = dm.getDataByTag('hand');

    fp.setLabelAlign('right'); // 設定表單的文本對齊方式
    
    fp.addRow([ // 向表單中添加一行  此方法的參數一為元素數組，可在一行中添加多個元素
        { // 元素一  顯示文本内容為 “機器号”
            element: '機器号',
            color: '#fff'
        },
        { // 元素二 顯示文本内容為 “Machine”
            element: 'Machine',
            color: '#fff'
        }
    ], [0.1, 0.1]); // 參數二為每個元素寬度資訊數組，寬度值大于1代表固定絕對值，小于等于1代表相對值，也可為80+0.3的組合

    fp.addRow([ // 向表單中添加一行  此方法的參數為一個數組，可在一行中添加多個元素
        { // 元素一  顯示文本内容為 “機器号”
            element: '抓棉機動畫',
            color: '#fff'
        },
        { // 元素二  顯示文本内容為 一個按鈕元素
            button: {
                label: '開始',
                onClicked: function() { // 按鈕點選觸發事件，啟動軋棉機左右移動動畫
                    dm.enableAnimation(); // 啟動全局動畫定時器

                    var light = dm.getDataByTag('light');
                    if (!light) return;
                    lightColor(light);
                    colorTimer = setInterval(function() {
                        lightColor(light);
                    }, 1000);
                }
            }
        },
        {
            button: {
                label: '停止',
                onClicked: function() { // 按鈕點選觸發事件，關閉軋棉機左右移動動畫
                    dm.disableAnimation(); // 停止全局動畫定時器

                    clearInterval(colorTimer);
                    var light = dm.getDataByTag('light');
                    if (light) light.s('all.color', 'rgba(0,0,255,0.51)');
                }
            }
        }
    ], [0.2, 0.1, 0.1]); // 将一行中的三個元素都配置設定寬度進行顯示

    fp.addRow([ // 向表單中添加一行  此方法的參數為一個數組，可在一行中添加多個元素
        { // 元素一 顯示文本内容為“小車行走速度”
            element: '小車行走速度',
            color: '#fff'
        },
        { // 元素二  顯示文本内容為一個 滑動條
            id: 'slide',
            slider: { // 滑動條
                value: equipInterval, // slider 目前值
                min: 0, // slider 最小值
                max: 300, // slider 最大值
                step: 20, // slider 每移動一步的值
                onValueChanged: function() { // slider 值變化觸發事件
                    var anim = dm.getDataAnimation(equipment); // 獲得參數data的動畫配置
                    anim.moveDown.interval = this.getValue(); // 設定 moveDown 動畫的 interval 内容
                    anim.moveUp.interval = this.getValue(); // 設定 moveUp 動畫的 interval 内容
                }
            }
        }
    ], [0.1, 0.1]);

    fp.addRow([ // 向表單中添加一行  此方法的參數為一個數組，可在一行中添加多個元素
        {
            element: 'X 軸',
            color: '#fff'
        },
        {
            id: 'xValue',
            element: equipment.getX().toFixed(2), // 擷取軋棉機目前 x 軸值
            color: '#fff'
        }
    ], [0.1, 0.1]);

    return fp;
}
           

有趣的部分就說這麼多，如果有什麼建議和意見，歡迎留言或者私信~或者上官網查閱相關資料（https://hightopo.com/）

總結

以前對 animation 動畫用的比較少，這次也是特地用它仔細研究一下 animation 的機制，就 animation 設定的動畫能夠以一種“平和”的方式進行值的變化，動畫也看起來比較有條理一些；當然還有能夠設定下一次動畫需要做什麼的操作，這個設計也非常的人性化；同時還能通過 getDataAnimation 擷取對象的動畫配置，并通過此方法對對象的動畫進行重新配置，這些優點都是值得拿出來跟大家分享的。