關于3D場景在現在網管中的應用的討論一直沒有停止過，應用場景有哪些，應用的意義有哪些，可以為產品開發、為系統使用帶來多少利益點等等。今天給大家介紹一種應用情景，希望能借此機會，拋磚引玉，引出更多更具有實際意義的應用需求來，為大家應用系統的豐富性添磚加瓦。
在TWaver傳統的2D應用中，近一年非常突出地出現了一種需求，那就是希望能夠
在同一個頁面內顯示多種層次的網絡結構，這樣做的好處在于：在同一個頁面中可以清晰地描述一個網絡從邏輯到物理上的結構，與此同時，如果做跨層次的交互的時候（例如說更改子網內外節點的連接關系），就不需要采用鉆取／回退（drill down／up）或者群組合并／收縮等的復雜操作了。
TWaver過去提供了使用2D技術拼湊上述需求頁面的示例代碼，效果已經相當不錯了，但是客戶的需求也是隨著技術的發展而不斷水漲船高，對原來的方案提出了不足之處：一方面立體感不夠，場景不具有三維交互；另一方面，如果層次多，鋪展較為分散的時候，拼接這樣的圖紙較為麻煩。
層次，意味著在平面坐標之余，多出一維數據用來描述節點關系，常用的描述方式則是節點縱向位置的不同（高中低的位置偏差）。仔細一想，這不正是3D場景中，高程數據的一個用武之地嗎，Z軸坐標不是恰恰可以描述出高中低位置的差異，不也就正好能凸顯節點間的層次嗎？
ok，馬上試試看：
首先組織子網數據，同一個子網的數據我們認為它們處于同一層次，固然也就是具有相同的z坐標。
我們再創造另外一個層次的子網內數據,為了與第一個子網分出層次的不同，我們把這個層次的子網內對象設置上和上個子網內對象不同的z坐標。
1 private function createGroup2():void{
2 var box:ElementBox = network.elementBox;
3 var bus:Node = NodeUtils.buildBus(new Vector3D(startx,ly,b1z),
4 new Vector3D(b1xr,ly,b1z),12,0xa0a0a0);
5 box.add(bus);
6 box.add(NodeUtils.buildNodeWithCommon(gpg(-15,b2,0),
7 serverSize,s1,null,null,null,"s"));
8 box.add(NodeUtils.buildNodeWithCommon(gpg(-13,b2,0),
9 serverSize,s1,null,null,null,"s"));
10 box.add(NodeUtils.buildNodeWithCommon(gpg(-11,b2,0),
11 serverSize,s1,null,null,null,"s"));
12 box.add(NodeUtils.buildNodeWithCommon(gpg(-9,b2,0),
13 serverSize,s1,null,null,null,"s"));
14 box.add(NodeUtils.buildNodeWithCommon(gpg(-15,b2,7),
15 serverSize,s1,null,null,null,"s"));
16 box.add(NodeUtils.buildNodeWithCommon(gpg(-13,b2,7),
17 serverSize,s1,null,null,null,"s"));
18 box.add(NodeUtils.buildNodeWithCommon(gpg(-11,b2,7),
19 serverSize,s1,null,null,null,"s"));
20 box.add(NodeUtils.buildLink([gpg(-15,l2,0),gpg(-15,l2,4)],3,0x00AAA0));
21 box.add(NodeUtils.buildLink([gpg(-13,l2,0),gpg(-13,l2,4)],3,0x00AAA0));
22 box.add(NodeUtils.buildLink([gpg(-11,l2,0),gpg(-11,l2,4)],3,0x00AAA0));
23 box.add(NodeUtils.buildLink([gpg(-9,l2,0),gpg(-9,l2,4)],3,0x00AAA0));
24 box.add(NodeUtils.buildBus(gpg(-16,l2,4),gpg(-8,l2,4),12,0xa0a0a0));
25 box.add(NodeUtils.buildLink([gpg(-15,l2,7),gpg(-15,l2,4)],3,0x00AAA0));
26 box.add(NodeUtils.buildLink([gpg(-13,l2,7),gpg(-13,l2,4)],3,0x00AAA0));
27 box.add(NodeUtils.buildLink([gpg(-11,l2,7),gpg(-11,l2,4)],3,0x00AAA0));
28 box.add(NodeUtils.buildLink([gpg(-9,l2,0),gpg(-9,ly,0),gpg(0,ly,0)],
29 3,0x20AA20));
30 var plane:Node = NodeUtils.buildPlane(new Vector3D(-800,100,300),
31 new Vector3D(400,400,400),0xA0EEA0,"floor");
32 box.add(plane);
33 plane.setStyle(Style3D.ZORDERING_LAYER,-50);
34 plane.setStyle(Style3D.BOTH_SIDES_VISIBLE,true);
35 box.add(NodeUtils.createText(new Vector3D(-700,l2+20,100),
36 "Group B",0xFFA0A0));
37 }
于是我們就得出了如此的層次結果
由于我們使用了TWaver 3D的開發包，因此自然而然地就帶上了必要的3D交互，例如
整個場景的旋轉，雙擊機柜節點切換場景中心，鼠標滾輪進行場景縮放等等。
大家可以點擊此處體驗一下
Demo的簡要介紹請參看
論壇相關內容
關于demo的詳細代碼，請到此處下載
見原文最下方