基於 WebGL 的 HTML5 3D SCADA 主站系統

前言

這個例子的初衷是模擬服務器與客戶端的通訊，我把整個需求簡化變成了今天的這個例子。3D 的模擬通常須要鷹眼來輔助的，這樣找產品以及整個空間的歸納會比較明確，在這個例子中我也加了，這篇文章算是我對此次項目的一個總結吧。

例子連接： www.hightopo.com/demo/3DEdge…

本文動圖：

代碼實現

進入正題，整個例子僅僅是用了兩百多行代碼來實現，這就是我喜歡用 HT 的緣由，可以進行快速開發。如今 Web3D 技術興起，大致就是分爲兩派：插件派和 HTML5 派。HT 就是基於 HTML5 的，不須要安裝任何插件，啊，跑題了。。。

場景搭建

首先，仍是從場景的搭建開始，這個界面是在 body 體上添加了三個部分：3D 組件，表單組件以及拓撲組件（2D 組件）。添加的方式是這樣的：爲了最外層組件加載填充滿窗口的方便性，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); // 當窗口大小變化時觸發事件，調用 iv 函數，刷新頁面 
}
複製代碼

HT 的組件通常都會嵌入 BorderPane、SplitView 和 TabView 等容器中使用，而最外層的HT組件則須要用戶手工將 getView()返回的底層 div 元素添加到頁面的 DOM 元素中，這裏須要注意的是，當父容器大小變化時，若是父容器是 BorderPane 和 SplitView 等這些 HT 預約義的容器組件，則 HT 的容器會自動遞歸調用孩子組件 invalidate 函數通知更新。但若是父容器是原生的 html 元素， 則 HT 組件沒法獲知須要更新，所以最外層的 HT 組件通常須要監聽 window的窗口大小變化事件，調用最外層組件 invalidate 函數進行更新。

由於這個函數是將 style 中的位置都固定了，因此不能將全部的組件都用這個函數，咱們按照這個函數的方式將拓撲組件和屬性組件添加進界面中，3D 組件直接利用 addToDOM 函數便可：

dm = new ht.DataModel();
g3d = new ht.graph3d.Graph3dView(dm); // 3d 組件
g3d.addToDOM(); // 將組件添加進 body 體中
g3d.setDashDisabled(false); // 開啓虛線流動
g3d.setMovableFunc(function(){ // 重載移動函數
    return false; // 返回false，全部的圖元都不可移動
});
g3d.setEye([-813, 718, 1530]); // 設置 eye 
g3d.setCenter([140, -25, 217]); // 設置 center（target）
gv = new ht.graph.GraphView(dm); // 2D 組件
gv.getView().className = 'graphview'; // HT 組件根層都是一個 div，經過 getView() 函數獲取
document.body.appendChild(gv.getView()); // 將拓撲組件添加進 body 體中
gv.fitContent(true); // 縮放平移整個拓撲以展現全部的圖元
var form = new ht.widget.FormPane(); // 表單面板組件
var view = form.getView(); // 獲取表單底層div
document.body.appendChild(view); // 將表單組件的底層div添加進body中
form.setWidth(200); // 設置表單面板的寬度
form.setHeight(140);
view.style.top = '5px'; // 設置表單面板底層div位置
view.style.right = '5px';
view.style.background = 'rgba(255, 255, 255, 0.2)';
複製代碼

拓撲組件和屬性組件的樣式我就再也不贅述了，只是設置了一個背景顏色以及 left right top bottom 位置而已。這裏要聲明一下，HT 組件通常都以設置 position 爲 absolute 的絕對定位方式。

添加鷹眼

你們可能會好奇，這個鷹眼怎麼生成的？在 HT 中，只要 2D 和 3D 共用同一個數據容器 dataModel 便可共同擁有全部在這個 dataModel 中的元素，而且位置都是對應的，只須要相似這種作法便可：

dm = new ht.DataModel();
g3d = new ht.graph3d.Graph3dView(dm);
gv = new ht.graph.GraphView(dm);
複製代碼

是否是很是簡單。。。能夠省去大把時間開發。。。

這個例子中除了連線以外的全部元素都是 ht.Node 類型的節點，因此咱們將這個節點的建立方法封裝一下，好重複利用：

