使用3D呈现拓扑的多层次结构

关于3D场景在现在网管中的应用的讨论一直没有停止过，应用场景有哪些，应用的意义有哪些，可以为产品开发、为系统使用带来多少利益点等等。今天给大家介绍一种应用情景，希望能借此机会，抛砖引玉，引出更多更具有实际意义的应用需求来，为大家应用系统的丰富性添砖加瓦。
在TWaver传统的2D应用中，近一年非常突出地出现了一种需求，那就是希望能够在同一个页面内显示多种层次的网络结构，这样做的好处在于：在同一个页面中可以清晰地描述一个网络从逻辑到物理上的结构，与此同时，如果做跨层次的交互的时候（例如说更改子网内外节点的连接关系），就不需要采用钻取／回退（drill down／up）或者群组合并／收缩等的复杂操作了。

TWaver过去提供了使用2D技术拼凑上述需求页面的示例代码，效果已经相当不错了，但是客户的需求也是随着技术的发展而不断水涨船高，对原来的方案提出了不足之处：一方面立体感不够，场景不具有三维交互；另一方面，如果层次多，铺展较为分散的时候，拼接这样的图纸较为麻烦。
层次，意味着在平面坐标之余，多出一维数据用来描述节点关系，常用的描述方式则是节点纵向位置的不同（高中低的位置偏差）。仔细一想，这不正是3D场景中，高程数据的一个用武之地吗，Z轴坐标不是恰恰可以描述出高中低位置的差异，不也就正好能凸显节点间的层次吗？ok，马上试试看：
首先组织子网数据，同一个子网的数据我们认为它们处于同一层次，固然也就是具有相同的z坐标。

private function createGroup1():void{
	var box:ElementBox = network.elementBox;
	var bus:Node = NodeUtils.buildBus(new Vector3D(startx,ly,b1z),
                                                        new Vector3D(b1xr,ly,b1z),12,0xa0a0a0);
	box.add(bus);
	box.add(NodeUtils.buildNodeWithCommon(gpg(0,0,0),
        serverSize,s1,null,null,null,"s"));
	box.add(NodeUtils.buildNodeWithCommon(gpg(2,0,0),
        serverSize,s1,null,null,null,"s"));
	box.add(NodeUtils.buildNodeWithCommon(gpg(4,0,0),
        serverSize,s3,null,null,null,"s"));
	box.add(NodeUtils.buildNodeWithCommon(gpg(0,0,0),
        serverSize,s2,null,null,null,"s"));
	box.add(NodeUtils.buildLink([gpg(0,ly,0),gpg(0,ly,8)],3,0x00AAA0));
	box.add(NodeUtils.buildLink([gpg(2,ly,0),gpg(2,ly,8)],3,0x00AAA0));
	box.add(NodeUtils.buildLink([gpg(4,ly,0),gpg(4,ly,8)],3,0x00AAA0));
	box.add(NodeUtils.buildLink([gpg(2,ly,8),gpg(2,ly,10),gpg(8,ly,10)],
        8,0x20AA20));

	box.add(NodeUtils.buildNodeWithCommon(gpg(8,0,10),
        srSize,csr,null,null,null,"s"));

	box.add(NodeUtils.buildBus(gpg(4,ly,14),gpg(8,ly,14),
        12,0xa0a0a0));
	box.add(NodeUtils.buildNodeWithCommon(gpg(5,0,17),
        serverSize,s1,null,null,null,"s"));
	box.add(NodeUtils.buildNodeWithCommon(gpg(7,sy,17),
        smallSize,s1,null,null,null,"s"));
	box.add(NodeUtils.buildLink([gpg(5,ly,17),gpg(5,ly,14)],
        3,0x00AAA0));
	box.add(NodeUtils.buildLink([gpg(7,ly,17),gpg(7,ly,14)],
        3,0x00AAA0));
	box.add(NodeUtils.buildLink([gpg(6,ly,14),gpg(6,ly,12),gpg(8,ly,12),gpg(8,ly,10)],
        8,0x20AA20));
	box.add(NodeUtils.buildBus(gpg(8,ly,10),gpg(10,ly,10),10,0x00a0a0));
	box.add(NodeUtils.buildBus(gpg(10,ly,8),gpg(10,ly,12),12,0xa0a0a0));
	box.add(NodeUtils.buildLink([gpg(10,ly,9),gpg(13,ly,9)],3,0x00AAA0));
	box.add(NodeUtils.buildLink([gpg(10,ly,11),gpg(13,ly,11)],3,0x00AAA0));
	box.add(NodeUtils.buildNodeWithCommon(gpg(13,sy,9),
        smallSize,s2,null,null,null,"s"));
	box.add(NodeUtils.buildNodeWithCommon(gpg(13,sy,11),
        smallSize,s2,null,null,null,"s"));

	box.add(NodeUtils.buildLink([gpg(13,ly,9),gpg(12,ly,5)],3,0x00AAA0));
	box.add(NodeUtils.buildLink([gpg(13,ly,9),gpg(16,ly,9)],3,0x00AAA0));
	box.add(NodeUtils.buildNodeWithCommon(gpg(12,0,5),
        serverSize,s3,null,null,null,"s"));
	box.add(NodeUtils.buildNodeWithCommon(gpg(16,0,9),
         serverSize,s1,null,null,null,"s"));

	box.add(NodeUtils.buildBillboard(gpg(22,ly,9),"cloud"));
	box.add(NodeUtils.buildLink([gpg(16,ly,9),gpg(22,ly,9)],3,0x00AAA0));

	box.add(NodeUtils.buildLink([gpg(13,ly,11),gpg(18,ly,11)],3,0xAA00A0));
	box.add(NodeUtils.buildLink([gpg(13,ly,11),gpg(17,ly,17)],3,0xAA00A0));
	box.add(NodeUtils.buildLink([gpg(13,ly,11),gpg(15,ly,19)],3,0xAA00A0));
	box.add(NodeUtils.buildLink([gpg(13,ly,11),gpg(10,ly,19)],3,0xAA00A0));
	box.add(NodeUtils.buildNodeWithCommon(gpg(18,sy,11),
        smallSize,s3,null,null,null,"s"));
	box.add(NodeUtils.buildNodeWithCommon(gpg(17,sy,17),
        smallSize,s1,null,null,null,"s"));
	box.add(NodeUtils.buildNodeWithCommon(gpg(15,sy,19),
        smallSize,s2,null,null,null,"s"));
	box.add(NodeUtils.buildNodeWithCommon(gpg(10,sy,19),
        smallSize,s2,null,null,null,"s"));

	var plane:Node = NodeUtils.buildPlane(new Vector3D(0,-42,0),
        new Vector3D(1000,1000,1000),0xE0E0E0,"floor");
	box.add(plane);
	plane.setStyle(Style3D.ZORDERING_LAYER,-100);
	box.add(NodeUtils.createText(new Vector3D(0,-35,-400),
        "Group A",0xFFA0A0));

}

 


