Web 3D机房，智能数字机房HTML5 WebGL(ThreeJS)匠心打造「建议收藏」

大家好，又见面了，我是你们的朋友全栈君。

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

机房3D效果图

机房线缆和走线架

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

机柜利用率

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

空调风向

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

防盗监测

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

机架可用空间

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

烟雾监控

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

电源走线

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

资产管理功能

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

动力环境监控

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

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

安防监控

对机房的摄像头监控画面实时查看，设备报警变红提示，巡检路径三维场景导航等功能，直观可视化操控设备，摄像头等。提升监控效率。

设备报警

巡更路径

Web 3D机房，智能数字机房HTML5+Threejs(WebGL) 项目实战

【课程介绍】
针对webgl的库threejs框架的Web 3D智能数字机房项目实战详细的讲解，随着IT信息技术和移动端的发展，Html5+3D(Webgl)技术已经悄然崛起，3D机房数据中心可视化应用越来越广泛，主要包括3D机房搭建，机柜、服务器、数据实时监控、机房线缆和走线架、机柜利用率、机架可用空间、机柜开关门、服务器信息查看，温湿度云图，防盗监测、空调风向、告警展示。

章节目录

大家可以点击【腾讯课堂】查看我的课程

更多案例