技术交流学习或者有任何问题欢迎加群

编程技术交流群 : 154514123 爱上编程      Java技术交流群 : 6128790  Java

标签:会有   防止   信息   基本   机房   监控系统   网络设备   display   段落   

 在H5使用3D技术门槛比较低了,它的基础是WebGL(ThreeJS),一个OpenGL的浏览器子集,支持大部分主要3D功能接口。目前主流的浏览器都有较好的支持,IE需要11。最近web 3D机房研发告一段落,有时间整理这段时间的一些成果。主要涉及使用H5、js、WebGL技术。

目标效果图

 下图是机房3D效果图http://www.ipleasure.cn/3droom/

Web 3D智能数字机房,HTML5+WebGL(ThreeJS)匠心打造 - 爱上编程技术图片

Web 3D智能数字机房,HTML5+WebGL(ThreeJS)匠心打造 - 爱上编程技术图片Web 3D智能数字机房,HTML5+WebGL(ThreeJS)匠心打造 - 爱上编程技术图片

机房线缆和走线架


 线缆的连接走向和连接关系是管理员关注的焦点。机架中的网络设备或服务器设备会通过端口和线缆进行连接,组成一定结构的网络。而线缆的走向在物理上通过肉眼是很难看清晰的。更多线缆会从机柜连出,延伸到屋顶上方或地板下方的隐蔽工程中(例如走线架)固定和布线,用肉眼更无法观察。此刻,需要3D机房界面能清晰的显示电缆从端口到走线架再到端口的“端到端”的物理走线,方便管理员了解网络走线情况和管理。

Web 3D智能数字机房,HTML5+WebGL(ThreeJS)匠心打造 - 爱上编程技术图片

Web 3D智能数字机房,HTML5+WebGL(ThreeJS)匠心打造 - 爱上编程技术图片

机柜利用率



项目还有个需求是显示机柜的整个空间使用率情况。使用率不用显示具体哪里占用哪里空闲,只要显示一个整体使用比例即可,相对简单一点。先用一个线框把机柜位置显示出来,再把一个高度符合使用比例的立方块显示出来就行了,类似一个柱状图。设置一下颜色、光照等属性,让它看上去更真实:


空调风向


机房中的空调冷风流向也是一个需要监控的业务。一般冷风从地板下方吹出、穿过机柜从上方流走。如果有通道的情况,冷风的冷却效效率会更好。下图展示了冷风是如何流动的。其中箭头会用流动的动画效果展示。


防盗监测


机房会严格限制人员的进入。对于敏感区域,可以放置防盗红外或激光探头,当有人员通过,会立刻发起警报,起到防止进入和防盗的效果。报警激光对射防盗在各种场景中已经屡见不鲜了:




机架可用空间


服务器陆续上架后,会对机柜的空间产生占用和分隔。及时了解整个机房中每个机架的占用情况和空闲空间的大小情况,是非常重要的日常工作。通过3D来呈现就再适合不过了:我们把有服务器占用的空间用白色块填充,有空闲的空间根据大小不同用不同的色块填充,就有了下方的效果:



烟雾监控

现在的建筑中一般都有烟雾监控传感器,当有烟雾发生时会发生报警。下图模拟了当发生烟雾的情况,我们在着火点用一团烟雾来渲染,增加场景的逼真度。同时通过动画,来模拟烟雾的冒出情况。

Web 3D智能数字机房,HTML5+WebGL(ThreeJS)匠心打造 - 爱上编程技术图片

电源走线

连线管理可以包括强弱电、音视频的布线走线显示。每一个机柜的供电线布局走线,可以通过不同的颜色和走向进行显示。这样会比传统的表格或2d图形显示更加直观。


Web 3D智能数字机房,HTML5+WebGL(ThreeJS)匠心打造 - 爱上编程技术图片

资产管理功能

查看机房硬件、软件资源信息和实时数据。机房管理员可以快速查看设备运行状况,包括设计基本信息(IP地址、U数、运行软件信息等)和实时数据(CPU、硬盘、内存利用率、上下行带宽利用率、流速等),对设备进行上架下架。



动力环境监控

动力环境监控的对象主要是机房动力和环境设备等设备,像配电、UPS、空调、温湿度、漏水、门禁、安防、消防、防雷等等,这些通常会有独立的采集和监控系统,我需要做的是把动环的效果用3D呈现,并且和系统的真实数据进行对接。

温度云图模拟了热衰减的过程,并在地板上留下痕迹。同样,纵向的设备上也通过温度数值来生成色差不同的温度图贴在机架上。

Web 3D智能数字机房,HTML5+WebGL(ThreeJS)匠心打造 - 爱上编程技术图片

Web 3D智能数字机房,HTML5+WebGL(ThreeJS)匠心打造 - 爱上编程技术图片

Web 3D智能数字机房,HTML5+WebGL(ThreeJS)匠心打造 - 爱上编程技术图片Web 3D智能数字机房,HTML5+WebGL(ThreeJS)匠心打造 - 爱上编程技术图片Web 3D智能数字机房,HTML5+WebGL(ThreeJS)匠心打造 - 爱上编程技术图片

更多细节和功能改进后续赘述,感兴趣的可以留言或发邮件372518773@qq.com,欢迎一起探讨!如果大家想看到什么更多的效果也可以给我留言。时间有限,很多细节没办法写的很详细,请大家包涵。


Web 3D智能数字机房,HTML5+WebGL(ThreeJS)匠心打造

标签:会有   防止   信息   基本   机房   监控系统   网络设备   display   段落   

原文:http://blog.51cto.com/13593420/2067744

技术交流学习或者有任何问题欢迎加群

编程技术交流群 : 154514123 爱上编程      Java技术交流群 : 6128790  Java

广告推荐

讨论区