admin 管理员组文章数量: 1087139
2024年3月14日发(作者：adobe after effects)
基于WebGL的三维网络拓扑图交互设计
朱明佳，樊绍杰，王雅轩，吴亚峰
*
（华北理工大学，河北唐山063009）
摘要院针对目前群众对互联网知识的需求和对网络拓扑图知识的匮乏，搭建出基于WebGL和
的三维网络拓扑图的交互系统，通过展示部分常用网络设备和家庭、学校和工作单位的网络结构，凸
显网络拓扑图的重要性。三维网络拓扑图交互的设计与实现在一定层面上凸显着互联网的重要作用，
也在一定方面上使用户更加理解网络概念。
关键词院网络拓扑图；WebGL技术；文件
1概述
随着计算机的快速发展袁互联网也正在蓬勃发展起
来袁目前大多数人都知晓现在的因特网袁但是对于互联
网的发展袁大部分人都不是特别清楚袁对于网络拓扑图
的认识与理解袁更是少之又少遥
而目前大多数人都想对互联网的网络结构以及网络拓
扑图有更深层次的了解袁因此系统基于目前已有的浏览器
语言HTML5技术以及WebGL3D技术的基础上袁为了避免
成吨的文字图片堆叠带给用户的视觉疲劳袁系统的三维网
络拓扑图的设计中就通过WebGL3D中的第三方库
实现
2HTML5
遥用户可以与之交互
HTML5是目前的最热门的编写网页的语言技术
及
袁学习和理解三维网络拓扑图遥
HTML5
袁
HTML4
编写网站十分有效且安全袁并且HTML5在
开发的首选技术
的基础上功能更加强大
遥
袁开发更简单袁是前端
三方库文件
袁
是由
在库文件中
JavaScript
袁
编写的为
有很多为
Web3D
Web3D
服务的第
显示的方
法袁用户可以直接调用显示相关的3D模型或者3D场
景遥在库文件中袁也有很多更简便更有效的绘制3D图
形的方法遥开发出来的库文件袁在一定方面上便利了图
形学方向的开发人员袁既节省了时间袁又达到了相应的
目的遥库文件应用的最多袁也十分受欢迎袁是网页3D
开发人员的首选技术支持
3
遥
3.1
交互系统的设计
通过对渲染器
三维网络拓扑图交互系统的基础搭建
尧相机尧光源尧模型进行高标准的设
置袁以便在进行三维网络拓扑图交互时用户的体验感更
加真实遥
化方法
渊1冤
WebGLRenderer
通过库文件中已经写好的渲染器初始
打开渲染器袁设置渲染区域大
小袁以及设置抗锯齿来兼容高清屏袁以展示出更好的交
互效果遥
作为主要的摄像机
渊2冤系统中采用正交投影相机
遥在此系统中袁将摄像机固定在
OrthographicCamera
Z轴
并调整相机视锥体的6个面的参数袁通过精确的设置来
防止在拖拽网络设备模型的过程中模型变形袁让3D场
景在用户眼中就像一个二维场景一样遥
统交互的过程中
渊3冤系统将光源设置成环境光和聚光灯
袁始终只能从一个角度观察模型
遥由于在系
袁这样
设置既达到了效果又减少了加载时间遥
obj
经写
和
渊4冤
好
mtl
系统的网络设备模型由
的
文件
3D
袁
模
再通过调用第三方库文件
3dmax提前制作并导出
型显示类ImageLoader尧OBJLoader
中已
和
MTLLoader袁
析袁获取其顶点信息
利用这些类文件将导出的模型文件进行解
尧纹理贴图信息并导入程序袁然后
等待渲染器进行绘制遥
3.2
网络拓扑图是各种网络设备连接在一起
三维网络拓扑图系统的交互设计
袁利用互联
网和通信介质连接形成的一个物理布局遥现实生活中无
论是学校的网络还是单位公司的网络又或者是家庭用的
网络袁都可以看作是一个个较大的网络拓扑图袁由此可
以看出网络拓扑图的重要性和广泛性遥
为了让用户更加了解网络中的复杂的结构关系和一
作者简介：朱明佳渊2000-冤袁学士曰樊绍杰渊2000-冤袁
学士曰王雅轩渊2000-冤袁学士曰吴亚峰渊1978-冤袁男袁
通信作者袁硕士袁教师袁研究方向院图形学及深度学习遥
2021.3
131
些常用的基础网络设备袁系统设计了三维网络拓扑图的
交互系统遥用户可以通过点击网络设备模型对选中的网
络设备模型进行一定的了解和观察袁也可以将网络设备
模型拖拽进入网络拓扑图中的对应空板处进行测试匹
配遥通过简单的交互设计体现出网络拓扑图可以直观方
便地展示网络结构的特点遥
3.2.1
展示了家庭
网络设备的介绍功能
尧中小学和工作单位等不同应用场景下
的网络拓扑图袁并设置了集线器尧中继器尧路由器尧防
火墙尧交换机尧调制解调器和网关等7种重要网络设
备遥用户在拖拽网络设备进入拓扑图进行连接匹配前袁
为了方便认识和了解所要用到的网络设备袁可先通过鼠
标左键点击界面左侧陈列的网络设备袁展示通过读取
txt
网络设备进行识别认知
文件里对应模型代表的网络设备名称的小标签
袁如图1所示遥
袁对
三维网络拓扑图设计
网络
中继器
测试匹配
重置状态
返回界面
图1网络设备的小标签介绍
当点击网络设备模型时系统调用鼠标按下的监听袁
通过获取到被鼠标点击处发射出的射线上的模型数组袁
所得数组的第一个模型即为当前选中网络模型袁再将当
前物体的三维坐标通过在世界坐标系的矩阵转换求得出
二维坐标遥最后将获取到的二维坐标与窗口宽度和高度
相结合袁以设置介绍标签的具体位置遥核心代码如下院
eBoundingBox();
letcentroid=3();
tors(
,
);
lyScalar(0.5);
atrix4(World);
3.2.2
系统的核心是利用
通过AABB包围盒实现拓扑图功能
AABB包围盒得到选中网络设备
132
2021.3
的坐标袁通过网络设备和拓扑图空板的位置差来判断是
否网络设备在相应的位置遥在实现该拓扑图功能的过程
中袁需要调用袁通过addEventListener()
方法监听拖拽过程的开始和结束袁并将物体的起始坐标
放入栈中遥在拖拽开始时获取到选中物体的坐标的核心
代码如下院
letobjposition=AABBbox(selectedobj);
temp=4(objposition.x,objposi鄄
tion.y,
objposition.z,);
if(typeof(gapX[temp.w])=="undefined"){
Gap(temp.w);}
startposition=4(
objposition.x-gapX[temp.w],objposition.y-gapY[temp.
w],
objposition.z-gapZ[temp.w],);
(startposition);
当拖拽网络设备模型不当导致界面混乱时袁可以通
过点击界面右下角的野重置状态冶按钮将模型归位并将
存放模型坐标的栈清空袁以方便后续的检测判断遥在拖
拽结束后通过检测拓扑图对应空板里网络设备的数量及
类型来检测拓扑图是否连接成功遥该方法的核心逻辑是
提前通过常量定义出空板和模型的匹配关系袁再通过
indexOf渊冤
络设备和检测匹配关系
方法的返回值来判断空板里是否含有其他网
尧栈的push渊冤方法将网络设备
的坐标存入和remove渊冤方法将不符合条件的设备移除遥
最终通过界面右下角的野测试匹配冶按钮对已经连接完
成的网络拓扑图进行匹配测试遥如图2是点击野测试匹
配冶按钮后网络拓扑图连接成功时的弹窗界面遥
网络
调制解调器
测试匹配
重置状态
返回界面
图2网络拓扑图连接成功界面
(下转第176页)
的信息袁从而更加有效地进行数据信息的传输袁对于推
进企业的良性发展有着非常重要的作用遥另外这项技术
还可以应用到企业和供应商之间的沟通联系袁在整体应
用中成本相对低袁发挥的作用高袁因此对技术安全以及
发展都有着非常显著的作用遥
好计算机网络信息安全的防护工作遥通过虚拟网络技术
的应用显著提升网络信息的安全袁并且建立了一个安全
可靠的网络系统袁通过一些核心的技术袁使得整体的网
络数据信息传输更具安全性遥并且通过培训学习建立专
门的技术人才队伍袁进一步提升虚拟网络技术的创新发
展袁将计算机网络技术的优势发挥出积极的作用袁进而
促进互联网技术水平的进一步提升遥
参考文献
[1]张元恺,王旭,张淑玲.计算机网络信息安全中虚
2020,(11):15-16.
拟专用网络技术的应用[J].网络安全技术与应用,
6虚拟专用网络技术的发展前景
随着互联网技术的不断发展也推进了网络宽带相关
技术在生活中的广泛应用袁同时虚拟网络技术的安全性
以及防御性袁能够保障用户的信息安全遥企业发展中离
不开虚拟网络技术的支撑袁所以需要加大重视对虚拟网
络技术的应用袁并且强化现代化技术的培训学习袁建立
专门的技术人才队伍袁并且更好地运用该技术遥虚拟网
络技术能保障互联网系统的正常使用袁同时也促进了社
会经济的良性发展遥在当前竞争压力非常大的市场下袁
虚拟网络技术未来的发展中会更具市场竞争力袁市场价
值也会不断地加快提升袁为我国的通信事业也奠定了坚
实的基础遥
[2]洪小坚.虚拟网络技术在计算机网络安全中的应用
[3]米志东.计算机网络信息安全中虚拟专用网络技术的
应用研究[J].数字通信世界,2020,(10):212-213.
[4]王康,崔秋祥,刘海东.计算机网络信息安全中虚
(18):12-13.
[J].网络安全技术与应用,2020,(10):41-43.
拟专用网络技术的应用[J].电子世界,2020,
7结语
当前随着网络信息安全技术的发展袁虚拟网络技术
在各领域中也积极发挥出了很大的作用遥随着计算机信
息安全成为当前人们最关注的一个问题袁所以要加大做
(上接第132页)
[5]李文君.计算机网络信息安全中虚拟专用网络技术
(11):80.
的应用策略研究[J].计算机产品与流通,2020,
并固定之后袁3D场景也可当作2D界面去看遥虽然网
络拓扑图本身是个2D图像袁但是项目是用3D场景绘制
实现的袁也充分说明了WebGL作为3D尧2D开发的优
势所在遥
参考文献
[1]吴亚峰.Unity43D开发实战详解.北京院人民邮
电出版社,2014.
电出版社,2019.
[2]吴亚峰.WebgL3D开发实战详解.北京院人民邮
[3]吴亚峰.OpenGLES2.0游戏开发基础技术和典型
案例.北京院人民邮电出版社,2014.
4结语
合目前各个主机自带的GPU显存硬件进行加速渲染袁
使得3D场景或者3D物体更加的逼真袁更加的引人注
目袁这也更加体现WebGL3D的作用遥介绍了三维网络
拓扑图的交互设计与实现袁在此交互设计中袁用户需
要将不同的网络设备拖动到相应的网络拓扑图上面的
对应位置袁使其连接成为正确的网络拓扑图袁点击界
面右下方的匹配测试袁用户可以通过弹窗看到自己连
接的拓扑图正确与否的结果遥系统在一定方面上也展
示了WebGL的强大之处袁即将摄像机设置成正交模式
作为当前来说比较热门的第三方库袁再配
176
2021.3
版权声明：本文标题：基于WebGL的三维网络拓扑图交互设计 内容由网友自发贡献，该文观点仅代表作者本人， 转载请联系作者并注明出处：http://roclinux.cn/p/1710377195a570312.html， 本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
发表评论