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

最新推荐文章于 2024-09-23 16:41:39 发布
最新推荐文章于 2024-09-23 16:41:39 发布
阅读量184 收藏
点赞数

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

iteye_6481
关注
用拓扑图呈现多层级关系图
TWaver可视化
04-13 1万+
大部分拓扑图界面都有显示“分级呈现”的需求。一个复杂的系统或组织，会有很多不同层次的节点和连接关系。如何用图形相对清晰的呈现出来，是一个需要不断探讨的话题。
Network3基于FORG3D的网络3D可视化R软件.
04-23
在分析当前旅游领域网站信息查询方面的问题基础上，采用ｐｒｏｔéｇé工具构建 了旅游领域本体，利用旅游领域规则的语义推理基础上构建了旅游信息语义检索模型． 提 出了采用语义网技术构建旅游信息服务平台的方法，并对平台的体系结构、功能模块组成 进行探究，向用户提供智能化、知识化服务，提高了旅游领域搜索的查准率和查全率
基于HTML5和WebGL的3D网络拓扑结构图
weixin_30901729的博客
10-04 673
现在，3D模型已经用于各种不同的领域。在医疗行业使用它们制作器官的精确模型；电影行业将它们用于活动的人物、物体以及现实电影；视频游戏产业将它们作为计算机与视频游戏中的资源；在科学领域将它们作为化合物的精确模型；建筑业将它们用来展示提议的建筑物或者风景表现；工程界将它们用于设计新设备、交通工具、结构以及其它应用领域；在最近几十年，地球科学领域开始构建三维地质模型，而且3D模型经常做成动画，...
用拓扑图展现层级和组织关系（二）
weixin_30909575的博客
05-04 538
上一篇里我们用TWaver制作了一个公司内部的流程图，这一篇，我们来研究如何呈现出公司内部门和员工间的关系网图。先来看看效果：例子中我们展示的是各部门员工之间的复杂关系图。在公司内部，不仅部门内部员工之间发生着关系往来，部门和部门之间的员工也在发生这各种往来关系。如果你还是用原先的那种表格来呈现，显然很难直观看出各种关系，用图形化的拓扑呈现就会显得一目了然。好了，我们就来分析一下这张图如何用twa...
基于Echarts的网桥拓扑结构可视化模拟
CSDN_0007的博客
10-05 1700
基于Echarts的网桥拓扑结构可视化模拟 一、项目背景及介绍 该项目为《高级计算机网络》第一次实践作业，作业目标： 网络初始化 网络初始化 支持运行前预设、运行时设置网络拓扑（输入：网桥数量、各网桥所管辖的网段及站点数量） 每个网桥维持一张转发表 模拟过程 每次发送一帧时，显示发送信息，如：网桥B1.网段1.站点A --> 网桥B3.网段2.站点G 按照网桥的自学习规则，进行相关转发表的更新、帧的转发 模拟方式 展示内容：拓扑图、网桥转发表、帧流向等 操作功能：“转发”、“后退”
RetinaFace：一种野外多层次人脸定位方法
1RetinaFace：野外单次多层次人脸定位邓建康*1，2，3郭佳*2Evangelos Ververas1，3Irene Kotsia4Stefanos Zafeiriou1，31帝国理工学院2InsightFace3 FaceSoft4伦敦米德尔塞克斯大学{j.deng16，e.ververas16，s....
2.人员拓扑设计-反馈-答复1
08-08
2.4. 人员信息界面在3D环境中呈现，显示内容随着视角拉近而增加。基本信息如姓名、工号、标签号和联系方式，以及定位和工作信息，都可以在此查看。此外，系统支持发送短信或邮件告警，但这取决于电厂是否允许外网...
HTML5的WebGL实现的3D和2D拓扑树
yixiaof的专栏
01-09 927
在HT for Web中2D和3D应用都支持树状结构数据的展示，展现效果各异，2D上的树状结构在展现层级关系明显，但是如果数据量大的话，看起来就没那么直观，找到指定的节点比较困难，而3D上的树状结构在展现上配合HT for Web的弹力布局组件会显得比较直观，一眼望去可以把整个树状结构数据看个大概，但是在弹力布局的作用下，其层次结构看得就不是那么清晰了。所以这时候结构清晰的3D树的需求就来了，那么
有特点的3D网络拓扑图
funnycoffee123的博客
09-13 6958
图片出自以下链接 https://3d-networking.com/3d-symbols/
基于threejs 搭建web 3D 简单编辑器
BluePanther的专栏
03-13 3487
<!DOCTYPE html> <html lang="en"> <head> <title>智雨物联</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, user-scalable=no,...
基于ThreeJS的3D地球
张_优秀的博客
06-16 6723
标记点、动画、旋转、标记点点击事件、信息弹窗
3D网络拓扑的应用，精彩不容错过！
NWVDI的博客
08-21 716
3D网络拓扑
THREE.JS 绘制飞线 攻击线 迁移线 拓扑图动画线条等
stonerao
10-22 5019
THREE.JS 绘制飞线 在THREE中如何绘制飞线；使用的是Points+Shader封装的一个飞线方法；可以用于攻击线路，指向效果等；显卡GT730 6000根飞线 帧数在30FPS，可以调节线条的长度 和 间隔 ，增加流畅度 飞线Demo git托管比较卡 代码地址 使用飞线 let _Fly = new initFly({ texture: "./xxx.png"//飞线贴图 ...
HTML5拓扑3D机房
风中之枫
10-26 1113
http://www.hightopo.com/cn-index.htmlHTML5拓扑3D机房，电力工控Web SCADA
threejs创建3d拓扑流程图
最新发布
nancyfishyu的博客
09-23 338
three 3d拓扑流程图 可拖拽模型 可对模型经行连线 可增删改查模型
Threejs加载gltf格式模型,.fbx转.glb格式,压缩gltf模型
qq_33069557的博客
07-10 5854
11
基于 HTML5 WebGL 的 3D 网络拓扑结构图
HT for Web 3D
01-29 3666
现在，3D 模型已经用于各种不同的领域。在医疗行业使用它们制作器官的精确模型；电影行业将它们用于活动的人物、物体以及现实电影；视频游戏产业将它们作为计算机与视频游戏中的资源；在科学领域将它们作为化合物的精确模型；建筑业将它们用来展示提议的建筑物或者风景表现；工程界将它们用于设计新设备、交通工具、结构以及其它应用领域；在最近几十年，地球科学领域开始构建三维地质模型，而且 3D 模型经常做成动画，例如...
拓扑优化与3D打印技术在结构优化中的应用
同时，拓扑优化也可以帮助降低3D打印产品的材料使用量和生产成本，对于那些成本敏感和材料消耗大的应用领域尤为有利。 总结来说，拓扑优化是结构优化领域的重要方向，它在概念设计阶段起到关键作用，通过连续体结构...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值