這個例子的初衷是模擬伺服器與客戶端的通訊，我把整個需求簡化變成了今天的這個例子。3D 機房方面的模擬一般都是需要鷹眼來輔助的，這樣找產品以及整個空間的概括會比較明確，在這個例子中我也加了，這篇文章就算是我對這次專案的一個總結吧。對了，這個例子我是參考一個 DEMO 來完成的，和示例中的顯示有些不同，大家莫驚奇。
例子連結： http://www.hightopo.com/guide/guide/core/schedule/examples/example_network.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);//新增連線屬性
是不是非常簡單~ 快動手實踐一下吧！