three.js,webGL讲解机房微模块的三维实现,3D库房,3D机房，普通3D机房搭建，机柜、服务器、端口实时监控 数据联动展示，机柜动态添加、服务器上下架，动力环境数据可视化展示（温湿度云图，防盗门禁，配店，管线控制）、告警展示
序：
上节课已经详细描述了普通机房的实现过程，文章地址（https://www.cnblogs.com/yeyunfei/p/10473021.html）
紧接着上节课的内容 我们这节可来详细讲解机房微模块的三维实现
技术交流 [email protected]
交流微信：
如果你有什么要交流的心得 可邮件我
首先我们先看一下整体的效果图：
这是单个微模块的模拟最后的系统效果
下面我们进入正文，详细讲解创建过程（机房的以及其它动力环境的创建 前面的课程已经讲诉 这里不在累赘描述）
一、创建组件
正所谓造车得现有轮子，那么搭建整个机房得先创建一个个小的组件，最后组合成大的模块。我们的步骤是由内而外。
1.1、先创建服务器，大量的json参数 利于控制服务器的所有属性
1.2、服务器端口
var postParam=webApi.getPortsFromServerByServerid(serverid);//获取服务端口参数
2.1机柜模型实现
由于机柜的模型是可以运动分解的模型 这样模型的代码要稍微多一点 这样才能做到控制机柜的每一个有意义的零件
机柜模型代码如下：
机柜效果如下
2.2，接着我们的创建一个虚拟的机框模型，为了达到美工妹妹的效果 我们的虚拟机框还得放光发亮
知识点：这里用到了发光体 和 管道渲染的技术
var boderModel=THREE.commonFunc.borderLight(serverid);//这里就是创建机柜发光的边的模型 其实这是和机柜本身模型分开的 只是使用了机柜的参数
3.1组合成微模块 这样一个微模块就实现了
在这里我们预先微模块都是两行多列的 而且中间的距离是机柜厚度的2.5倍 所以我们只需要一个机柜的位置参数就可以了
/*
*获取机柜在模块总的位置
*position:[{1,1,uuid-xxxx-xxxx-xxxxx-xx},{1,2,uuid-xxxx-xxxx-xxxxx-xx},{1,3,uuid-xxxx-xxxx-xxxxx-xx}]...
这是一个数组，存储的是行和列 以及id
*/
var microModel=THREE.commonFunc.createMicroModule(serverid);
这样 微模块的雏形就创建完成啦，接着就是交给美工妹妹去优化配色方案 再修改
二、搭建组合数据中心
首先是环境模型
用json去创建机房环境
View Code
最后是 整个数据中心的效果：
也可创建综合类机房 有普通机柜 有微模块
效果如下：
三、逻辑功能实现
1、选择查看单个机柜，查看机柜详情，了解该机柜内的服务器排布情况
代码实现：
2、综合查看微模块的热力云图，空间使用情况，电力情况，制冷，承重等等。
3、服务器下架操作
4、服务器上架操作
5、服务器计划上架 计划下架操作
实现方式：
下节预告：
下节课主要讲解微模块的实现与功能
下级预告：
下节课还是讲解3D机房相关的知识，出一些不一样的展示效果。关注点在机柜服务器上 而外部的动力环境不做渲染
其它相关文章：
如何用webgl(three.js)搭建一个3D库房-第一课
如何用webgl(three.js)搭建一个3D库房,3D密集架,3D档案室,-第二课
使用webgl(three.js)搭建一个3D建筑，3D消防模拟——第三课
使用webgl(three.js)搭建一个3D智慧园区、3D建筑，3D消防模拟，web版3D,bim管理系统——第四课
如何用webgl(three.js)搭建不规则建筑模型，客流量热力图模拟
使用webgl(three.js)创建3D机房(升级版)-普通机房