基於 HTML5 WebGL 的 3D 服務器與客戶端的通訊

這個例子的初衷是模擬服務器與客戶端的通訊，我把整個需求簡化變成了今天的這個例子。3D 機房方面的模擬通常都是須要鷹眼來輔助的，這樣找產品以及整個空間的歸納會比較明確，在這個例子中我也加了，這篇文章就算是我對此次項目的一個總結吧。對了，這個例子我是參考一個 DEMO 來完成的，和示例中的顯示有些不一樣，你們莫驚奇。

例子連接： http://www.hightopo.com/demo/3DEdgeFlow/index.html

本文動圖：

這個例子沒有設計師的參與，樣式上面你們將就將就，可是我以爲還不錯啊，哈哈~

進入正題，整個例子差很少用了 200 行的代碼來實現的，這就是我喜歡用 HT 的緣由，如今 Web3d 技術興起，大致就是分爲兩派：插件派和 HTML5 派。HT 就是基於 HTML5 的，不須要安裝任何插件，啊，跑題了。。。

首先，仍是從場景的搭建開始，這個界面是在 body 體上添加了三個部分：3d 組件，屬性組件以及拓撲組件（2d 組件）。添加的方式是這樣的：爲了最外層組件加載填充滿窗口的方便性，HT 的全部組件都有 addToDOM 函數，其實現邏輯以下，其中 iv 是 invalidate 的簡寫：

addToDOM = function(){   
    var self = this,
        view = self.getView(),   
        style = view.style;
    document.body.appendChild(view);            
    style.left = '0';
    style.right = '0';
    style.top = '0';
    style.bottom = '0';      
    window.addEventListener('resize', function () { self.iv(); }, false);            
}

由於這個函數是將 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);//縮放平移整個拓撲以展現全部的圖元

propertyView = new ht.widget.PropertyView(dm);//屬性組件   
propertyView.getView().className = 'property';
propertyView.setWidth(240);//設置組件寬度
propertyView.setHeight(150);//高度
document.body.appendChild(propertyView.getView());

拓撲組件和屬性組件的樣式我就再也不贅述了，只是設置了一個背景顏色以及 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 函數建立的：

floor = createNode([0, 5, 0], [1000, 10, 500]);//地板圖元
floor.s({//設置圖元的樣式 s 爲 setStyle 的縮寫
    'all.color': 'rgb(47, 79, 79)'//六面體的總體顏色
});

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

//五臺不一樣做用的服務器
service1 = createNode([-400, 140, 0], [100, 260, 100], '備用', 'models/機房/機櫃相關/機櫃2.json');
service2 = createNode([-200, 140, 0], [100, 260, 100], '網站', 'models/機房/機櫃相關/機櫃2.json');
service3 = createNode([0, 140, 0], [100, 260, 100], 'OA', 'models/機房/機櫃相關/機櫃2.json');
service4 = createNode([200, 140, 0], [100, 260, 100], '廣告', 'models/機房/機櫃相關/機櫃2.json');
service5 = createNode([400, 140, 0], [100, 260, 100], '受理', 'models/機房/機櫃相關/機櫃2.json');

//建立交換機與服務器之間的連線
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').s('label.color', '#000');

createEdge(exchange2, service1);
createEdge(exchange2, service2);
createEdge(exchange2, service3);
createEdge(exchange2, service4);
createEdge(exchange2, service5);

floor2 = createNode([-100, 5, 800], [1000, 10, 500]);
floor2.s({
    'all.color': 'rgb(47, 79, 79)'
});

device1 = createNode([-400, 20, 650], [200, 20, 100], 'VLS 12000(上)', 'models/機房/機櫃相關/機櫃設備6.json');
device2 = createNode([100, 20, 650], [200, 20, 100], 'VLS 12000(下)', 'models/機房/機櫃相關/機櫃設備6.json');
device3 = createNode([-200, 20, 800], [200, 20, 100], 'HP Strage Works 8/8 SAN Switch(上)', 'models/機房/機櫃相關/機櫃設備6.json');
device4 = createNode([200, 20, 800], [200, 20, 100], 'HP Strage Works 8/8 SAN Switch(下)', 'models/機房/機櫃相關/機櫃設備6.json');
device5 = createNode([-300, 20, 950], [200, 20, 100], 'EVA 8400 HSV450(上)', 'models/機房/機櫃相關/機櫃設備6.json');
device6 = createNode([100, 20, 950], [200, 20, 100], 'EVA 8400 HSV450(下)', 'models/機房/機櫃相關/機櫃設備6.json');

createEdge(exchange2, device1);
edge1 = createEdge(exchange2, device2);
createEdge(device1, device3);
createEdge(device1, device4);
createEdge(device2, device3);
createEdge(device2, device4);
createEdge(device3, device5);
createEdge(device3, device6);
createEdge(device4, device5);
createEdge(device4, device6);
dm.sm().ss(edge1);//設置選中 edge1

最後，須要在屬性欄中添加屬性，這裏咱們只對「連線」進行了屬性的顯示及調整，總共 5 個屬性，包括我經過 setAttr（簡寫爲 a）自定義的屬性 flow.enable、flow.direction、flow.step 和樣式屬性 edge.color 以及 edge.dash.color。咱們經過 name 屬性結合 accessType 屬性實現對 Data 節點的存取：

 

 

//連線的屬性
edgeProperties = [
    {
        name: 'flow.enable',//用於存取 name 屬性
        accessType: 'attr',//操做存取屬性類型
        displayName: 'Enable Flow',//用於存取屬性名的顯示文本值，若爲空則顯示 name 屬性值
        valueType: 'boolean',//用於提示組件提供合適的 renderer 渲染，boolean 類型，顯示爲勾選框
        editable: true//設置該屬性是否可編輯
    },
    {
        name: 'flow.direction',
        accessType: 'attr',
        displayName: 'Flow Direction',
        enum: {//枚舉類型屬性 傳遞數值和文字數組
            values: [-1, 1],
            labels: ['正向流動', '反向流動']
        },
        editable: true
    },
    {
        name: 'flow.step',
        displayName: 'Flow Step',                        
        editable: true,
        accessType: 'attr',
        slider: {//表單插件中的滑動條 因此要添加 ht-form.js 
            min: 0,//最小值
            max: 10,//最大值
            step: 0.1//步進
        }
    },
    {
        name: 'edge.color',
        accessType: 'style',
        displayName: 'Edge Color',
        editable: true,
        valueType: 'color',//顏色類型，以填充背景色的方式顯示
        colorPicker: {//顏色選擇框
            instant: true//獲取和設置是否處於即時狀態，默認爲true，表明做爲表格和屬性頁的編輯器時，將實時改變模型值
        }
    },
    {
        name: 'edge.dash.color',
        displayName: 'Dash Color',
        accessType: 'style',
        valueType: 'color',
        editable: true,
        colorPicker: {
            instant: true
        }
    }
];
propertyView.setEditable(true);//設置屬性組件可編輯
propertyView.addProperties(edgeProperties);//添加連線屬性

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