释放双眼，带上耳机，听听看~！
序：
上节课已经详细描述了普通机房的实现过程，文章地址（https://www.cnblogs.com/yeyunfei/p/10473021.html）
紧接着上节课的内容 我们这节可来详细讲解机房微模块的三维实现
首先我们先看一下整体的效果图：
这是单个微模块的模拟最后的系统效果
下面我们进入正文，详细讲解创建过程（机房的以及其它动力环境的创建 前面的课程已经讲诉 这里不在累赘描述）
一、创建组件
正所谓造车得现有轮子，那么搭建整个机房得先创建一个个小的组件，最后组合成大的模块。我们的步骤是由内而外。
1.1、先创建服务器，大量的json参数 利于控制服务器的所有属性
var server={//服务器模型参数
\"show\": true,
\"uuid\": \"\",
\"name\": \"equipment_card_2_4\",
\"objType\": \"cube\",
\"length\": 60,
\"width\": 65,
\"height\": 20,
\"x\": 0,
\"y\": 300,
\"z\": 0,
\"style\": {
\"skinColor\": 9593611,
\"skin\": {
\"skin_up\": {
\"skinColor\": 9593611,
\"imgurl\": \"../../img/3dImg/rack_inside.jpg\"
},
\"skin_down\": {
\"skinColor\": 9593611,
\"imgurl\": \"../../img/3dImg/rack_inside.jpg\"
},
\"skin_fore\": {
\"skinColor\": 9593611,
\"imgurl\": \"../../img/3dImg/rack_inside.jpg\"
},
\"skin_behind\": {
\"skinColor\": 9593611,
\"imgurl\": \"../../img/3dImg/server2.jpg\"
},
\"skin_left\": {
\"skinColor\": 9593611,
\"imgurl\": \"../../img/3dImg/rack_inside.jpg\"
},
\"skin_right\": {
\"skinColor\": 9593611,
\"imgurl\": \"../../img/3dImg/rack_inside.jpg\"
}
}
},
\"showSortNub\": 4
};
var serverModel=WT.commonFunc.createServer(server);//服务器模型生成
1.2、服务器端口
var postParam=webApi.getPortsFromServerByServerid(serverid);//获取服务端口参数
WT.commonFunc.createPorts(portParam);//更具服务器id创建服务器端口
这样服务器的效果就出来了
2.1机柜模型实现
由于机柜的模型是可以运动分解的模型 这样模型的代码要稍微多一点 这样才能做到控制机柜的每一个有意义的零件
机柜模型代码如下：
{ show: true, name: \'cabinet3\', actionSign: \"cabinet1\", shellname: \'cabinet3_emptyCabinetshell\', uuid: \'\', // rotation: [{ direction: \'y\', degree: 0.25*Math.PI}],//旋转 uuid:\'\', objType: \'emptyCabinet2\', transparent: true, size: { length: 66, width: 70, height: 200, thick: 2 }, position: { x: 0, y: 305, z: 0 }, doors: { doorType: \'lr\',// ud上下门 lr左右门 单门可以缺省 doorSize: [1], doorname: [\'cabinet3_emptyCabinetdoor_01\'], skins: [{ skinColor: 0x333333, skin_fore: { imgurl: \"../../img/3dImg/rack_door_back.jpg\", }, skin_behind: { imgurl: \"../../img/3dImg/rack_front_door.jpg\", } }] }, style: { skinColor: 0xff0000, skin: { skinColor: 0xff0000, skin_up: { imgurl: \"../../img/3dImg/rack_door_back.jpg\" }, skin_down: { imgurl: \"../../img/3dImg/rack_door_back.jpg\" }, skin_fore: { skinColor: 0xff0000, imgurl: \"../../img/3dImg/rack1.png\" }, skin_behind: { skinColor: 0xff0000, imgurl: \"../../img/3dImg/rack2.png\" }, skin_left: { imgurl: \"../../img/3dImg/rack_door_back.jpg\" }, skin_right: { imgurl: \"../../img/3dImg/rack_door_back.jpg\" }, } } }
机柜效果如下
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去创建机房环境
[{ \"rotation\": [{ \"degree\": 0, \"direction\": \"x\" }, { \"degree\": 0, \"direction\": \"y\" }, { \"degree\": 0, \"direction\": \"z\" }], \"show\": true, \"length\": 220, \"scale\": { \"x\": 1, \"y\": 1, \"z\": 1 }, \"uuid\": \"\", \"name\": \"doorCaseTop\", \"width\": 24, \"x\": -300, \"y\": 220, \"z\": -350, \"style\": { \"skinColor\": 9095650, \"skin\": { \"skin_behind\": { \"skinColor\": 13819101 }, \"skin_up\": { \"skinColor\": 13819101 }, \"skin_left\": { \"skinColor\": 13819101 }, \"skin_fore\": { \"skinColor\": 13819101 }, \"skin_down\": { \"skinColor\": 13819101 }, \"skin_right\": { \"skinColor\": 13819101 } } }, \"objType\": \"cube\", \"height\": 5 }, { \"rotation\": [{ \"direction\": \"x\", \"degree\": 0 }, { \"direction\": \"y\", \"degree\": 0 }, { \"direction\": \"z\", \"degree\": 0 }], \"show\": true, \"length\": 20, \"scale\": { \"x\": 1, \"y\": 1, \"z\": 1 }, \"uuid\": \"\", \"name\": \"Leftwall\", \"width\": 810, \"x\": 490, \"y\": 120, \"z\": 50, \"style\": { \"skinColor\": 9095650, \"skin\": { \"skin_up\": { \"skinColor\": 14540253 }, \"skin_down\": { \"skinColor\": 14540253 }, \"skin_fore\": { \"skinColor\": 12434877 }, \"skin_behind\": { \"skinColor\": 12434877 }, \"skin_left\": { \"skinColor\": 14540253 }, \"skin_right\": { \"skinColor\": 12434877 } } }, \"objType\": \"cube\", \"height\": 240, \"showSortNub\": 1, \"animation\": null, \"dbclickEvents\": null, \"thick\": null, \"BindDevId\": null, \"BindDevName\": null, \"devInfo\": null, \"BindMeteId\": null, \"BindMeteName\": null }, { \"rotation\": { \"0\": { \"direction\": \"x\", \"degree\": 0 }, \"1\": { \"direction\": \"y\", \"degree\": 0 }, \"2\": { \"direction\": \"z\", \"degree\": 0 } }, \"show\": true, \"length\": 1000, \"scale\": { \"x\": 1, \"y\": 1, \"z\": 1 }, \"uuid\": \"\", \"childrens\": [{ \"op\": \"-\", \"show\": true, \"uuid\": \"\", \"name\": \"doorhole\", \"objType\": \"cube\", \"width\": 20, \"height\": 220, \"length\": 220, \"x\": -300, \"y\": -10, \"z\": 0, \"style\": { \"skinColor\": 9095650 } }, { \"op\": \"-\", \"show\": true, \"uuid\": \"\", \"name\": \"windowHole\", \"objType\": \"cube\", \"width\": 20, \"height\": 160, \"length\": 500, \"x\": 200, \"y\": 10, \"z\": 0, \"style\": { \"skinColor\": 9095650 } }], \"name\": \"forewall\", \"width\": 20, \"x\": 0, \"y\": 120, \"z\": -350, \"style\": { \"skinColor\": 9095650, \"skin\": { \"skin_up\": { \"skinColor\": 14737632 }, \"skin_down\": { \"skinColor\": 12434877 }, \"skin_fore\": { \"skinColor\": 12434877 }, \"skin_behind\": { \"skinColor\": 12434877 }, \"skin_left\": { \"skinColor\": 12434877 }, \"skin_right\": { \"skinColor\": 12434877 } } }, \"objType\": \"holeCube\", \"height\": 240, \"showSortNub\": 1, \"animation\": null, \"dbclickEvents\": null, \"thick\": null, \"BindDevId\": null, \"BindDevName\": null, \"devInfo\": null, \"BindMeteId\": null, \"BindMeteName\": null }, { \"rotation\": [{ \"direction\": \"x\", \"degree\": 0 }, { \"direction\": \"y\", \"degree\": 0 }, { \"direction\": \"z\", \"degree\": 0 }], \"show\": true, \"length\": 20, \"scale\": { \"x\": 1, \"y\": 1, \"z\": 1 }, \"uuid\": \"\", \"name\": \"Rightwall\", \"width\": 810, \"x\": -490, \"y\": 120, \"z\": 50, \"style\": { \"skinColor\": 9095650, \"skin\": { \"skin_up\": { \"skinColor\": 14540253 }, \"skin_down\": { \"skinColor\": 14540253 }, \"skin_fore\": { \"skinColor\": 12434877 }, \"skin_behind\": { \"skinColor\": 12434877 }, \"skin_left\": { \"skinColor\": 13224393 }, \"skin_right\": { \"skinColor\": 14540253 } } }, \"objType\": \"cube\", \"height\": 240, \"showSortNub\": 1, \"animation\": null, \"dbclickEvents\": null, \"thick\": null, \"BindDevId\": null, \"BindDevName\": null, \"devInfo\": null, \"BindMeteId\": null, \"BindMeteName\": null }, { \"rotation\": [{ \"direction\": \"x\", \"degree\": 0 }, { \"direction\": \"y\", \"degree\": 0 }, { \"direction\": \"z\", \"degree\": 0 }], \"show\": true, \"length\": 1800, \"scale\": { \"x\": 1, \"y\": 1, \"z\": 1 }, \"uuid\": \"\", \"name\": \"floor_2\", \"width\": 1600, \"x\": 32.156, \"y\": -8.708, \"z\": 11.662, \"style\": { \"skinColor\": 9095650, \"skin\": { \"skin_up\": { \"skinColor\": 9991439, \"imgurl\": \"../../img/3dImg/grasslight-big.jpg\", \"repeatx\": true, \"width\": 512, \"repeaty\": true, \"height\": 512 }, \"skin_down\": { \"skinColor\": 3184895, \"imgurl\": \"../../img/3dImg/grasslight-big.jpg\" }, \"skin_fore\": { \"skinColor\": 10592673 }, \"skin_behind\": { \"skinColor\": 2968869 }, \"skin_left\": { \"skinColor\": 2968869 }, \"skin_right\": { \"skinColor\": 2968869 } } }, \"objType\": \"cube\", \"height\": 10, \"showSortNub\": 1, \"animation\": null, \"dbclickEvents\": null, \"thick\": null, \"BindDevId\": null, \"BindDevName\": null, \"devInfo\": null, \"BindMeteId\": null, \"BindMeteName\": null }, { \"doors\": { \"skins\": [{ \"skin_behind\": { \"imgurl\": \"../../img/3dImg/rack_front_door.jpg\" }, \"skinColor\": 3355443, \"skin_fore\": { \"imgurl\": \"../../img/3dImg/rack_door_back.jpg\" } }], \"doorname\": [\"cabinet3_2_emptyCabinetdoor_01\"], \"doorType\": \"lr\", \"doorSize\": [1] }, \"size\": { \"length\": 66, \"width\": 70, \"thick\": 2, \"height\": 200 }, \"shellname\": \"cabinet3_2_emptyCabinetshell\", \"show\": true, \"name\": \"cabinet3_2\", \"scale\": { \"x\": 1, \"y\": 1, \"z\": 1 }, \"style\": { \"skinColor\": 16711680, \"skin\": { \"skin_behind\": { \"imgurl\": \"../../img/3dImg/rack_door_back.jpg\", \"skinColor\": 16711680 }, \"skin_up\": { \"imgurl\": \"../../img/3dImg/rack_door_back.jpg\" }, \"skinColor\": 16711680, \"skin_left\": { \"imgurl\": \"../../img/3dImg/rack_door_back.jpg\" }, \"skin_fore\": { \"imgurl\": \"../../img/3dImg/rack_door_back.jpg\", \"skinColor\": 16711680 }, \"skin_down\": { \"imgurl\": \"../../img/3dImg/rack_door_back.jpg\" }, \"skin_right\": { \"imgurl\": \"../../img/3dImg/rack_door_back.jpg\" } } }, \"position\": { \"x\": -100, \"y\": 105, \"z\": -80 }, \"uuid\": \"\", \"objType\": \"emptyCabinet\", \"transparent\": true }, { \"rotation\": [{ \"degree\": 0.3141592653589793, \"direction\": \"y\" }], \"name\": \"FireExtinguisher_3\", \"fileurl\": \"../../img/3dImg/OBJS/FireExtinguisher.json\", \"scale\": { \"x\": 15, \"y\": 12, \"z\": 15 }, \"position\": { \"x\": -460, \"y\": 8, \"z\": -250 }, \"objType\": \"jsonobj\" }, { \"rotation\": [{ \"degree\": 0.9424777960769379, \"direction\": \"y\" }], \"show\": true, \"name\": \"aircondition\", \"length\": 60, \"width\": 80, \"x\": -420, \"y\": 130, \"z\": 370, \"style\": { \"skinColor\": 16711422, \"skin\": { \"skin_fore\": { \"imgurl\": \"../../img/3dImg/aircondition.jpg\" } } }, \"uuid\": \"\", \"objType\": \"cube\", \"height\": 220 }, { \"rotation\": [{ \"degree\": 0, \"direction\": \"x\" }, { \"degree\": 0, \"direction\": \"y\" }, { \"degree\": 0, \"direction\": \"z\" }], \"show\": true, \"length\": 220, \"scale\": { \"x\": 1, \"y\": 1, \"z\": 1 }, \"uuid\": \"\", \"name\": \"doorCaseBottom\", \"width\": 24, \"x\": -300, \"y\": 5, \"z\": -350, \"style\": { \"skinColor\": 9095650, \"skin\": { \"skin_behind\": { \"skinColor\": 13819101 }, \"skin_up\": { \"skinColor\": 13819101 }, \"skin_left\": { \"skinColor\": 13819101 }, \"skin_fore\": { \"skinColor\": 13819101 }, \"skin_down\": { \"skinColor\": 13819101 }, \"skin_right\": { \"skinColor\": 13819101 } } }, \"objType\": \"cube\", \"height\": 5 }, { \"rotation\": [{ \"degree\": 0.3141592653589793, \"direction\": \"y\" }], \"name\": \"FireExtinguisher_2\", \"fileurl\": \"../../img/3dImg/OBJS/FireExtinguisher.json\", \"scale\": { \"x\": 15, \"y\": 12, \"z\": 15 }, \"position\": { \"x\": -460, \"y\": 8, \"z\": -230 }, \"objType\": \"jsonobj\" }, { \"show\": true, \"name\": \"equipment_card_3\", \"length\": 60, \"width\": 65, \"x\": -100, \"y\": 145, \"z\": -180, \"style\": { \"skinColor\": 9593611, \"skin\": { \"skin_behind\": { \"imgurl\": \"../../img/3dImg/server3.jpg\", \"skinColor\": 9593611 }, \"skin_up\": { \"imgurl\": \"../../img/3dImg/rack_inside.jpg\", \"skinColor\": 9593611 }, \"skin_left\": { \"imgurl\": \"../../img/3dImg/rack_inside.jpg\", \"skinColor\": 9593611 }, \"skin_fore\": { \"imgurl\": \"../../img/3dImg/rack_inside.jpg\", \"skinColor\": 9593611 }, \"skin_down\": { \"imgurl\": \"../../img/3dImg/rack_inside.jpg\", \"skinColor\": 9593611 }, \"skin_right\": { \"imgurl\": \"../../img/3dImg/rack_inside.jpg\", \"skinColor\": 9593611 } } }, \"uuid\": \"\", \"objType\": \"cube\", \"height\": 30 }, { \"rotation\": [{ \"degree\": 0.3141592653589793, \"direction\": \"y\" }], \"name\": \"FireExtinguisher_4\", \"fileurl\": \"../../img/3dImg/OBJS/FireExtinguisher.json\", \"scale\": { \"x\": 15, \"y\": 12, \"z\": 15 }, \"position\": { \"x\": -460, \"y\": 8, \"z\": -270 }, \"objType\": \"jsonobj\" }, { \"rotation\": [{ \"degree\": 0, \"direction\": \"x\" }, { \"degree\": 0, \"direction\": \"y\" }, { \"degree\": 0, \"direction\": \"z\" }], \"show\": true, \"length\": 40, \"scale\": { \"x\": 1, \"y\": 1, \"z\": 1 }, \"uuid\": \"\", \"name\": \"powerDCabinet1_87\", \"width\": 80, \"x\": 462, \"y\": 132, \"z\": -223, \"style\": { \"skinColor\": 9095650, \"skin\": { \"skin_behind\": { \"imgurl\": \"../../img/3dImg/pdg101.jpg\", \"skinColor\": 12639968 }, \"skin_up\": { \"skinColor\": 16777215 }, \"skin_left\": { \"imgurl\": \"../../img/3dImg/pdg102.jpg\", \"skinColor\": 13692656 }, \"skin_fore\": { \"imgurl\": \"../../img/3dImg/pdg103.jpg\", \"skinColor\": 12639968 }, \"skin_down\": { \"skinColor\": 12639968 }, \"skin_right\": { \"imgurl\": \"../../img/3dImg/pdg104.jpg\", \"skinColor\": 13692656 } } }, \"objType\": \"cube\", \"height\": 120 }, { \"show\": true, \"name\": \"equipment_card_2\", \"length\": 60, \"width\": 65, \"x\": -100, \"y\": 120, \"z\": -180, \"style\": { \"skinColor\": 9593611, \"skin\": { \"skin_behind\": { \"imgurl\": \"../../img/3dImg/server2.jpg\", \"skinColor\": 9593611 }, \"skin_up\": { \"imgurl\": \"../../img/3dImg/rack_inside.jpg\", \"skinColor\": 9593611 }, \"skin_left\": { \"imgurl\": \"../../img/3dImg/rack_inside.jpg\", \"skinColor\": 9593611 }, \"skin_fore\": { \"imgurl\": \"../../img/3dImg/rack_inside.jpg\", \"skinColor\": 9593611 }, \"skin_down\": { \"imgurl\": \"../../img/3dImg/rack_inside.jpg\", \"skinColor\": 9593611 }, \"skin_right\": { \"imgurl\": \"../../img/3dImg/rack_inside.jpg\", \"skinColor\": 9593611 } } }, \"uuid\": \"\", \"objType\": \"cube\", \"height\": 20 }, { \"doors\": { \"skins\": [{ \"skin_behind\": { \"imgurl\": \"../../img/3dImg/rack_front_door.jpg\" }, \"skinColor\": 3355443, \"skin_fore\": { \"imgurl\": \"../../img/3dImg/rack_door_back.jpg\" } }], \"doorname\": [\"cabinet1_5_emptyCabinetdoor_01\"], \"doorType\": \"lr\", \"doorSize\": [1] }, \"size\": { \"length\": 66, \"width\": 70, \"thick\": 2, \"height\": 200 }, \"shellname\": \"cabinet1_5_emptyCabinetshell\", \"show\": true, \"name\": \"cabinet1_5\", \"scale\": { \"x\": 1, \"y\": 1, \"z\": 1 }, \"style\": { \"skinColor\": 16711680, \"skin\": { \"skin_behind\": { \"imgurl\": \"../../img/3dImg/rack_door_back.jpg\", \"skinColor\": 16711680 }, \"skin_up\": { \"imgurl\": \"../../img/3dImg/rack_door_back.jpg\" }, \"skinColor\": 16711680, \"skin_left\": { \"imgurl\": \"../../img/3dImg/rack_door_back.jpg\" }, \"skin_fore\": { \"imgurl\": \"../../img/3dImg/rack_door_back.jpg\", \"skinColor\": 16711680 }, \"skin_down\": { \"imgurl\": \"../../img/3dImg/rack_door_back.jpg\" }, \"skin_right\": { \"imgurl\": \"../../img/3dImg/rack_door_back.jpg\" } } }, \"position\": { \"x\": 300, \"y\": 105, \"z\": 220 }, \"uuid\": \"\", \"objType\": \"emptyCabinet\", \"transparent\": true }, { \"values\": [], \"name\": \"btns\", \"objType\": \"BtnS\" }, { \"rotation\": [{ \"degree\": -3.141592653589793, \"direction\": \"x\" }, { \"degree\": 1.2246468525851679e-16, \"direction\": \"y\" }, { \"degree\": -3.141592653589793, \"direction\": \"z\" }], \"show\": true, \"length\": 50, \"scale\": { \"x\": 1, \"y\": 1, \"z\": 1 }, \"uuid\": \"\", \"name\": \"powerDCabinet2_88\", \"width\": 80, \"x\": 451, \"y\": 87, \"z\": -83, \"style\": { \"skinColor\": 9095650, \"skin\": { \"skin_behind\": { \"skinColor\": 16448496 }, \"skin_up\": { \"skinColor\": 16777215 }, \"skin_left\": { \"skinColor\": 16448496 }, \"skin_fore\": { \"imgurl\": \"../../img/3dImg/pdg201.jpg\", \"skinColor\": 16448496 }, \"skin_down\": { \"skinColor\": 12639968 }, \"skin_right\": { \"skinColor\": 16448496 } } }, \"objType\": \"cube\", \"height\": 160 }, { \"doors\": { \"skins\": [{ \"skin_behind\": { \"imgurl\": \"../../img/3dImg/rack_front_door.jpg\" }, \"skinColor\": 3355443, \"skin_fore\": { \"imgurl\": \"../../img/3dImg/rack_door_back.jpg\" } }], \"doorname\": [\"cabinet1_4_emptyCabinetdoor_01\"], \"doorType\": \"lr\", \"doorSize\": [1] }, \"size\": { \"length\": 66, \"width\": 70, \"thick\": 2, \"height\": 200 }, \"shellname\": \"cabinet1_4_emptyCabinetshell\", \"show\": true, \"name\": \"cabinet1_4\", \"scale\": { \"x\": 1, \"y\": 1, \"z\": 1 }, \"style\": { \"skinColor\": 16711680, \"skin\": { \"skin_behind\": { \"imgurl\": \"../../img/3dImg/rack_door_back.jpg\", \"skinColor\": 16711680 }, \"skin_up\": { \"imgurl\": \"../../img/3dImg/rack_door_back.jpg\" }, \"skinColor\": 16711680, \"skin_left\": { \"imgurl\": \"../../img/3dImg/rack_door_back.jpg\" }, \"skin_fore\": { \"imgurl\": \"../../img/3dImg/rack_door_back.jpg\", \"skinColor\": 16711680 }, \"skin_down\": { \"imgurl\": \"../../img/3dImg/rack_door_back.jpg\" }, \"skin_right\": { \"imgurl\": \"../../img/3dImg/rack_door_back.jpg\" } } }, \"position\": { \"x\": 300, \"y\": 105, \"z\": 120 }, \"uuid\": \"\", \"objType\": \"emptyCabinet\", \"transparent\": true }, { \"doors\": { \"skins\": [{ \"skin_behind\": { \"imgurl\": \"../../img/3dImg/rack_front_door.jpg\" }, \"skinColor\": 3355443, \"skin_fore\": { \"imgurl\": \"../../img/3dImg/rack_door_back.jpg\" } }], \"doorname\": [\"cabinet2_6_emptyCabinetdoor_01\"], \"doorType\": \"lr\", \"doorSize\": [1] }, \"size\": { \"length\": 66, \"width\": 70, \"thick\": 2, \"height\": 200 }, \"shellname\": \"cabinet2_6_emptyCabinetshell\", \"show\": true, \"name\": \"cabinet2_6\", \"scale\": { \"x\": 1, \"y\": 1, \"z\": 1 }, \"style\": { \"skinColor\": 16711680, \"skin\": { \"skin_behind\": { \"imgurl\": \"../../img/3dImg/rack_door_back.jpg\", \"skinColor\": 16711680 }, \"skin_up\": { \"imgurl\": \"../../img/3dImg/rack_door_back.jpg\" }, \"skinColor\": 16711680, \"skin_left\": { \"imgurl\": \"../../img/3dImg/rack_door_back.jpg\" }, \"skin_fore\": { \"imgurl\": \"../../img/3dImg/rack_door_back.jpg\", \"skinColor\": 16711680 }, \"skin_down\": { \"imgurl\": \"../../img/3dImg/rack_door_back.jpg\" }, \"skin_right\": { \"imgurl\": \"../../img/3dImg/rack_door_back.jpg\" } } }, \"position\": { \"x\": 100, \"y\": 105, \"z\": 320 }, \"uuid\": \"\", \"objType\": \"emptyCabinet\", \"transparent\": true }, { \"doors\": { \"skins\": [{ \"skin_behind\": { \"imgurl\": \"../../img/3dImg/rack_front_door.jpg\" }, \"skinColor\": 3355443, \"skin_fore\": { \"imgurl\": \"../../img/3dImg/rack_door_back.jpg\" } }], \"doorname\": [\"cabinet1_6_emptyCabinetdoor_01\"], \"doorType\": \"lr\", \"doorSize\": [1] }, \"size\": { \"length\": 66, \"width\": 70, \"thick\": 2, \"height\": 200 }, \"shellname\": \"cabinet1_6_emptyCabinetshell\", \"show\": true, \"name\": \"cabinet1_6\", \"scale\": { \"x\": 1, \"y\": 1, \"z\": 1 }, \"style\": { \"skinColor\": 16711680, \"skin\": { \"skin_behind\": { \"imgurl\": \"../../img/3dImg/rack_door_back.jpg\", \"skinColor\": 16711680 }, \"skin_up\": { \"imgurl\": \"../../img/3dImg/rack_door_back.jpg\" }, \"skinColor\": 16711680, \"skin_left\": { \"imgurl\": \"../../img/3dImg/rack_door_back.jpg\" }, \"skin_fore\": { \"imgurl\": \"../../img/3dImg/rack_door_back.jpg\", \"skinColor\": 16711680 }, \"skin_down\": { \"imgurl\": \"../../img/3dImg/rack_door_back.jpg\" }, \"skin_right\": { \"imgurl\": \"../../img/3dImg/rack_door_back.jpg\" } } }, \"position\": { \"x\": 300, \"y\": 105, \"z\": 320 }, \"uuid\": \"\", \"objType\": \"emptyCabinet\", \"transparent\": true }, { \"childrens\": [{ \"childrens\": [{ \"childrens\": [{ \"rotation\": [{ \"degree\": 0, \"direction\": \"x\" }, { \"degree\": 0, \"direction\": \"y\" }, { \"degree\": 0, \"direction\": \"z\" }], \"show\": true, \"radialSegments\": 8, \"scale\": { \"x\": 1, \"y\": 1, \"z\": 1 }, \"uuid\": \"\", \"points\": [{ \"x\": 0, \"y\": 0, \"z\": 0 }, { \"x\": 0, \"y\": 35, \"z\": 0 }], \"segments\": 64, \"name\": \"cM_桌椅1_63OBJCREN0OBJCREN0OBJCREN0\", \"closed\": false, \"style\": { \"skinColor\": 15790833 }, \"position\": { \"x\": 0, \"y\": 119.842, \"z\": 0 }, \"radius\": 3, \"objType\": \"tube\" }, { \"childrens\": [{ \"rotation\": [{ \"degree\": 0, \"direction\": \"x\" }, { \"degree\": 0, \"direction\": \"y\" }, { \"degree\": 0, \"direction\": \"z\" }], \"show\": true, \"radialSegments\": 8, \"scale\": { \"x\": 1, \"y\": 1, \"z\": 1 }, \"uuid\": \"\", \"points\": [{ \"x\": 0, \"y\": 20, \"z\": 0 }, { \"x\": 30, \"y\": 10, \"z\": 0 }, { \"x\": 40, \"y\": 0, \"z\": 0 }], \"segments\": 64, \"name\": \"cM_桌椅1_63OBJCREN0OBJCREN0OBJCREN1OBJCREN0\", \"closed\": false, \"style\": { \"skinColor\": 14676206 }, \"position\": { \"x\": 0, \"y\": 100, \"z\": 0 }, \"radius\": 2, \"objType\": \"tube\" }, { \"segmentsY\": 0, \"radiusBottom\": 4, \"segmentsX\": 100, \"rotation\": [{ \"degree\": 1.5707963267948963, \"direction\": \"x\" }, { \"degree\": 0, \"direction\": \"y\" }, { \"degree\": 0, \"direction\": \"z\" }], \"name\": \"cM_桌椅1_63OBJCREN0OBJCREN0OBJCREN1OBJCREN1\", \"scale\": { \"x\": 1, \"y\": 1, \"z\": 1 }, \"openEnded\": false, \"style\": { \"skinColor\": 16776960, \"skin\": { \"skin_up\": { \"skinColor\": 4342338 }, \"skin_side\": { \"skinColor\": 4342338 }, \"skin_down\": { \"skinColor\": 4342338 } } }, \"position\": { \"x\": 40.373, \"y\": 96.989, \"z\": -0.2281064684102727 }, \"objType\": \"cylinder\", \"radiusTop\": 4, \"height\": 4 }], \"rotation\": [{ \"degree\": 0, \"direction\": \"x\" }, { \"degree\": 0, \"direction\": \"y\" }, { \"degree\": 0, \"direction\": \"z\" }], \"show\": true, \"name\": \"cM_桌椅1_63OBJCREN0OBJCREN0OBJCREN1\", \"scale\": { \"x\": 1, \"y\": 1, \"z\": 1 }, \"position\": { \"x\": 0, \"y\": 0, \"z\": 0 }, \"uuid\": \"\", \"objType\": \"GroupObj\" }, { \"childrens\": [{ \"rotation\": [{ \"degree\": 0, \"direction\": \"x\" }, { \"degree\": 0, \"direction\": \"y\" }, { \"degree\": 0, \"direction\": \"z\" }], \"show\": true, \"radialSegments\": 8, \"scale\": { \"x\": 1, \"y\": 1, \"z\": 1 }, \"uuid\": \"\", \"points\": [{ \"x\": 0, \"y\": 20, \"z\": 0 }, { \"x\": 30, \"y\": 10, \"z\": 0 }, { \"x\": 40, \"y\": 0, \"z\": 0 }], \"segments\": 64, \"name\": \"cM_桌椅1_63OBJCREN0OBJCREN0OBJCREN2OBJCREN0\", \"closed\": false, \"style\": { \"skinColor\": 14676206 }, \"position\": { \"x\": 0, \"y\": 100, \"z\": 0 }, \"radius\": 2, \"objType\": \"tube\" }, { \"segmentsY\": 0, \"radiusBottom\": 4, \"segmentsX\": 100, \"rotation\": [{ \"degree\": 1.5707963267948963, \"direction\": \"x\" }, { \"degree\": 0, \"direction\": \"y\" }, { \"degree\": 0, \"direction\": \"z\" }], \"name\": \"cM_桌椅1_63OBJCREN0OBJCREN0OBJCREN2OBJCREN1\", \"scale\": { \"x\": 1, \"y\": 1, \"z\": 1 }, \"openEnded\": false, \"style\": { \"skinColor\": 16776960, \"skin\": { \"skin_up\": { \"skinColor\": 4342338 }, \"skin_side\": { \"skinColor\": 4342338 }, \"skin_down\": { \"skinColor\": 4342338 } } }, \"position\": { \"x\": 40.373337511555206, \"y\": 96.98891109282378, \"z\": -0.2281064684102727 }, \"objType\": \"cylinder\", \"radiusTop\": 4, \"height\": 4 }], \"rotation\": [{ \"degree\": -3.141592653589793, \"direction\": \"x\" }, { \"degree\": -0.9728629830197867, \"direction\": \"y\" }, { \"degree\": -3.141592653589793, \"direction\": \"z\" }], \"show\": true, \"name\": \"cM_桌椅1_63OBJCREN0OBJCREN0OBJCREN2\", \"scale\": { \"x\": 1, \"y\": 1, \"z\": 1 }, \"position\": { \"x\": 0, \"y\": 0, \"z\": 0 }, \"uuid\": \"\", \"objType\": \"GroupObj\" }, ]
View Code
最后是 整个数据中心的效果：
也可创建综合类机房 有普通机柜 有微模块
效果如下：
三、逻辑功能实现
1、选择查看单个机柜，查看机柜详情，了解该机柜内的服务器排布情况
代码实现：
if (modelBussiness.showSingleServerNeedVitures.length > 0) { WT3DObj.commonFunc.changeObjsOpacity(modelBussiness.showSingleServerNeedVitures, 0.2, 1, 200, function () { $.each(modelBussiness.showCabServers, function (_index, _obj) { _obj.visible = true; }); }); } _this.openCabDoor(_obj); if (modelBussiness.lastMouseInCurrentObj.name.indexOf(\"OBJCREN7\") > 0 || modelBussiness.lastMouseInCurrentObj.name.indexOf(\"OBJCREN8\") > 0) { this.commonFunc.opcabinetBackLeftdoor(_obj.doors.leftDoor); this.commonFunc.opcabinetBackRightdoor(_obj.doors.rightDoor); } else if (modelBussiness.lastMouseInCurrentObj.name.indexOf(\"OBJCREN9\") > 0) { this.commonFunc.opcabinetMaindoor(_obj.doors.mainDoor); } setTimeout(function () { if (_obj.doors.leftDoor.doorState == undefined || _obj.doors.leftDoor.doorState == \"close\") { if (_obj.doors.rightDoor.doorState == undefined || _obj.doors.rightDoor.doorState == \"close\") { if (_obj.doors.mainDoor.doorState == undefined || _obj.doors.mainDoor.doorState == \"close\") { modelBussiness.commonFunc.showCabnetDetail(_obj, function () { }); } } } }, 200);
2、综合查看微模块的热力云图，空间使用情况，电力情况，制冷，承重等等。
代码实现：
{ btnid: \"btn_reset\", btnTitle: \"场景复位\", btnimg: \"../../img/3dImg/reset.png\", sortnub: 0, btnType: \"system\", enable: true, show_event: function () { if (modelBussiness.lock == true) { layer.tips(\"当前正在运行\" + modelBussiness.currentLockDetail, \"#btn_space\"); return; } modelBussiness.currentLockDetail = \"场景复位\"; modelBussiness.lock = true; setTimeout(function () { modelBussiness.lock = false; }, 1000); modelBussiness.backBtn(); }, }, { btnid: \"btn_fps\", btnTitle: \"3D性能监测\", btnimg: \"../../img/3dImg/fps.png\", sortnub: 0, btnType: \"system\", enable: true, show_event: function () { var display = $(\"#Stats_output\").css(\"display\"); if (display == \"none\") { $(\"#Stats_output\").show(); } else { $(\"#Stats_output\").hide(); } }, }, { btnid: \"btn_space\", btnTitle: \"机柜利用率\", btnimg: \"../../img/3dImg/space.png\", sortnub: 0, btnType: \"system\", enable: true, show_event: function () { if (modelBussiness.lock == true) { layer.tips(\"当前正在运行\" + modelBussiness.currentLockDetail, \"#btn_space\"); return; } modelBussiness.currentLockDetail = \"机柜利用率\"; modelBussiness.lock = true; setTimeout(function () { modelBussiness.lock = false; }, 2000); modelBussiness.showSpaceRate(); }, }, { btnid: \"btn_usage\", btnTitle: \"可用空间\", btnimg: \"../../img/3dImg/usage.png\", sortnub: 0, btnType: \"system\", enable: true, show_event: function () { if (modelBussiness.lock == true) { layer.tips(\"当前正在运行\" + modelBussiness.currentLockDetail, \"#btn_usage\"); return; } modelBussiness.currentLockDetail = \"可用空间\"; modelBussiness.lock = true; setTimeout(function () { modelBussiness.lock = false; }, 2000); modelBussiness.showUsageMap(); }, }, { btnid: \"btn_lines\", btnTitle: \"走线管理\", btnimg: \"../../img/3dImg/connection.png\", sortnub: 0, btnType: \"system\", enable: true, show_event: function () { if (modelBussiness.lock == true) { layer.tips(\"当前正在运行\" + modelBussiness.currentLockDetail, \"#btn_lines\"); return; } modelBussiness.currentLockDetail = \"走线管理\"; modelBussiness.lock = true; setTimeout(function () { modelBussiness.lock = false; }, 1000); modelBussiness.showLines(); }, }, { btnid: \"btn_temperature\", btnTitle: \"温度云图\", btnimg: \"../../img/3dImg/temperature.png\", sortnub: 0, btnType: \"system\", enable: true, show_event: function () { if (modelBussiness.lock == true) { layer.tips(\"当前正在运行\" + modelBussiness.currentLockDetail, \"#btn_temperature\"); return; } modelBussiness.currentLockDetail = \"温度云图\"; modelBussiness.lock = true; setTimeout(function () { modelBussiness.lock = false; }, 2000); modelBussiness.showTemptureMap(); }, }, { btnid: \"btn_water\", btnTitle: \"湿度\", btnimg: \"../../img/3dImg/water.png\", sortnub: 0, btnType: \"system\", enable: true, show_event: function () { if (modelBussiness.lock == true) { layer.tips(\"当前正在运行\" + modelBussiness.currentLockDetail, \"#btn_water\"); return; } modelBussiness.currentLockDetail = \"湿度效果\"; modelBussiness.lock = true; setTimeout(function () { modelBussiness.lock = false; }, 2000); modelBussiness.showHumidity(); }, }, { btnid: \"btn_smokeAlarm\", btnTitle: \"烟雾模拟\", btnimg: \"../../img/3dImg/smoke.png\", sortnub: 0, btnType: \"system\", enable: true, show_event: function () { if (modelBussiness.lock == true) { layer.tips(\"当前正在运行\" + modelBussiness.currentLockDetail, \"#btn_smokeAlarm\"); return; } modelBussiness.currentLockDetail = \"烟雾模拟\"; modelBussiness.lock = true; setTimeout(function () { modelBussiness.lock = false; }, 2000); modelBussiness.showFireAlarm(); }, }, { btnid: \"btn_winds\", btnTitle: \"空调风向\", btnimg: \"../../img/3dImg/air.png\", sortnub: 0, btnType: \"system\", enable: true, show_event: function () { if (modelBussiness.lock == true) { layer.tips(\"当前正在运行\" + modelBussiness.currentLockDetail, \"#btn_winds\"); return; } modelBussiness.currentLockDetail = \"空调风向\"; modelBussiness.lock = true; setTimeout(function () { modelBussiness.lock = false; }, 1000); modelBussiness.showWinds(); }, }, //{ // btnid: \"btn_power\", // btnTitle: \"配店组\", // btnimg: \"../../img/3dImg/power.png\", // sortnub: 0, // btnType: \"system\", // enable: true, // show_event: function () { // modelBussiness.showWinds(); // }, //}, //{ // btnid: \"btn_alarm\", // btnTitle: \"告警\", // btnimg: \"../../img/3dImg/alarm.png\", // sortnub: 0, // btnType: \"system\", // enable: true, // show_event: function () { // modelBussiness.showWinds(); // }, //}, //{ // btnid: \"btn_person\", // btnTitle: \"巡检\", // btnimg: \"../../img/3dImg/person.png\", // sortnub: 0, // btnType: \"system\", // enable: true, // show_event: function () { // modelBussiness.showWinds(); // }, //},
3、服务器下架操作
代码实现：
var _this = modelBussiness; _this.currentShowServerNames = []; var cabinetName = cabinetobj.name; if (_this.Devs[cabinetName] && _this.Devs[cabinetName].devs && _this.Devs[cabinetName].devs.length > 0) { $.each(_this.Devs[cabinetName].devs, function (_index, _obj) { _obj.visible = true; _this.currentShowServerNames.push(_obj.name); }); } else { var devJsonModels = []; //1u 高度8.5 位置42 if (devs && devs.length > 0) { $.each(devs, function (_index, _obj) { var height = (_obj.devURange.max - _obj.devURange.min + 1) * 8.2; var positiony = height / 2 + 42 + (_obj.devURange.min - 1) * 8.5; var postioinx = cabinetobj.position.x; var postioinz = cabinetobj.position.z; var rotationy = cabinetobj.rotation.y + Math.PI; var name = cabinetobj.name + \"_Server_\" + _index; if (!_obj.devCustomSkin) { var servvers = [\"../img/3dImg/server2.jpg\", \"../img/3dImg/server3.jpg\", \"../img/3dImg/server1.jpg\"]; _obj.devCustomSkin = { up: \"../img/3dImg/rack_inside.jpg\", down: \"../img/3dImg/rack_inside.jpg\", fore: servvers[parseInt(Math.random() * 3)], behind: servvers[parseInt(Math.random() * 3)], left: \"../img/3dImg/server_side.jpg\", right: \"../img/3dImg/server_side.jpg\", } } var server = getSingleServerModel(cabinetobj.name + \"_Server_\" + _index, { \"x\": postioinx, \"y\": positiony, \"z\": postioinz }, height, rotationy, _obj.devId, _obj.devCustomSkin); server.BindDevId = _obj.devId; devJsonModels.push(server); _this.currentShowServerNames.push(name); }); WT3DObj.commonFunc.loadModelsByJsons(devJsonModels, { x: 0, y: 0, z: 0 }, { x: 0, y: 0, z: 0 }, true); _this.Devs[cabinetName] = { devs: WT3DObj.commonFunc.findObjectsByNames(_this.currentShowServerNames) }; } }
4、服务器上架操作
代码实现：
if (_this.needHideCabinets.length > 0) { WT3DObj.commonFunc.changeCameraPosition({ x: 2531, y: 3967, z: -1150 }, { x: -615, y: 0, z: -35 }, 1000, function () { $.each(_this.needHideCabinets, function (_index, _obj) { if (_obj.name.indexOf(\"_rate_\") < 0 && _obj.name.indexOf(\"_yearCube_\") < 0) { _obj.visible = true; } }); }); } if (_this.needHideobjs.length > 0) { _this.hideDevs(); WT3DObj.commonFunc.changeCameraPosition({ x: 2531, y: 3967, z: -1150 }, { x: -615, y: 0, z: -35 }, 1000, function () { $.each(_this.needHideobjs, function (_index, _obj) { if (_obj.name.indexOf(\"TCL_line_\") < 0 && _obj.name.indexOf(\"_wind\") < 0) { _obj.visible = true; if (_obj.children && _obj.children.length > 0) { $.each(_obj.children, function (_cindex, _cobj) { _cobj.visible = true; }); } } }); if (_this.currentShowCabinet) { _this.currentShowCabinet.visible = false; } WT3DObj.commonFunc.changeObjsOpacity(_this.needHideobjs, 0.01, 1, 1000, function () { _this.hideLines(); _this.hideWinds(); _this.hideUsageSpaceRate(); _this.hideSpaceRate(); }); }); }
5、服务器计划上架 计划下架操作
实现方式：
layer.closeAll(); console.log(result); var cabNoUse = {}; if (result && result.length && result.length > 0) { $.each(result, function (_index, _obj) { var _cab = wtserverAPI.getCabinetByUUID(modelBussiness.roomName, _obj.cabid); if (_cab && _cab.cabName) { var ageValue = []; if (_obj.uPositionUsed && _obj.uPositionUsed.length && _obj.uPositionUsed.length > 0) { for (var j = 0; j < _obj.uPositionUsed.length - 1; j++) { if (j == 0) { ageValue.push({ value: 1, max: _obj.uPositionUsed[0], min: _obj.uPositionUsed[0] }); } if (_obj.uPositionUsed[j + 1] - _obj.uPositionUsed[j] > 1) { ageValue.push({ value: 1, max: _obj.uPositionUsed[j + 1], min: _obj.uPositionUsed[j + 1] }); } else { ageValue[ageValue.length - 1].max = _obj.uPositionUsed[j + 1]; } } } cabNoUse[_cab.cabName] = ageValue; } }); } console.log(cabNoUse); for (var i = 0; i < allCabs.length; i++) { var itcobj = WT3DObj.commonFunc.findObject(allCabs[i]); var ageValue = []; if (cabNoUse[allCabs[i]]) { ageValue = cabNoUse[allCabs[i]]; } var style = { borderColor: 0x4444, outColor: 0xFFFFFF, outOprity: 0.1 }; if (itcobj) { _this.commonFunc.createUseageCube(allCabs[i], { x: 160, y: 380, z: 140 }, { x: itcobj.position.x, y: itcobj.position.y, z: itcobj.position.z }, { x: 0, y: 0, z: 0 }, ageValue, style, { timelong: 1000 }, i); } } }, function (err) { layer.closeAll(); var cabNoUse = {}; for (var i = 0; i < allCabs.length; i++) { var itcobj = WT3DObj.commonFunc.findObject(allCabs[i]); var ageValue = []; if (cabNoUse[allCabs[i]]) { ageValue = cabNoUse[allCabs[i]]; } var style = { borderColor: 0x4444, outColor: 0xFFFFFF, outOprity: 0.1 }; if (itcobj) { _this.commonFunc.createUseageCube(allCabs[i], { x: 160, y: 380, z: 140 }, { x: itcobj.position.x, y: itcobj.position.y, z: itcobj.position.z }, { x: 0, y: 0, z: 0 }, ageValue, style, { timelong: 1000 }, i); } } });
下节预告：
下节课主要讲解微模块的实现与功能
技术交流 1203193731@qq.com
交流微信：
如果你有什么要交流的心得 可邮件我
下级预告：
下节课还是讲解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机房(升级版)-普通机房