function createNode(p3, s3, name, shape){ // 建立節點
    var node = new ht.Node(); // 建立類型爲 ht.Node 類的節點
    dm.add(node); // 將節點添加進數據容器 dataModel 中
    node.s({ // 設置節點的樣式，s 爲 setStyle 的簡寫
        'shape3d': shape, // 指定節點的形體，這邊是傳入 3d 模型的 json 文件
        'label.position': 23, // 文字顯示位置
        'label.transparent': true, // 文字在 3d 下是否透明 可消除字體周圍的鋸齒
        'label.color': '#eee', // 文字顏色
        'label.t3': [0, 0, -151], // 文字在 3d 下的偏移
        'label.r3': [0, Math.PI, 0], // 文字在 3d 下的旋轉
        'label.scale': 2 // 文字縮放
    });
    node.r3(0, Math.PI, 0); // 節點旋轉
    node.p3(p3); // 設置節點在 3d 下的位置
    node.s3(s3); // 設置節點在 3d 下的大小
    node.setName(name); // 設置節點的顯示名稱
    return node; // 返回節點
}
複製代碼

以及連線的建立：

function createEdge(exchange, service){ // 建立連線
    var edge = new ht.Edge(exchange, service);
    dm.add(edge);
    edge.s({
        'edge.width': 4, // 連線寬度
        'edge.color': 'red', // 連線顏色
        'edge.dash': true, // 是否顯示虛線
        'edge.dash.color': 'yellow', // 虛線顏色
        'edge.dash.pattern': [32, 32], // 連線虛線樣式默認爲[16, 16]
    });
    edge.a({ // 用戶自定義屬性 爲 setAttr 的縮寫
        'flow.enable': true, // 是否啓用流動
        'flow.direction': 1, // 方向
        'flow.step': 4 // 步進
    });
    return edge;
}
複製代碼

咱們界面中的顯示的連線都是虛線流動的，HT 默認是關閉虛線流動的功能的，經過下面這句來開啓虛線流動的功能：

g3d.setDashDisabled(false); // 開啓虛線流動
複製代碼

同時咱們還須要設置動畫，控制時間間隔，使得連線虛線偏移，造成一種「流動」的狀態，動畫請參考 schedule 調度手冊：

flowTask = {
    interval: 40,
    action: function(data){
        if(data.a('flow.enable')){
            data.s('edge.dash.offset', data.s('edge.dash.offset')+(data.a('flow.step')*data.a('flow.direction')));
        }
    }
};
dm.addScheduleTask(flowTask); // 添加 flowTask 動畫
複製代碼

如下是界面上出現的全部的服務器以及客戶端的節點的聲明，都是基於 createNode 和 createEdge 函數建立的：

function initModel(){
    floor = createNode([0, 5, 0], [1000, 10, 500]); // 地板圖元
    floor.s({
        'all.color': 'rgb(47, 79, 79)',
        '3d.selectable': false,
    });

    exchange = createNode([0, 300, -400], [200, 20, 150], 'H3C 核心交換機', 'models/機房/機櫃相關/機櫃設備6.json', 'symbols/機房/機櫃組件1.json').s('label.t3', [0, 0, -151]); // 交換機

    // 五臺不一樣做用的服務器
    service1 = createNode([-400, 140, 0], [100, 260, 100], '備用', 'models/機房/機櫃相關/機櫃2.json', 'symbols/機房/電阻櫃.json');
    service2 = createNode([-200, 140, 0], [100, 260, 100], '網站', 'models/機房/機櫃相關/機櫃2.json', 'symbols/機房/電阻櫃.json');
    service3 = createNode([0, 140, 0], [100, 260, 100], 'OA', 'models/機房/機櫃相關/機櫃2.json', 'symbols/機房/電阻櫃.json');
    service4 = createNode([200, 140, 0], [100, 260, 100], '廣告', 'models/機房/機櫃相關/機櫃2.json', 'symbols/機房/電阻櫃.json');
    service5 = createNode([400, 140, 0], [100, 260, 100], '受理', 'models/機房/機櫃相關/機櫃2.json', 'symbols/機房/電阻櫃.json');
    var arr = [service1, service2, service3, service4, service5];
    for(var i = 0; i < arr.length; i++){ // 建立 node 節點的時候設置了一個旋轉還有字體的旋轉以及位置，都是針對「設備」的
        var service = arr[i];
        service.r3(0, 0, 0);
        service.s({
            'label.r3': [0, 0, 0],
            'label.t3': [0, 30, 50],
        });
    }
                
    // 建立交換機與服務器之間的連線
    createEdge(exchange, service1);
    createEdge(exchange, service2);
    createEdge(exchange, service3);
    createEdge(exchange, service4);
    createEdge(exchange, service5);
    // 第二臺交換機
    exchange2 = createNode([-100, 60, 400], [200, 20, 150], 'Procurve Switch 2010-23 交換機', 'models/機房/機櫃相關/機櫃設備6.json', 'symbols/機房/機櫃組件1.json').s('label.t3', [0, 0, -151]);
    // 剩下建立的節點部分重複的太多，我就不貼代碼了
}
複製代碼

