使用webgl(three.js)建立3D機房，3D機房微模塊詳細介紹(升級版二)
序：javascript
上節課已經詳細描述了普通機房的實現過程，文章地址（http://www.javashuo.com/article/p-nkkikoeu-s.html）css
緊接着上節課的內容 咱們這節可來詳細講解機房微模塊的三維實現html
首先咱們先看一下總體的效果圖：java
這是單個微模塊的模擬最後的系統效果web
下面咱們進入正文，詳細講解建立過程（機房的以及其它動力環境的建立 前面的課程已經講訴 這裏不在累贅描述）shell
1、建立組件json
正所謂造車得現有輪子，那麼搭建整個機房得先建立一個個小的組件，最後組合成大的模塊。咱們的步驟是由內而外。數組
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.二、服務器端口微信
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);
這樣 微模塊的雛形就建立完成啦，接着就是交給美工妹妹去優化配色方案 再修改
2、搭建組合數據中心
首先是環境模型
用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" }, ]
最後是 整個數據中心的效果：
也可建立綜合類機房 有普通機櫃 有微模塊
效果以下：
3、邏輯功能實現
一、選擇查看單個機櫃，查看機櫃詳情，瞭解該機櫃內的服務器排布狀況
代碼實現：
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);
二、綜合查看微模塊的熱力雲圖，空間使用狀況，電力狀況，製冷，承重等等。
代碼實現：
{ 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(); // }, //},
三、服務器下架操做
代碼實現：
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) }; } }
四、服務器上架操做
代碼實現：
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(); }); }); }
五、服務器計劃上架 計劃下架操做
實現方式：
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管理系統——第四課
相關文章
- 1. 使用webgl(three.js)建立3D機房(升級版)-普通機房
- 2. 使用webgl(three.js)創建3D機房(升級版)-普通機房
- 3. 使用three.js建立3D機房模型-分享一
- 4. 使用three.js創建3D機房模型-分享一
- 5. 基於 HTML5 Canvas 的 3D WebGL 機房建立
- 6. 基於 HTML5 WebGL 的 3D 機房
- 7. HTML5+WebGL 3D機房開發實例
- 8. HTML5數據可視化第二彈：打造最美3D機房
- 9. 打造最美HTML5 3D機房 —— 第二季重磅迴歸
- 10. 打造最美HTML5 3D機房（第二季）
- 更多相關文章...
- • 網站主機 介紹 - 網站主機教程
- • DTD - XML 構建模塊 - DTD 教程
- • Java Agent入門實戰（一）-Instrumentation介紹與使用
- • 漫談MySQL的鎖機制
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
最新文章
- 1. No provider available from registry 127.0.0.1:2181 for service com.ddbuy.ser 解決方法
- 2. Qt5.7以上調用虛擬鍵盤(支持中文)，以及源碼修改(可拖動，水平縮放)
- 3. 軟件測試面試- 購物車功能測試用例設計
- 4. ElasticSearch（概念篇）：你知道的, 爲了搜索…
- 5. redux理解
- 6. gitee創建第一個項目
- 7. 支持向量機之硬間隔（一步步推導，通俗易懂）
- 8. Mysql 異步複製延遲的原因及解決方案
- 9. 如何在運行SEPM配置嚮導時將不可認的複雜數據庫密碼改爲簡單密碼
- 10. windows系統下tftp服務器使用
歡迎關注本站公眾號,獲取更多信息
相關文章