關(guān)于3D場(chǎng)景在現(xiàn)在網(wǎng)管中的應(yīng)用的討論一直沒(méi)有停止過(guò)，應(yīng)用場(chǎng)景有哪些，應(yīng)用的意義有哪些，可以為產(chǎn)品開(kāi)發(fā)、為系統(tǒng)使用帶來(lái)多少利益點(diǎn)等等。今天給大家介紹一種應(yīng)用情景，希望能借此機(jī)會(huì)，拋磚引玉，引出更多更具有實(shí)際意義的應(yīng)用需求來(lái)，為大家應(yīng)用系統(tǒng)的豐富性添磚加瓦。
在TWaver傳統(tǒng)的2D應(yīng)用中，近一年非常突出地出現(xiàn)了一種需求，那就是希望能夠
在同一個(gè)頁(yè)面內(nèi)顯示多種層次的網(wǎng)絡(luò)結(jié)構(gòu)，這樣做的好處在于：在同一個(gè)頁(yè)面中可以清晰地描述一個(gè)網(wǎng)絡(luò)從邏輯到物理上的結(jié)構(gòu)，與此同時(shí)，如果做跨層次的交互的時(shí)候（例如說(shuō)更改子網(wǎng)內(nèi)外節(jié)點(diǎn)的連接關(guān)系），就不需要采用鉆取／回退（drill down／up）或者群組合并／收縮等的復(fù)雜操作了。
TWaver過(guò)去提供了使用2D技術(shù)拼湊上述需求頁(yè)面的示例代碼，效果已經(jīng)相當(dāng)不錯(cuò)了，但是客戶的需求也是隨著技術(shù)的發(fā)展而不斷水漲船高，對(duì)原來(lái)的方案提出了不足之處：一方面立體感不夠，場(chǎng)景不具有三維交互；另一方面，如果層次多，鋪展較為分散的時(shí)候，拼接這樣的圖紙較為麻煩。
層次，意味著在平面坐標(biāo)之余，多出一維數(shù)據(jù)用來(lái)描述節(jié)點(diǎn)關(guān)系，常用的描述方式則是節(jié)點(diǎn)縱向位置的不同（高中低的位置偏差）。仔細(xì)一想，這不正是3D場(chǎng)景中，高程數(shù)據(jù)的一個(gè)用武之地嗎，Z軸坐標(biāo)不是恰恰可以描述出高中低位置的差異，不也就正好能凸顯節(jié)點(diǎn)間的層次嗎？
ok，馬上試試看：
首先組織子網(wǎng)數(shù)據(jù)，同一個(gè)子網(wǎng)的數(shù)據(jù)我們認(rèn)為它們處于同一層次，固然也就是具有相同的z坐標(biāo)。
我們?cè)賱?chuàng)造另外一個(gè)層次的子網(wǎng)內(nèi)數(shù)據(jù),為了與第一個(gè)子網(wǎng)分出層次的不同，我們把這個(gè)層次的子網(wǎng)內(nèi)對(duì)象設(shè)置上和上個(gè)子網(wǎng)內(nèi)對(duì)象不同的z坐標(biāo)。
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 }
于是我們就得出了如此的層次結(jié)果
由于我們使用了TWaver 3D的開(kāi)發(fā)包，因此自然而然地就帶上了必要的3D交互，例如
整個(gè)場(chǎng)景的旋轉(zhuǎn)，雙擊機(jī)柜節(jié)點(diǎn)切換場(chǎng)景中心，鼠標(biāo)滾輪進(jìn)行場(chǎng)景縮放等等。
大家可以點(diǎn)擊此處體驗(yàn)一下
Demo的簡(jiǎn)要介紹請(qǐng)參看
論壇相關(guān)內(nèi)容
關(guān)于demo的詳細(xì)代碼，請(qǐng)到此處下載
見(jiàn)原文最下方