最後，在 form 表單中操做「連線」 edge 的流動、流動方向、流動步進、連線顏色以及虛線顏色。咱們在 form 表單中將這些須要操做的屬性添加進去，總共 5 個屬性，包括我經過 setAttr（簡寫爲 a）自定義的屬性 flow.direction、flow.step 和樣式屬性 edge.color 以及 edge.dash.color 還有就是直接操做動畫的開關 enabled 屬性來控制連線的流動。咱們經過 name 屬性結合 accessType 屬性實現對 Data 節點的存取：

function createForm(){
    var form = new ht.widget.FormPane(); // 表單面板組件
    var view = form.getView(); // 獲取表單底層 div
    document.body.appendChild(view); // 將表單組件的底層 div 添加進 body 中
    form.setWidth(200); // 設置表單面板的寬度
    form.setHeight(140);
    view.style.top = '5px'; // 設置表單面板底層 div 位置
    view.style.right = '5px';
    view.style.background = 'rgba(255, 255, 255, 0.2)';
    form.setLabelColor('#fff'); // 設置表單面板中文字顏色
   
    form.addRow([ // 經過這個函數向表單面板添加一行組件
        'Enable Flow', // 用於存取屬性名的顯示文本值，若爲空則顯示 name 屬性值
        {
            checkBox: { // 複選框，設置了該屬性後HT將根據屬性值自動構建 ht.widget.CheckBox 對象，並保存在 element 屬性上
                value: true,
                onValueChanged: function(){ // 值變化後調用函數
                    flowTask.enabled = this.getValue();
                }
            }           
        }
    , [0.1, 0.1]);
    form.addRow([
        {
            name: 'flow.direction',
            accessType: 'attr',
            element: 'Flow Direction',
        },
        {
            comboBox: {
                value: 1,
                labels: ['正向流動', '反向流動'],
                values: [-1, 1],
                onValueChanged: function(){
                    for(var i = 0; i < dm.size(); i++){
                        var data = dm.getDatas().get(i);
                        data.a('flow.direction', this.getValue());
                    }
                }
            }
        }
    ], [0.1, 0.1]);
    form.addRow([
        {
            name: 'flow.step',
            element: 'Flow Step',
            accessType: 'attr',
        },
        {
            slider: { // 滑動條，設置了該屬性後HT將根據屬性值自動構建 ht.widget.Slider 對象，並保存在 element 屬性上
                min: 0,//最小值
                max: 10,//最大值
                step: 0.1,//步進
                value: 1,
                onValueChanged: function(){
                    for(var i = 0; i < dm.size(); i++){
                        var data = dm.getDatas().get(i);
                        data.a('flow.step', this.getValue());
                    }
                }
            }
        }
    ], [0.1, 0.1]);
    form.addRow([
        {
            name: 'edge.color',
            accessType: 'style',
            element: 'Edge Color',
        },
        {
            colorPicker: { // 顏色選擇框
                instant: true, // 獲取和設置是否處於即時狀態，表明做爲表格和屬性頁的編輯器時，將實時改變模型值
                value: 'rgb(255, 0, 0)',
                onValueChanged: function(){
                    for(var i = 0; i < dm.size(); i++){
                        var data = dm.getDatas().get(i);
                        data.s('edge.color', this.getValue());
                    }
                }
            }
        }
    ], [0.1, 0.1]);
    form.addRow([
        {
            name: 'edge.dash.color', // 虛線樣式屬性
            element: 'Dash Color',
            accessType: 'style'
        },
        {
            colorPicker: {
                instant: true,
                value: 'rgb(255, 255, 0)',
                onValueChanged: function(){
                    for(var i = 0; i < dm.size(); i++){
                        var data = dm.getDatas().get(i);
                        data.s('edge.dash.color', this.getValue());
                    }
                }
            }
        }
    ], [0.1, 0.1]);
}
複製代碼

是否是很是簡單~ 快動手實踐一下吧！