我们再创造另外一个层次的子网内数据,为了与第一个子网分出层次的不同，我们把这个层次的子网内对象设置上和上个子网内对象不同的z坐标。

private function createGroup2():void{
        var box:ElementBox = network.elementBox;
	var bus:Node = NodeUtils.buildBus(new Vector3D(startx,ly,b1z),
        new Vector3D(b1xr,ly,b1z),12,0xa0a0a0);
	box.add(bus);
	box.add(NodeUtils.buildNodeWithCommon(gpg(-15,b2,0),
        serverSize,s1,null,null,null,"s"));
	box.add(NodeUtils.buildNodeWithCommon(gpg(-13,b2,0),
        serverSize,s1,null,null,null,"s"));
	box.add(NodeUtils.buildNodeWithCommon(gpg(-11,b2,0),
        serverSize,s1,null,null,null,"s"));
	box.add(NodeUtils.buildNodeWithCommon(gpg(-9,b2,0),
        serverSize,s1,null,null,null,"s"));
	box.add(NodeUtils.buildNodeWithCommon(gpg(-15,b2,7),
        serverSize,s1,null,null,null,"s"));
	box.add(NodeUtils.buildNodeWithCommon(gpg(-13,b2,7),
        serverSize,s1,null,null,null,"s"));
	box.add(NodeUtils.buildNodeWithCommon(gpg(-11,b2,7),
        serverSize,s1,null,null,null,"s"));
	box.add(NodeUtils.buildLink([gpg(-15,l2,0),gpg(-15,l2,4)],3,0x00AAA0));
	box.add(NodeUtils.buildLink([gpg(-13,l2,0),gpg(-13,l2,4)],3,0x00AAA0));
	box.add(NodeUtils.buildLink([gpg(-11,l2,0),gpg(-11,l2,4)],3,0x00AAA0));
	box.add(NodeUtils.buildLink([gpg(-9,l2,0),gpg(-9,l2,4)],3,0x00AAA0));
	box.add(NodeUtils.buildBus(gpg(-16,l2,4),gpg(-8,l2,4),12,0xa0a0a0));
	box.add(NodeUtils.buildLink([gpg(-15,l2,7),gpg(-15,l2,4)],3,0x00AAA0));
	box.add(NodeUtils.buildLink([gpg(-13,l2,7),gpg(-13,l2,4)],3,0x00AAA0));
	box.add(NodeUtils.buildLink([gpg(-11,l2,7),gpg(-11,l2,4)],3,0x00AAA0));
	box.add(NodeUtils.buildLink([gpg(-9,l2,0),gpg(-9,ly,0),gpg(0,ly,0)],
        3,0x20AA20));
	var plane:Node = NodeUtils.buildPlane(new Vector3D(-800,100,300),
        new Vector3D(400,400,400),0xA0EEA0,"floor");
	box.add(plane);
	plane.setStyle(Style3D.ZORDERING_LAYER,-50);
	plane.setStyle(Style3D.BOTH_SIDES_VISIBLE,true);
	box.add(NodeUtils.createText(new Vector3D(-700,l2+20,100),
        "Group B",0xFFA0A0));
}

于是我们就得出了如此的层次结果

由于我们使用了TWaver 3D的开发包，因此自然而然地就带上了必要的3D交互，例如整个场景的旋转，双击机柜节点切换场景中心，鼠标滚轮进行场景缩放等等。大家可以点击此处体验一下

Demo的简要介绍请参看论坛相关内容

关于demo的详细代码，请到此处下载
见原文最下方