three.js,webGL講解機房微模塊的三維實現,3D庫房,3D機房，普通3D機房搭建，機櫃、伺服器、埠實時監控 數據聯動展示，機櫃動態添加、伺服器上下架，動力環境數據可視化展示（溫濕度雲圖，防盜門禁，配店，管線控制）、告警展示 ...
序：
上節課已經詳細描述了普通機房的實現過程，文章地址（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", "close
