关于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的详细代码，请到此处下载
见原文最下方