基于 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);//添加連線屬性

是不是非常簡單~? 快動手實踐一下吧！