使用webgl(three.js)建立3D機房(升級版)-普通機房
序：javascript
目前市面上的數據中心主要分兩大類，一類屬於普通數據中心，機櫃按照XY軸 有序排放，一類屬於微模塊集合的數據中心，多個機櫃組合而成的微模塊。css
本節課主要詳細講解普通數據中心的可視化展現，瀏覽器直接查看機房實時3D數據。html
功能簡述：普通3D機房搭建，機櫃、服務器、端口實時監控 數據聯動展現，機櫃動態添加、服務器上下架，動力環境數據可視化展現（溫溼度雲圖，防盜門禁，配店，管線控制）、告警展現；java
技術難點：web
1、如何有效快速根據實際場景搭建機房模型數據庫
解決方案：封裝各代碼模型，複用代碼模型，爭取快速有效搭建機房json
2、如何接入實時數據canvas
解決方案：使用一次請求，變化更新，訂閱通知機制後端
3、如何有效控制各場景間的切換平滑過渡，無卡頓，無延遲api
解決方案：使用 狀態機 策略，有效控制狀態變動與回滾，及時把控各狀態之間的切換
4、如何控制加載速度、瀏覽器內存、上萬臺服務器場景，如何有效控制幀率與處理速度
解決方案：使用代碼模型，下降模型佔中空間，使用瓦片策略，實現所見即所載，減小提筆瀏覽器提筆次數，保證幀率與速度。
三維數據可視化執行的意義：
爲何須要可視化展現，我總結以下幾點：
a、實用性：直觀快速的展現數據，提示告警，快速定位問題，爲解決問題節省大量時間，
b、成本管理：成本對於企業來說是相當重要的，三維可視化能夠爲高層領導者，執行者提供最快捷的管理方案
c、去專業化：本着代碼改變世界的願望，可視化操控就是爲了讓更多人的可以看懂、操做所謂專業的東西，
d、科技：越是科技的東西，越須要直觀的展現，越是複雜的東西越須要簡單的描述。可視化偏偏解決了這個痛點。
e、體面：企業的數據大屏是企業的形象，三維可視化可快速提示企業高大上的企業形象，向客戶展現企業的實力與精緻，
d、輕便：這是技術的實現方式，使用電腦瀏覽器 或者手機瀏覽器直接查看三維機房，方便快捷
若有不妥之處，還望指出 交流郵箱：1203193731@qq.com
效果與功能展現：
1、機房建模
a、普通機房
數據中心代碼模型：
var models = [{ // 地板 "show": true, "uuid": "", "name": "DCR01_floor", "objType": "cube2", "length": 2350+400, "width": 2000+400, "height": 10, "x": 0, "y": 0, "z": 0, "style": { "skinColor": 16777215, "skin": { "skin_up": { "skinColor": 16777215, "side": 1, "opacity": 1, //"imgurl": "../../img/3dImg/proj/DCR01.png", "imgurl": "../img/3dImg/wall/floor5.jpg", "repeatx": true, "width": 20, "repeaty": true, "height": 30 }, "skin_down": { "skinColor": 16777215, "side": 1, "opacity": 1 }, "skin_fore": { "skinColor": 16777215, "side": 1, "opacity": 1 }, "skin_behind": { "skinColor": 16777215, "side": 1, "opacity": 1 }, "skin_left": { "skinColor": 16777215, "side": 1, "opacity": 1 }, "skin_right": { "skinColor": 16777215, "side": 1, "opacity": 1 } } }, "showSortNub": 1, "customType1": "", "customType2": "", "animation": null, "dbclickEvents": null, "rotation": [{ "direction": "x", "degree": 0 }, { "direction": "y", "degree": 0 }, { "direction": "z", "degree": 0 }], "thick": null, "scale": { "x": 1, "y": 1, "z": 1 }, "BindDevId": null, "BindDevName": null, "devInfo": null, "BindMeteId": null, "BindMeteName": null },/*空調開始*/ { "show": true, "uuid": "", "name": "DCR01_airConditionMain_1", "objType": "cube2", "length": 450, "width": 150, "height": 400, "x": 0, "y": 210, "z": -680, "style": { "skinColor": 16777215, "skin": { "skin_up": { "skinColor": 16777215, "side": 1, "opacity": 1, "imgurl": "../img/3dImg/airconfigTop.jpg" }, "skin_down": { "skinColor": 16777215, "side": 1, "opacity": 1, "imgurl": "../img/3dImg/rack_inside.jpg" }, "skin_fore": { "skinColor": 16777215, "side": 1, "opacity": 1, "imgurl": "../img/3dImg/rack_inside.jpg" }, "skin_behind": { "skinColor": 16777215, "side": 1, "opacity": 1, "imgurl": "../img/3dImg/rack_inside.jpg" }, "skin_left": { "skinColor": 16777215, "side": 1, "opacity": 1, "imgurl": "../img/3dImg/rack_inside.jpg" }, "skin_right": { "skinColor": 11579568, "side": 1, "opacity": 1, "imgurl": "../img/3dImg/airconfig.jpg" } } }, "showSortNub": 31, "customType1": "", "customType2": "", "animation": null, "dbclickEvents": null, "rotation": [{ "direction": "x", "degree": 0 }, { "direction": "y", "degree": 0 }, { "direction": "z", "degree": 0 }], "thick": null, "scale": { "x": 1, "y": 1, "z": 1 }, "BindDevId": null, "BindDevName": null, "devInfo": null, "BindMeteId": null, "BindMeteName": null }, { "show": true, "uuid": "", "name": "DCR01_airConditionLogo_1", "objType": "cube2", "length": 70, "width": 20, "height": 150, "x": 165.066, "y": 339.192, "z": -605.478, "style": { "skinColor": 16777215, "skin": { "skin_up": { "skinColor": 16777215, "side": 1, "opacity": 1, "imgurl": "../img/3dImg/airconfigLogoTop.jpg" }, "skin_down": { "skinColor": 16777215, "side": 1, "opacity": 1, "imgurl": "../img/3dImg/airconfigLogoTop.jpg" }, "skin_fore": { "skinColor": 16777215, "side": 1, "opacity": 1, "imgurl": "../img/3dImg/airconfigLogoTop.jpg" }, "skin_behind": { "skinColor": 16777215, "side": 1, "opacity": 1, "imgurl": "../img/3dImg/airconfigLogoTop.jpg" }, "skin_left": { "skinColor": 16777215, "side": 1, "opacity": 1, "imgurl": "../img/3dImg/airconfigLogoTop.jpg" }, "skin_right": { "skinColor": 11579568, "side": 1, "opacity": 1, "imgurl": "../img/3dImg/airconfigLogo.jpg" } } }, "showSortNub": 31, "customType1": "", "customType2": "", "animation": null, "dbclickEvents": null, "rotation": [{ "direction": "x", "degree": 0 }, { "direction": "y", "degree": 0 }, { "direction": "z", "degree": 0 }], "thick": null, "scale": { "x": 1, "y": 1, "z": 1 }, "BindDevId": null, "BindDevName": null, "devInfo": null, "BindMeteId": null, "BindMeteName": null }, { "show": true, "uuid": "", "name": "DCR01_airConditionMain_2", "objType": "cube2", "length": 450, "width": 150, "height": 400, "x": 1045, "y": 210, "z": -270, "style": { "skinColor": 16777215, "skin": { "skin_up": { "skinColor": 16777215, "side": 1, "opacity": 1, "imgurl": "../img/3dImg/airconfigTop.jpg" }, "skin_down": { "skinColor": 16777215, "side": 1, "opacity": 1, "imgurl": "../img/3dImg/rack_inside.jpg" }, "skin_fore": { "skinColor": 16777215, "side": 1, "opacity": 1, "imgurl": "../img/3dImg/rack_inside.jpg" }, "skin_behind": { "skinColor": 16777215, "side": 1, "opacity": 1, "imgurl": "../img/3dImg/rack_inside.jpg" }, "skin_left": { "skinColor": 16777215, "side": 1, "opacity": 1, "imgurl": "../img/3dImg/rack_inside.jpg" }, "skin_right": { "skinColor": 11579568, "side": 1, "opacity": 1, "imgurl": "../img/3dImg/airconfig.jpg" } } }, "showSortNub": 31, "customType1": "", "customType2": "", "animation": null, "dbclickEvents": null, "rotation": [{ "direction": "x", "degree": 0 }, { "direction": "y", "degree": -Math.PI / 2 }, { "direction": "z", "degree": 0 }], "thick": null, "scale": { "x": 1, "y": 1, "z": 1 }, "BindDevId": null, "BindDevName": null, "devInfo": null, "BindMeteId": null, "BindMeteName": null }, { "show": true, "uuid": "", "name": "DCR01_airConditionLogo_2", "objType": "cube2", "length": 70, "width": 20, "height": 150, "x": 975.066, "y": 339.192, "z": -110.478, "style": { "skinColor": 16777215, "skin": { "skin_up": { "skinColor": 16777215, "side": 1, "opacity": 1, "imgurl": "../img/3dImg/airconfigLogoTop.jpg" }, "skin_down": { "skinColor": 16777215, "side": 1, "opacity": 1, "imgurl": "../img/3dImg/airconfigLogoTop.jpg" }, "skin_fore": { "skinColor": 16777215, "side": 1, "opacity": 1, "imgurl": "../img/3dImg/airconfigLogoTop.jpg" }, "skin_behind": { "skinColor": 16777215, "side": 1, "opacity": 1, "imgurl": "../img/3dImg/airconfigLogoTop.jpg" }, "skin_left": { "skinColor": 16777215, "side": 1, "opacity": 1, "imgurl": "../img/3dImg/airconfigLogoTop.jpg" }, "skin_right": { "skinColor": 11579568, "side": 1, "opacity": 1, "imgurl": "../img/3dImg/airconfigLogo.jpg" } } }, "showSortNub": 31, "customType1": "", "customType2": "", "animation": null, "dbclickEvents": null, "rotation": [{ "direction": "x", "degree": 0 }, { "direction": "y", "degree": -Math.PI / 2 }, { "direction": "z", "degree": 0 }], "thick": null, "scale": { "x": 1, "y": 1, "z": 1 }, "BindDevId": null, "BindDevName": null, "devInfo": null, "BindMeteId": null, "BindMeteName": null }, /*空調結束*/ { /*牆面開始*/ "show": true, "uuid": "", "name": "DCR01_wall_1", "objType": "cube2", "length": 20, "width": 1555, // 2530 "height": 500, "x": -398, "y": 250, "z": -780, "style": { "skinColor": 16777215, "skin": { "skin_up": { "skinColor": 16777215, "side": 1, "opacity": 1 }, "skin_down": { "skinColor": 16777215, "side": 1, "opacity": 1 }, "skin_fore": { "skinColor": 16777215, "side": 1, "opacity": 1, "imgurl": "../img/3dImg/wall/wall16.jpg", "repeatx": true, "width": 10, "repeaty": true, "height": 1 }, "skin_behind": { "skinColor": 16777215, "side": 1, "opacity": 1, "imgurl": "../img/3dImg/wall/wall16.jpg", "repeatx": true, "width": 10, "repeaty": true, "height": 1 }, "skin_left": { "skinColor": 16777215, "side": 1, "opacity": 1 }, "skin_right": { "skinColor": 16777215, "side": 1, "opacity": 1 } } }, "showSortNub": 447, "customType1": "", "customType2": "", "animation": null, "dbclickEvents": null, "rotation": [{ "direction": "x", "degree": 0 }, { "direction": "y", "degree": Math.PI / 2 }, { "direction": "z", "degree": 0 }], "thick": null, "scale": { "x": 1, "y": 1, "z": 1 }, "BindDevId": null, "BindDevName": null, "devInfo": null, "BindMeteId": null, "BindMeteName": null }, { "show": true, "uuid": "", "name": "DCR01_wall_5", "objType": "cube2", "length": 20, "width": 395, "height": 500, "x": 985, "y": 250, "z": -780, "style": { "skinColor": 16777215, "skin": { "skin_up": { "skinColor": 16777215, "side": 1, "opacity": 1 }, "skin_down": { "skinColor": 16777215, "side": 1, "opacity": 1 }, "skin_fore": { "skinColor": 16777215, "side": 1, "opacity": 1, "imgurl": "../img/3dImg/wall/wall16.jpg", "repeatx": true, "width": 10, "repeaty": true, "height": 1 }, "skin_behind": { "skinColor": 16777215, "side": 1, "opacity": 1, "imgurl": "../img/3dImg/wall/wall16.jpg", "repeatx": true, "width": 10, "repeaty": true, "height": 1 }, "skin_left": { "skinColor": 16777215, "side": 1, "opacity": 1 }, "skin_right": { "skinColor": 16777215, "side": 1, "opacity": 1 } } }, "showSortNub": 447, "customType1": "", "customType2": "", "animation": null, "dbclickEvents": null, "rotation": [{ "direction": "x", "degree": 0 }, { "direction": "y", "degree": Math.PI / 2 }, { "direction": "z", "degree": 0 }], "thick": null, "scale": { "x": 1, "y": 1, "z": 1 }, "BindDevId": null, "BindDevName": null, "devInfo": null, "BindMeteId": null, "BindMeteName": null }, { "show": true, "uuid": "", "name": "DCR01_wall_6", // 門上牆 "objType": "cube2", "length": 20, "width": 416, "height": 90, "x": 584.406, "y": 454.771, "z": -780.278, "style": { "skinColor": 16777215, "skin": { "skin_up": { "skinColor": 16777215, "side": 1, "opacity": 1 }, "skin_down": { "skinColor": 16777215, "side": 1, "opacity": 1 }, "skin_fore": { "skinColor": 16777215, "side": 1, "opacity": 1, "imgurl": "../img/3dImg/wall/wall16.jpg", "repeatx": true, "width": 1, "repeaty": true, "height": 1 }, "skin_behind": { "skinColor": 16777215, "side": 1, "opacity": 1, "imgurl": "../img/3dImg/wall/wall16.jpg", "repeatx": true, "width": 1, "repeaty": true, "height": 1 }, "skin_left": { "skinColor": 16777215, "side": 1, "opacity": 1 }, "skin_right": { "skinColor": 16777215, "side": 1, "opacity": 1 } } }, "showSortNub": 467, "customType1": "", "customType2": "", "animation": null, "dbclickEvents": null, "rotation": [{ "direction": "x", "degree": 0 }, { "direction": "y", "degree": -Math.PI / 2 }, { "direction": "z", "degree": 0 }], "thick": null, "scale": { "x": 1, "y": 1, "z": 1 }, "BindDevId": null, "BindDevName": null, "devInfo": null, "BindMeteId": null, "BindMeteName": null }, { "show": true, "uuid": "", "name": "DCR01_wall_2", "objType": "cube2", "length": 20, "width": 2350, "height": 500, "x": 0, "y": 250, "z": 1000, "style": { "skinColor": 16777215, "skin": { "skin_up": { "skinColor": 16777215, "side": 1, "opacity": 1 }, "skin_down": { "skinColor": 16777215, "side": 1, "opacity": 1 }, "skin_fore": { "skinColor": 16777215, "side": 1, "opacity": 1, "imgurl": "../img/3dImg/wall/wall16.jpg", "repeatx": true, "width": 10, "repeaty": true, "height": 1 }, "skin_behind": { "skinColor": 16777215, "side": 1, "opacity": 1, "imgurl": "../img/3dImg/wall/wall16.jpg", "repeatx": true, "width": 10, "repeaty": true, "height": 1 }, "skin_left": { "skinColor": 16777215, "side": 1, "opacity": 1 }, "skin_right": { "skinColor": 16777215, "side": 1, "opacity": 1 } } }, "showSortNub": 447, "customType1": "", "customType2": "", "animation": null, "dbclickEvents": null, "rotation": [{ "direction": "x", "degree": 0 }, { "direction": "y", "degree": Math.PI / 2 }, { "direction": "z", "degree": 0 }], "thick": null, "scale": { "x": 1, "y": 1, "z": 1 }, "BindDevId": null, "BindDevName": null, "devInfo": null, "BindMeteId": null, "BindMeteName": null }, { "show": true, "uuid": "", "name": "DCR01_wall_3", "objType": "cube2", "length": 20, "width": 1795, "height": 500, "x": 1175, "y": 250, "z": 110, "style": { "skinColor": 16777215, "skin": { "skin_up": { "skinColor": 16777215, "side": 1, "opacity": 1 }, "skin_down": { "skinColor": 16777215, "side": 1, "opacity": 1 }, "skin_fore": { "skinColor": 16777215, "side": 1, "opacity": 1, "imgurl": "../img/3dImg/wall/wall16.jpg", "repeatx": true, "width": 10, "repeaty": true, "height": 1 }, "skin_behind": { "skinColor": 16777215, "side": 1, "opacity": 1, "imgurl": "../img/3dImg/wall/wall16.jpg", "repeatx": true, "width": 10, "repeaty": true, "height": 1 }, "skin_left": { "skinColor": 16777215, "side": 1, "opacity": 1 }, "skin_right": { "skinColor": 16777215, "side": 1, "opacity": 1 } } }, "showSortNub": 447, "customType1": "", "customType2": "", "animation": null, "dbclickEvents": null, "rotation": [{ "direction": "x", "degree": 0 }, { "direction": "y", "degree": 0 }, { "direction": "z", "degree": 0 }], "thick": null, "scale": { "x": 1, "y": 1, "z": 1 }, "BindDevId": null, "BindDevName": null, "devInfo": null, "BindMeteId": null, "BindMeteName": null }, { "show": true, "uuid": "", "name": "DCR01_wall_4", "objType": "cube2", "length": 20, "width": 1795, "height": 500, "x": -1175, "y": 250, "z": 110, "style": { "skinColor": 16777215, "skin": { "skin_up": { "skinColor": 16777215, "side": 1, "opacity": 1 }, "skin_down": { "skinColor": 16777215, "side": 1, "opacity": 1 }, "skin_fore": { "skinColor": 16777215, "side": 1, "opacity": 1, "imgurl": "../img/3dImg/wall/wall16.jpg", "repeatx": true, "width": 10, "repeaty": true, "height": 1 }, "skin_behind": { "skinColor": 16777215, "side": 1, "opacity": 1, "imgurl": "../img/3dImg/wall/wall16.jpg", "repeatx": true, "width": 10, "repeaty": true, "height": 1 }, "skin_left": { "skinColor": 16777215, "side": 1, "opacity": 1 }, "skin_right": { "skinColor": 16777215, "side": 1, "opacity": 1 } } }, "showSortNub": 447, "customType1": "", "customType2": "", "animation": null, "dbclickEvents": null, "rotation": [{ "direction": "x", "degree": 0 }, { "direction": "y", "degree": 0 }, { "direction": "z", "degree": 0 }], "thick": null, "scale": { "x": 1, "y": 1, "z": 1 }, "BindDevId": null, "BindDevName": null, "devInfo": null, "BindMeteId": null, "BindMeteName": null }, /*牆結束*/ { "show": true, "uuid": "", "name": "DCR01_door_1", "objType": "cube2", "length": 8, "width": 208, "height": 410, "x": 480, "y": 210, "z": -780.213, "style": { "skinColor": 16777215, "skin": { "skin_up": { "skinColor": 16777215, "side": 1, "opacity": 1, "imgurl": "../img/3dImg/rack_inside.jpg" }, "skin_down": { "skinColor": 16777215, "side": 1, "opacity": 1 }, "skin_fore": { "skinColor": 16777215, "side": 1, "opacity": 1, "imgurl": "../img/3dImg/door_right.png" }, "skin_behind": { "skinColor": 16777215, "side": 1, "opacity": 1, "imgurl": "../img/3dImg/door_left.png" }, "skin_left": { "skinColor": 16777215, "side": 1, "opacity": 1, "imgurl": "../img/3dImg/door_right.png" }, "skin_right": { "skinColor": 16777215, "side": 1, "opacity": 1, "imgurl": "../img/3dImg/door_right.png" } } }, "showSortNub": 1, "customType1": "", "customType2": "", "animation": null, "dbclickEvents": null, "rotation": [{ "direction": "x", "degree": 0 }, { "direction": "y", "degree": Math.PI / 2 }, { "direction": "z", "degree": 0 }], "thick": null, "scale": { "x": 1, "y": 1, "z": 1 }, "BindDevId": null, "BindDevName": null, "devInfo": null, "BindMeteId": null, "BindMeteName": null }, { "show": true, "uuid": "", "name": "DCR01_door_2", "objType": "cube2", "length": 8, "width": 208, "height": 410, "x": 680, "y": 210, "z": -780.213, "style": { "skinColor": 16777215, "skin": { "skin_up": { "skinColor": 16777215, "side": 1, "opacity": 1, "imgurl": "../img/3dImg/rack_inside.jpg" }, "skin_down": { "skinColor": 16777215, "side": 1, "opacity": 1 }, "skin_fore": { "skinColor": 16777215, "side": 1, "opacity": 1, "imgurl": "../img/3dImg/door_left.png" }, "skin_behind": { "skinColor": 16777215, "side": 1, "opacity": 1, "imgurl": "../img/3dImg/door_right.png" }, "skin_left": { "skinColor": 16777215, "side": 1, "opacity": 1 }, "skin_right": { "skinColor": 16777215, "side": 1, "opacity": 1 } } }, "showSortNub": 1, "customType1": "", "customType2": "", "animation": null, "dbclickEvents": null, "rotation": [{ "direction": "x", "degree": 0 }, { "direction": "y", "degree": Math.PI / 2 }, { "direction": "z", "degree": 0 }], "thick": null, "scale": { "x": 1, "y": 1, "z": 1 }, "BindDevId": null, "BindDevName": null, "devInfo": null, "BindMeteId": null, "BindMeteName": null }, { "objType": "jsonobj", "fileurl": "../img/3dImg/OBJS/FireExtinguisher.json", // 滅火器 "name": "TCL_mhq_1", "scale": { "x": 20, "y": 15, "z": 20 }, "position": { "x": 1045, "y": 9, "z": 400, }, "rotation": [{ "direction": "x", "degree": 0 }, { "direction": "y", "degree": 0.3141592653589793 }, { "direction": "z", "degree": 0 }], "showSortNub": 146, "show": true, "customType1": "", "customType2": "", "animation": null, "dbclickEvents": null, "BindDevId": null, "BindDevName": null, "devInfo": null, "BindMeteId": null, "BindMeteName": null }, { "objType": "jsonobj", "fileurl": "../img/3dImg/OBJS/FireExtinguisher.json", // 滅火器 "name": "TCL_mhq_2", "scale": { "x": 20, "y": 15, "z": 20 }, "position": { "x": 1045, "y": 9, "z": 420, }, "rotation": [{ "direction": "x", "degree": 0 }, { "direction": "y", "degree": 0.3141592653589793 }, { "direction": "z", "degree": 0 }], "showSortNub": 146, "show": true, "customType1": "", "customType2": "", "animation": null, "dbclickEvents": null, "BindDevId": null, "BindDevName": null, "devInfo": null, "BindMeteId": null, "BindMeteName": null }, { "show": false, "uuid": "", "name": "DCR01_airConditionMain_1_wind", // 風 "objType": "flowTube", "points": [{ "x": 0, "y": 0, "z": 0 }, { "x": 0, "y": 50, "z": 100 }, { "x": 0, "y": 50, "z": 400 }], "position": { "x": 0.791, "y": 378.066, "z": -680.816 }, "scale": { "x": 1, "y": 1, "z": 1 }, "rotation": [{ "direction": "x", "degree": 0 }, { "direction": "y", "degree": 0 }, { "direction": "z", "degree": 0 }], "style": { "skinColor": 16772846, "imgurl": "../img/3dImg/right1.png", "opacity": 1, "canvasSkin": { "cwidth": 1024, "cheight": 128, "cwNub": 16, "chNub": 16, "cMarginW": 0.2, "cMarginH": 0.2, "speed": 4, "fps": 40, "direction": "w", "forward": "f", "side": 2, "run": true, "bgcolor": "rgba(0, 108, 249, 0.12)" } }, "segments": 5, "radialSegments": 2, "closed": false, "radius": 200, "showSortNub": 20000, "customType1": "", "customType2": "", "animation": null, "dbclickEvents": null, "BindDevId": null, "BindDevName": null, "devInfo": null, "BindMeteId": null, "BindMeteName": null }, { "show": false, "uuid": "", "name": "DCR01_airConditionMain_2_wind", // 風 "objType": "flowTube", "points": [{ "x": 0, "y": 0, "z": 0 }, { "x": 0, "y": 50, "z": 100 }, { "x": 0, "y": 50, "z": 400 }], "position": { "x": 1045.791, "y": 378.066, "z": -270.816 }, "scale": { "x": 1, "y": 1, "z": 1 }, "rotation": [{ "direction": "x", "degree": 0 }, { "direction": "y", "degree": -Math.PI / 2 }, { "direction": "z", "degree": 0 }], "style": { "skinColor": 16772846, "imgurl": "../img/3dImg/right1.png", "opacity": 1, "canvasSkin": { "cwidth": 1024, "cheight": 128, "cwNub": 16, "chNub": 16, "cMarginW": 0.2, "cMarginH": 0.2, "speed": 4, "fps": 40, "direction": "w", "forward": "f", "side": 2, "run": true, "bgcolor": "rgba(0, 108, 249, 0.12)" } }, "segments": 5, "radialSegments": 2, "closed": false, "radius": 200, "showSortNub": 20000, "customType1": "", "customType2": "", "animation": null, "dbclickEvents": null, "BindDevId": null, "BindDevName": null, "devInfo": null, "BindMeteId": null, "BindMeteName": null }, { "show": false, "uuid": "", "name": "TCL_line_cube_1", // 機櫃排線管理 "objType": "cube2", "length": 120, "width": 1105, "height": 20, "x": 475, "y": 420, "z": 250, "style": { "skinColor": 16777215, "skin": { "skin_up": { "skinColor": 16777215, "side": 0, "opacity": 1 }, "skin_down": { "skinColor": 2580374, "side": 0, "opacity": 1, "imgurl": "../img/3dImg/back.png", "repeatx": true, "width": 1, "repeaty": true, "height": 10 }, "skin_fore": { "skinColor": 3374847, "side": 2, "opacity": 1 }, "skin_behind": { "skinColor": 3374847, "side": 2, "opacity": 1 }, "skin_left": { "skinColor": 3374847, "side": 0, "opacity": 1 }, "skin_right": { "skinColor": 3374847, "side": 0, "opacity": 1 } } }, "showSortNub": 20005, "customType1": "", "customType2": "", "animation": null, "dbclickEvents": null, "rotation": [{ "direction": "x", "degree": 0 }, { "direction": "y", "degree": 0 }, { "direction": "z", "degree": 0 }], "thick": null, "scale": { "x": 1, "y": 1, "z": 1 }, "BindDevId": null, "BindDevName": null, "devInfo": null, "BindMeteId": null, "BindMeteName": null }, { "show": false, "uuid": "", "name": "TCL_line_cube_2", // 機櫃排線管理 "objType": "cube2", "length": 120, "width": 1105, "height": 20, "x": 25, "y": 420, "z": 250, "style": { "skinColor": 16777215, "skin": { "skin_up": { "skinColor": 16777215, "side": 0, "opacity": 1 }, "skin_down": { "skinColor": 2580374, "side": 0, "opacity": 1, "imgurl": "../img/3dImg/back.png", "repeatx": true, "width": 1, "repeaty": true, "height": 10 }, "skin_fore": { "skinColor": 3374847, "side": 2, "opacity": 1 }, "skin_behind": { "skinColor": 3374847, "side": 2, "opacity": 1 }, "skin_left": { "skinColor": 3374847, "side": 0, "opacity": 1 }, "skin_right": { "skinColor": 3374847, "side": 0, "opacity": 1 } } }, "showSortNub": 20005, "customType1": "", "customType2": "", "animation": null, "dbclickEvents": null, "rotation": [{ "direction": "x", "degree": 0 }, { "direction": "y", "degree": 0 }, { "direction": "z", "degree": 0 }], "thick": null, "scale": { "x": 1, "y": 1, "z": 1 }, "BindDevId": null, "BindDevName": null, "devInfo": null, "BindMeteId": null, "BindMeteName": null }, { "show": false, "uuid": "", "name": "TCL_line_cube_3", // 機櫃排線管理 "objType": "cube2", "length": 120, "width": 1105, "height": 20, "x": -425, "y": 420, "z": 250, "style": { "skinColor": 16777215, "skin": { "skin_up": { "skinColor": 16777215, "side": 0, "opacity": 1 }, "skin_down": { "skinColor": 2580374, "side": 0, "opacity": 1, "imgurl": "../img/3dImg/back.png", "repeatx": true, "width": 1, "repeaty": true, "height": 10 }, "skin_fore": { "skinColor": 3374847, "side": 2, "opacity": 1 }, "skin_behind": { "skinColor": 3374847, "side": 2, "opacity": 1 }, "skin_left": { "skinColor": 3374847, "side": 0, "opacity": 1 }, "skin_right": { "skinColor": 3374847, "side": 0, "opacity": 1 } } }, "showSortNub": 20005, "customType1": "", "customType2": "", "animation": null, "dbclickEvents": null, "rotation": [{ "direction": "x", "degree": 0 }, { "direction": "y", "degree": 0 }, { "direction": "z", "degree": 0 }], "thick": null, "scale": { "x": 1, "y": 1, "z": 1 }, "BindDevId": null, "BindDevName": null, "devInfo": null, "BindMeteId": null, "BindMeteName": null }, { "show": false, "uuid": "", "name": "TCL_line_cube_4", // 機櫃排線管理 "objType": "cube2", "length": 120, "width": 1105, "height": 20, "x": -875, "y": 420, "z": 250, "style": { "skinColor": 16777215, "skin": { "skin_up": { "skinColor": 16777215, "side": 0, "opacity": 1 }, "skin_down": { "skinColor": 2580374, "side": 0, "opacity": 1, "imgurl": "../img/3dImg/back.png", "repeatx": true, "width": 1, "repeaty": true, "height": 10 }, "skin_fore": { "skinColor": 3374847, "side": 2, "opacity": 1 }, "skin_behind": { "skinColor": 3374847, "side": 2, "opacity": 1 }, "skin_left": { "skinColor": 3374847, "side": 0, "opacity": 1 }, "skin_right": { "skinColor": 3374847, "side": 0, "opacity": 1 } } }, "showSortNub": 20005, "customType1": "", "customType2": "", "animation": null, "dbclickEvents": null, "rotation": [{ "direction": "x", "degree": 0 }, { "direction": "y", "degree": 0 }, { "direction": "z", "degree": 0 }], "thick": null, "scale": { "x": 1, "y": 1, "z": 1 }, "BindDevId": null, "BindDevName": null, "devInfo": null, "BindMeteId": null, "BindMeteName": null }, { "show": false, "uuid": "", "name": "TCL_line_1_1", "objType": "tube", "points": [{ "x": 0, "y": 0, "z": -544 }, { "x": 0, "y": 0, "z": 202 }, { "x": 0, "y": 0, "z": 560 }], "position": { "x": 475.179, "y": 420.485, "z": 250 }, "scale": { "x": 1, "y": 1, "z": 1 }, "rotation": [{ "direction": "x", "degree": 0 }, { "direction": "y", "degree": 0 }, { "direction": "z", "degree": 0 }], "style": { "skinColor": 3407796, "imgurl": "../img/3dImg/water.jpg", "side": 2, "opacity": 1 }, "segments": 5, "radialSegments": 8, "closed": false, "radius": 5, "showSortNub": 58, "customType1": "", "customType2": "", "animation": null, "dbclickEvents": null, "BindDevId": null, "BindDevName": null, "devInfo": null, "BindMeteId": null, "BindMeteName": null }, { "show": false, "uuid": "", "name": "TCL_line_1_2", "objType": "tube", "points": [{ "x": 0, "y": 0, "z": -544 }, { "x": 0, "y": 0, "z": 202 }, { "x": 0, "y": 0, "z": 560 }], "position": { "x": 450.179, "y": 420.485, "z": 250 }, "scale": { "x": 1, "y": 1, "z": 1 }, "rotation": [{ "direction": "x", "degree": 0 }, { "direction": "y", "degree": 0 }, { "direction": "z", "degree": 0 }], "style": { "skinColor": 16774912, "imgurl": "../img/3dImg/water.jpg", "side": 2, "opacity": 1 }, "segments": 5, "radialSegments": 8, "closed": false, "radius": 5, "showSortNub": 58, "customType1": "", "customType2": "", "animation": null, "dbclickEvents": null, "BindDevId": null, "BindDevName": null, "devInfo": null, "BindMeteId": null, "BindMeteName": null }, { "show": false, "uuid": "", "name": "TCL_line_1_3", "objType": "tube", "points": [{ "x": 0, "y": 0, "z": -544 }, { "x": 0, "y": 0, "z": 202 }, { "x": 0, "y": 0, "z": 560 }], "position": { "x": 500.179, "y": 420.485, "z": 250 }, "scale": { "x": 1, "y": 1, "z": 1 }, "rotation": [{ "direction": "x", "degree": 0 }, { "direction": "y", "degree": 0 }, { "direction": "z", "degree": 0 }], "style": { "skinColor": 10879490, "imgurl": "../img/3dImg/water.jpg", "side": 2, "opacity": 1 }, "segments": 5, "radialSegments": 8, "closed": false, "radius": 5, "showSortNub": 58, "customType1": "", "customType2": "", "animation": null, "dbclickEvents": null, "BindDevId": null, "BindDevName": null, "devInfo": null, "BindMeteId": null, "BindMeteName": null }, { "show": false, "uuid": "", "name": "TCL_line_2_1", "objType": "tube", "points": [{ "x": 0, "y": 0, "z": -544 }, { "x": 0, "y": 0, "z": 202 }, { "x": 0, "y": 0, "z": 560 }], "position": { "x": 25.179, "y": 420.485, "z": 250 }, "scale": { "x": 1, "y": 1, "z": 1 }, "rotation": [{ "direction": "x", "degree": 0 }, { "direction": "y", "degree": 0 }, { "direction": "z", "degree": 0 }], "style": { "skinColor": 3407796, "imgurl": "../img/3dImg/water.jpg", "side": 2, "opacity": 1 }, "segments": 5, "radialSegments": 8, "closed": false, "radius": 5, "showSortNub": 58, "customType1": "", "customType2": "", "animation": null, "dbclickEvents": null, "BindDevId": null, "BindDevName": null, "devInfo": null, "BindMeteId": null, "BindMeteName": null }, { "show": false, "uuid": "", "name": "TCL_line_2_2", "objType": "tube", "points": [{ "x": 0, "y": 0, "z": -544 }, { "x": 0, "y": 0, "z": 202 }, { "x": 0, "y": 0, "z": 560 }], "position": { "x": 0.179, "y": 420.485, "z": 250 }, "scale": { "x": 1, "y": 1, "z": 1 }, "rotation": [{ "direction": "x", "degree": 0 }, { "direction": "y", "degree": 0 }, { "direction": "z", "degree": 0 }], "style": { "skinColor": 16774912, "imgurl": "../img/3dImg/water.jpg", "side": 2, "opacity": 1 }, "segments": 5, "radialSegments": 8, "closed": false, "radius": 5, "showSortNub": 58, "customType1": "", "customType2": "", "animation": null, "dbclickEvents": null, "BindDevId": null, "BindDevName": null, "devInfo": null, "BindMeteId": null, "BindMeteName": null }, { "show": false, "uuid": "", "name": "TCL_line_2_3", "objType": "tube", "points": [{ "x": 0, "y": 0, "z": -544 }, { "x": 0, "y": 0, "z": 202 }, { "x": 0, "y": 0, "z": 560 }], "position": { "x": 50.179, "y": 420.485, "z": 250 }, "scale": { "x": 1, "y": 1, "z": 1 }, "rotation": [{ "direction": "x", "degree": 0 }, { "direction": "y", "degree": 0 }, { "direction": "z", "degree": 0 }], "style": { "skinColor": 10879490, "imgurl": "../img/3dImg/water.jpg", "side": 2, "opacity": 1 }, "segments": 5, "radialSegments": 8, "closed": false, "radius": 5, "showSortNub": 58, "customType1": "", "customType2": "", "animation": null, "dbclickEvents": null, "BindDevId": null, "BindDevName": null, "devInfo": null, "BindMeteId": null, "BindMeteName": null }, { "show": false, "uuid": "", "name": "TCL_line_3_1", "objType": "tube", "points": [{ "x": 0, "y": 0, "z": -544 }, { "x": 0, "y": 0, "z": 202 }, { "x": 0, "y": 0, "z": 560 }], "position": { "x": -425.179, "y": 420.485, "z": 250 }, "scale": { "x": 1, "y": 1, "z": 1 }, "rotation": [{ "direction": "x", "degree": 0 }, { "direction": "y", "degree": 0 }, { "direction": "z", "degree": 0 }], "style": { "skinColor": 3407796, "imgurl": "../img/3dImg/water.jpg", "side": 2, "opacity": 1 }, "segments": 5, "radialSegments": 8, "closed": false, "radius": 5, "showSortNub": 58, "customType1": "", "customType2": "", "animation": null, "dbclickEvents": null, "BindDevId": null, "BindDevName": null, "devInfo": null, "BindMeteId": null, "BindMeteName": null }, { "show": false, "uuid": "", "name": "TCL_line_3_2", "objType": "tube", "points": [{ "x": 0, "y": 0, "z": -544 }, { "x": 0, "y": 0, "z": 202 }, { "x": 0, "y": 0, "z": 560 }], "position": { "x": -450.179, "y": 420.485, "z": 250 }, "scale": { "x": 1, "y": 1, "z": 1 }, "rotation": [{ "direction": "x", "degree": 0 }, { "direction": "y", "degree": 0 }, { "direction": "z", "degree": 0 }], "style": { "skinColor": 16774912, "imgurl": "../img/3dImg/water.jpg", "side": 2, "opacity": 1 }, "segments": 5, "radialSegments": 8, "closed": false, "radius": 5, "showSortNub": 58, "customType1": "", "customType2": "", "animation": null, "dbclickEvents": null, "BindDevId": null, "BindDevName": null, "devInfo": null, "BindMeteId": null, "BindMeteName": null }, { "show": false, "uuid": "", "name": "TCL_line_3_3", "objType": "tube", "points": [{ "x": 0, "y": 0, "z": -544 }, { "x": 0, "y": 0, "z": 202 }, { "x": 0, "y": 0, "z": 560 }], "position": { "x": -400.179, "y": 420.485, "z": 250 }, "scale": { "x": 1, "y": 1, "z": 1 }, "rotation": [{ "direction": "x", "degree": 0 }, { "direction": "y", "degree": 0 }, { "direction": "z", "degree": 0 }], "style": { "skinColor": 10879490, "imgurl": "../img/3dImg/water.jpg", "side": 2, "opacity": 1 }, "segments": 5, "radialSegments": 8, "closed": false, "radius": 5, "showSortNub": 58, "customType1": "", "customType2": "", "animation": null, "dbclickEvents": null, "BindDevId": null, "BindDevName": null, "devInfo": null, "BindMeteId": null, "BindMeteName": null }, { "show": false, "uuid": "", "name": "TCL_line_4_1", "objType": "tube", "points": [{ "x": 0, "y": 0, "z": -544 }, { "x": 0, "y": 0, "z": 202 }, { "x": 0, "y": 0, "z": 560 }], "position": { "x": -875.179, "y": 420.485, "z": 250 }, "scale": { "x": 1, "y": 1, "z": 1 }, "rotation": [{ "direction": "x", "degree": 0 }, { "direction": "y", "degree": 0 }, { "direction": "z", "degree": 0 }], "style": { "skinColor": 3407796, "imgurl": "../img/3dImg/water.jpg", "side": 2, "opacity": 1 }, "segments": 5, "radialSegments": 8, "closed": false, "radius": 5, "showSortNub": 58, "customType1": "", "customType2": "", "animation": null, "dbclickEvents": null, "BindDevId": null, "BindDevName": null, "devInfo": null, "BindMeteId": null, "BindMeteName": null }, { "show": false, "uuid": "", "name": "TCL_line_4_2", "objType": "tube", "points": [{ "x": 0, "y": 0, "z": -544 }, { "x": 0, "y": 0, "z": 202 }, { "x": 0, "y": 0, "z": 560 }], "position": { "x": -900.179, "y": 420.485, "z": 250 }, "scale": { "x": 1, "y": 1, "z": 1 }, "rotation": [{ "direction": "x", "degree": 0 }, { "direction": "y", "degree": 0 }, { "direction": "z", "degree": 0 }], "style": { "skinColor": 16774912, "imgurl": "../img/3dImg/water.jpg", "side": 2, "opacity": 1 }, "segments": 5, "radialSegments": 8, "closed": false, "radius": 5, "showSortNub": 58, "customType1": "", "customType2": "", "animation": null, "dbclickEvents": null, "BindDevId": null, "BindDevName": null, "devInfo": null, "BindMeteId": null, "BindMeteName": null }, { "show": false, "uuid": "", "name": "TCL_line_4_3", "objType": "tube", "points": [{ "x": 0, "y": 0, "z": -544 }, { "x": 0, "y": 0, "z": 202 }, { "x": 0, "y": 0, "z": 560 }], "position": { "x": -850.179, "y": 420.485, "z": 250 }, "scale": { "x": 1, "y": 1, "z": 1 }, "rotation": [{ "direction": "x", "degree": 0 }, { "direction": "y", "degree": 0 }, { "direction": "z", "degree": 0 }], "style": { "skinColor": 10879490, "imgurl": "../img/3dImg/water.jpg", "side": 2, "opacity": 1 }, "segments": 5, "radialSegments": 8, "closed": false, "radius": 5, "showSortNub": 58, "customType1": "", "customType2": "", "animation": null, "dbclickEvents": null, "BindDevId": null, "BindDevName": null, "devInfo": null, "BindMeteId": null, "BindMeteName": null }, ]; // 添加機櫃 for (var i = 1; i <= 6; i++) { var showface = -1; if (i == 6) { showface = 0; } var _cab = getCabinetModel("DCR01_cab_A_" + i, // 獲取機櫃靜態模型 { x: 1, y: 1, z: 1 }, { "x": 475, "y": 210, "z": -60 + (i - 1) * 155 }, [{ "direction": "y", "degree": Math.PI }], showface, roomName); models.push(_cab); var _cabinet = wtserverAPI.CabinetBoxHandlerCacheData["c_" + roomName + "_" + "DCR01_cab_A_" + i]; var devsNubs = 0; if (_cabinet && _cabinet.devChildren) { devsNubs = _cabinet.devChildren.length; } if (devsNubs > 0) { var serversGroup = getServerModel("DCR01_cab_A_" + i + "_sGroup", 0, { "x": 475, "y": 210, "z": -60 + (i - 1) * 155 }, { x: 1, y: 1, z: 1 }, Math.PI); // 給有設備的機櫃貼圖? models.push(serversGroup); } } models.push(getCabinetModel("DCR01_cab_A_26", // 獲取機櫃靜態模型 MF { x: 1, y: 1, z: 1 }, { "x": 475, "y": 210, "z": -215 }, [{ "direction": "y", "degree": Math.PI }], 1, roomName)); models.push(getCabinetModel("DCR01_cab_A_27", // 獲取機櫃靜態模型 { x: 1, y: 1, z: 1 }, { "x": 25, "y": 210, "z": -215 }, [{ "direction": "y", "degree": Math.PI }], 1, roomName)); for (var i = 1; i <= 6; i++) { var showface = -1; if (i == 6) { showface = 0; } var _cab = getCabinetModel("DCR01_cab_A_" + (i + 6), // 獲取機櫃靜態模型 { x: 1, y: 1, z: 1 }, { "x": 25, "y": 210, "z": -60 + (i - 1) * 155 }, [{ "direction": "y", "degree": Math.PI }], showface, roomName); models.push(_cab); var _cabinet = wtserverAPI.CabinetBoxHandlerCacheData["c_" + roomName + "_" + "DCR01_cab_A_" + (i + 6)]; var devsNubs = 0; if (_cabinet && _cabinet.devChildren) { devsNubs = _cabinet.devChildren.length; } if (devsNubs > 0) { var serversGroup = getServerModel("DCR01_cab_A_" + i + "_sGroup", 0, { "x": 25, "y": 210, "z": -60 + (i - 1) * 155 }, { x: 1, y: 1, z: 1 }, Math.PI); // 給有設備的機櫃貼圖? models.push(serversGroup); } } for (var i = 1; i <= 6; i++) { var showface = -1; if (i == 1) { showface = 1; } else if (i == 6) { showface = 0; } var _cab = getCabinetModel("DCR01_cab_A_" + (i + 12), // 獲取機櫃靜態模型 { x: 1, y: 1, z: 1 }, { "x": -435, "y": 210, "z": -60 + (i - 1) * 155 }, [{ "direction": "y", "degree": Math.PI }], showface, roomName); models.push(_cab); var _cabinet = wtserverAPI.CabinetBoxHandlerCacheData["c_" + roomName + "_" + "DCR01_cab_A_" + (i + 12)]; var devsNubs = 0; if (_cabinet && _cabinet.devChildren) { devsNubs = _cabinet.devChildren.length; } if (devsNubs > 0) { var serversGroup = getServerModel("DCR01_cab_A_" + i + "_sGroup", 0, { "x": -425, "y": 210, "z": -60 + (i - 1) * 155 }, { x: 1, y: 1, z: 1 }, Math.PI); // 給有設備的機櫃貼圖? models.push(serversGroup); } } for (var i = 1; i <= 7; i++) { var showface = -1; if (i == 1) { showface = 1; } else if (i == 7) { showface = 0; } var _cab = getCabinetModel("DCR01_cab_A_" + (i + 18), // 獲取機櫃靜態模型 { x: 1, y: 1, z: 1 }, { "x": -890, "y": 210, "z": -215 + (i - 1) * 155 }, [{ "direction": "y", "degree": Math.PI }], showface, roomName); models.push(_cab); var _cabinet = wtserverAPI.CabinetBoxHandlerCacheData["c_" + roomName + "_" + "DCR01_cab_A_" + (i + 18)]; var devsNubs = 0; if (_cabinet && _cabinet.devChildren) { devsNubs = _cabinet.devChildren.length; } if (devsNubs > 0) { var serversGroup = getServerModel("DCR01_cab_A_" + i + "_sGroup", 0, { "x": -890, "y": 210, "z": -215 + (i - 1) * 155 }, { x: 1, y: 1, z: 1 }, Math.PI); // 給有設備的機櫃貼圖? models.push(serversGroup); } } //優化模型 MF>這樣怎麼就優化了模型 var oldobjnames = []; for (var i = 1; i <= 27; i++) { oldobjnames.push("DCR01_cab_A_" + i); } models.push({ show: true, objType: "MergeModels", oldObjNames: oldobjnames });
b、實現不規則機房建模
下面是環境場景多的狀況下 創建的模型
咱們推動攝像機 展現一個局部的模型狀況
畫中畫效果 在3D模型內展現視頻 或者電腦桌面 或其它
c、微模塊機房建模（下節課重點講述）
d、綜合機房（含有微模塊與普通機櫃）
2、鼠標滑過機櫃，顯示機櫃概要信息
3、雙擊機櫃，顯示機櫃詳情
4、打開機櫃門 顯示機櫃內部服務器詳細信息
5、機櫃利用率展現
代碼實現：
//cabnames 表示名稱
ModelBussiness.prototype.showSpaceRate = function () {
var _this = this;
var cabnames = wtserverAPI.cabNames;
if (_this.rateSpaceState == 0) {
_this.rateSpaceState = 1;
$("#backBtn").fadeIn();
layer.closeAll();
$("#toolbar").fadeOut();
//隱藏全部
_this.hideAllCabinet("aaaa", function () {
if (_this.rateSpaceCubeNames.length <= 0) { //獲取利用率
var loadindex = layer.load();
wtserverAPI.CabRate(modelBussiness.roomName, function (result) {
layer.closeAll();
console.log(result);
var cabRates = {};
if (result && result.length && result.length > 0) {
$.each(result, function (_index, _obj) {
var _cab = wtserverAPI.getCabinetByUUID(modelBussiness.roomName, _obj.cabid);
if (_cab && _cab.cabName) {
cabRates[_cab.cabName] = _obj.useRate;
}
});
}
console.log(cabRates);
for (var i = 0; i < cabnames.length; i++) {
var itcobj = WT3DObj.commonFunc.findObject(cabnames[i]);
var rateValue = 0;
if (cabRates[cabnames[i]]) {
rateValue = cabRates[cabnames[i]];
}
var style = {
borderColor: 0xffffff,
innerColor: 0x6495ed,
innerOprity: 1,
outColor: 0xffffff,
outOprity: 0.1
};
_this.commonFunc.createRateCube(cabnames[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 },
rateValue,
style, { timelong: 1000 });
}
}, function (err) {
layer.closeAll();
var cabRates = {};
//if (result && result.length && result.length > 0) {
// $.each(result, function (_index, _obj) {
// var _cab = wtserverAPI.getCabinetByUUID(modelBussiness.roomName, _obj.cabid);
// if (_cab && _cab.cabName) {
// cabRates[_cab.cabName] = _obj.useRate;
// }
// });
//}
console.log(cabRates);
for (var i = 0; i < cabnames.length; i++) {
var itcobj = WT3DObj.commonFunc.findObject(cabnames[i]);
var rateValue = 0;
if (cabRates[cabnames[i]]) {
rateValue = cabRates[cabnames[i]];
}
var style = {
borderColor: 0xffffff,
innerColor: 0x6495ed,
innerOprity: 1,
outColor: 0xffffff,
outOprity: 0.1
};
_this.commonFunc.createRateCube(cabnames[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 },
rateValue,
style, { timelong: 1000 });
}
});
}
else {
for (var i = 0; i < cabnames.length; i++) {
var rateValue = Math.random();
var style = {
borderColor: 0xffffff,
innerColor: 0x6495ed,
innerOprity: 1,
outColor: 0xffffff,
outOprity: 0.1
};
var itcobj = WT3DObj.commonFunc.findObject(cabnames[i]);
_this.commonFunc.createRateCube(cabnames[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 },
rateValue,
style, { timelong: 1000 });
}
}
});
}
else {
_this.hideSpaceRate();
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;
}
});
});
}
}
}
6、機櫃可用控件展現
代碼實現：
MSS.prototype.showUsageMap_old = function () {
var _this = this;
//WT3DObj.commonFunc.changeCameraPosition({ x: 3626.8806598704978, y: 2503.5840662851847, z: 1333.887505251365 }, { x: 115.96408129332937, y: 178.8991280155388, z: 368.1924201030766 },1000, function () { });
if (_this.agesSpaceState == 0) {
_this.agesSpaceState = 1;
$("#backBtn").fadeIn();
layer.closeAll();
$("#toolbar").fadeOut();
//隱藏全部
_this.hideAllCabinet("aaaa", function () {
if (_this.agesSpaceCubeNames.length <= 0) {
var loadindex = layer.load();
wtserverAPI.FreeSpace(modelBussiness.roomName, function (result) {
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 = 1; i <= 49; i++) {
var itcobj = WT3DObj.commonFunc.findObject(modelBussiness.roomName + "_cab_A_" + i);
var ageValue = [];
if (cabNoUse[modelBussiness.roomName + "_cab_A_" + i]) {
ageValue = cabNoUse[modelBussiness.roomName + "_cab_A_" + i];
}
var style = {
borderColor: 0x444444,
outColor: 0xffffff,
outOprity: 0.1
};
_this.commonFunc.createUseageCube(modelBussiness.roomName + "_cab_A_" + 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);
}
for (var i = 1; i <= 48; i++) {
var itcobj = WT3DObj.commonFunc.findObject(modelBussiness.roomName + "_cab_B_" + i);
var ageValue = [];
if (cabNoUse[modelBussiness.roomName + "_cab_B_" + i]) {
ageValue = cabNoUse[modelBussiness.roomName + "_cab_B_" + i];
}
var style = {
borderColor: 0x444444,
outColor: 0xffffff,
outOprity: 0.1
};
var itcobj = WT3DObj.commonFunc.findObject(modelBussiness.roomName + "_cab_B_" + i);
_this.commonFunc.createUseageCube(modelBussiness.roomName + "_cab_B_" + 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 () {
layer.closeAll();
layer.msg("數據接口異常，查無數據！");
});
}
else {
for (var i = 1; i <= 49; i++) {
var itcobj = WT3DObj.commonFunc.findObject(modelBussiness.roomName + "_cab_A_" + i);
var ageValue = [];
var style = {
borderColor: 0xffffff,
outColor: 0xffffff,
outOprity: 0.1
};
_this.commonFunc.createUseageCube(modelBussiness.roomName + "_cab_A_" + i,
{ x: 160, y: 378, 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);
}
for (var i = 1; i <= 48; i++) {
var itcobj = WT3DObj.commonFunc.findObject(modelBussiness.roomName + "_cab_B_" + i);
var ageValue = [];
var style = {
borderColor: 0xffffff,
outColor: 0xffffff,
outOprity: 0.1
};
_this.commonFunc.createUseageCube(modelBussiness.roomName + "_cab_B_" + i,
{ x: 160, y: 378, 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);
}
}
});
} else {
this.hideUsageSpaceRate();
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;
}
});
});
}
}
}
7、機房內排線
8、機房溫度雲圖展現
9、告警機櫃展現
煙霧告警模擬
10、空調通風
2、數據對接代碼實現
function WTServerAPI() { } WTServerAPI.prototype.init = function () { this.alarmColors = { "災難": "0xff0000", "警告": "0xff0000", "嚴重": "0xffff00", "通常": "0x00ff00", "通過": "0x00ffff", } } WTServerAPI.prototype.getAlarmColor = function (lstr) { return this.alarmColors[lstr] ? this.alarmColors[lstr] : "0xff0000"; } WTServerAPI.prototype.roomId = function (key) { var keyValues = { ITC: "c12d7373-a6db-4a3f-96a0-f1a851a8825d", PCR: "dd01271f-7129-4ba1-afcb-fb2dd9017db9", DCR01: "b243a046-31f5-4ba4-891c-bd4e8368c0d9", DCR02: "d8de327b-6b11-4a18-b1d8-168ce0c06d4f", DCR03: "9c26ffd0-e9b1-40bb-8437-a74336c36d26", DCR04: "00a33071-252a-423e-891d-2d836ae23d00" }; return keyValues[key]; } WTServerAPI.prototype.startSigalrServer = function (callBack) { $.getScript(wtserverAPI.SignalrHubs, function () { $.connection.hub.url = wtserverAPI.SignalrUrl; var chat = $.connection.signalRHub; chat.client.Room3DAlert = function (res) { if (callBack) { callBack(res); } }; //開始鏈接 $.connection.hub.start().done(function () { // console.log("鏈接成功"); }).fail(function () { // console.log("鏈接失敗"); }); }); } WTServerAPI.prototype.SigalrMsg = function (res) { var msg = JSON.parse(res); console.log(msg); if (msg) { if (msg.msgType && msg.msgType == "Room3DAlert") { if (modelBussiness) { modelBussiness.alarmServer(msg.message); } } } } /* 接口方式:get 返回格式: json Url:服務端自定 參數:url?room={0}&cabinetNub={1} 參數說明：room表明機房編號,cabinetNub爲機櫃編號，當cabinetNub=-1時返回該機房全部服務器設備信息 接口方式:get 返回格式: json Url:服務端自定 參數: action: 「cabInfo」 // 執行的方法 roomID : 「c12d7373-a6db-4a3f-96a0-f1a851a8825d」 // 機房ID, cabinetNub: 「 」 // 機櫃編號 參數說明：roomID表明機房編號,cabinetNub爲機櫃編號，當cabinetNub=-1時返回該機房全部服務器設備信息 返回格式（參考） { "resultCode": "success", "error": { "errorCode": 0, "errorInfo": "此處顯示錯誤信息" }, "result": [ { "cabinetNub": "A1", "devChildren": [//這是一個數組 列表 { "devId": "",//設備id 這裏面的id或者編號要用於數據綁定 要和數據庫裏面的設備id或者編號一致 "devCode": "",//設備編號 這裏面的id或者編號要用於數據綁定 要和數據庫裏面的設備id或者編號一致 "devName": "",//設備名稱 "devType": "",//先後端協定一些設備類型 "devURange": {//[5,8] 這裏左閉 右閉區間 "min": 5, "max":8 }, "devCustomSkin": {//自定義設備皮膚 可不填寫 "topImg": "img地址", "bottomImg": "img地址", "foreImg": "img地址", "behindImg": "img地址", "leftImg": "img地址", "rightImg": "img地址", }, }, //.............此處表示更多 ] }, { "cabinetNub": "A2", "devChildren": [ { "devId": "",//設備id 這裏面的id或者編號要用於數據綁定 要和數據庫裏面的設備id或者編號一致 "devCode": "",//設備編號 這裏面的id或者編號要用於數據綁定 要和數據庫裏面的設備id或者編號一致 "devName": "",//設備名稱 "devType": "",//先後端協定一些設備類型 "devURange": {//[5,8] 這裏左閉 右閉區間 "min": 5, "max": 8 }, "devCustomSkin": {//自定義設備皮膚 可不填寫 "topImg": "img地址", "bottomImg": "img地址", "foreImg": "img地址", "behindImg": "img地址", "leftImg": "img地址", "rightImg": "img地址", }, } ] }, //.............此處表示更多 ] */ WTServerAPI.prototype.CabinetBoxHandlerCacheData = {}; WTServerAPI.prototype.CabinetBoxHandler = function (room, cabinetNub, sucFunc, failFunc, beCache) { var _this = this; if (beCache) { var cachedata = _this.CabinetBoxHandlerCacheData["c_" + room + "_" + cabinetNub]; if (cachedata) { sucFunc(cachedata); return; } } var url = _this.ServerUrl + "/CBHandler.ashx?action=cabInfo&roomID=" + wtserverAPI.roomId(room) if (cabinetNub) { url += "&cabinetNub=" + cabinetNub; } httpGetSyn(url,//這裏要同步獲取信息 不能用異步 function (rs) { if (sucFunc) { if (cabinetNub == -1) { _this.CabinetBoxHandlerCacheData["c_" + room + "_-1"] = rs.result; } if (rs && rs.result && rs.result.length && rs.result.length > 0) { $.each(rs.result, function (_index, _obj) { if (_obj) { _this.CabinetBoxHandlerCacheData["c_" + room + "_" + _obj.cabName] = _obj; } }); } sucFunc(_this.CabinetBoxHandlerCacheData); } }, function (err) { if (failFunc) { failFunc(err); } }); } WTServerAPI.prototype.getCabinetByUUID = function (roomName, uuid) { var _this = this; var _cab = null; var allCabs = _this.CabinetBoxHandlerCacheData["c_" + roomName + "_-1"]; $.each(allCabs, function (_index, _obj) { if (_obj.cabinetNub == uuid) { _cab = _obj; } }); return _cab; } /** *獲取端口信息 接口方式:get 返回格式: json Url:服務端自定 參數: action: 「ports」 // 執行的方法 devGuid: 「」 // 設備ID devGuid表明設備guid 返回格式（參考） { "resultCode": "success", "error": { "errorCode": 0, "errorInfo": "此處顯示錯誤信息" }, "result":[ {Name:’端口名稱’, Value:’端口狀態’ }， ……… ] } *根據服務器id獲取端口信息 http://116.249.124.141:8081/3droom/api/ashx/CBHandler.ashx?action=ports&hostid=xxxx */ WTServerAPI.prototype.PortCacheData = {}; WTServerAPI.prototype.PortHandler = function (serverId, beCache, sucFunc, failFunc) { var _this = this; if (beCache) { var cachedata = _this.PortCacheData["s_" + serverId]; if (cachedata) { sucFunc(cachedata); return; } } var url = _this.ServerUrl + "/CBHandler.ashx?action=ports&devGuid=" + serverId; httpGet(url, function (rs) { if (sucFunc) { if (rs && rs.result && rs.result.length > 0) { _this.PortCacheData["s_" + serverId] = rs.result; sucFunc(_this.PortCacheData["s_" + serverId]); } else if (rs && rs.error && rs.error.errorInfo) { if (failFunc) { failFunc(rs.error.errorInfo); } } } }, function (err) { if (failFunc) { failFunc(err); } }); } //機櫃利用率 /* 接口方式:get 返回格式: json Url:服務端自定 參數: action: 「CabRate」 // 執行的方法 roomID : 「c12d7373-a6db-4a3f-96a0-f1a851a8825d」 // 機房ID, 返回格式（參考） { "resultCode": "success", "error": { "errorCode": 0, "errorInfo": "此處顯示錯誤信息" }, "result":[ { "cabid":"此處爲機櫃id", "useRate":"0.8",//利用率 「strUseRate」: 23/42 // 利用率比例 }, { "cabid":"此處爲機櫃id", "useRate":"0.4",//利用率 「strUseRate」: 23/42 // 利用率比例 } ......//此處表示更多 ] } */ WTServerAPI.prototype.CabRate = function (roomID, sucFunc, failFunc) { var _this = this; var url = _this.ServerUrl + "/CBHandler.ashx?action=CabRate&roomID=" + _this.roomId(roomID); httpGet(url, function (rs) { if (sucFunc) { if (rs && rs.resultCode && rs.resultCode == "success" && rs.result && rs.result.length && rs.result.length > 0) { sucFunc(rs.result); } else { if (failFunc) { failFunc(rs.error); } } } }, function (err) { if (failFunc) { failFunc(err); } }); } //空閒空間 /* 接口方式:get 返回格式: json Url:服務端自定 參數: action: 「FreeSpace」 // 執行的方法 roomID : 「c12d7373-a6db-4a3f-96a0-f1a851a8825d」 // 機房ID, 返回格式（參考） { "resultCode": "success", "error": { "errorCode": 0, "errorInfo": "此處顯示錯誤信息" }, "result":[ { "cabid":"此處爲機櫃id", "uPositionUsed":[1,2,3,4,5],//表示u位被佔用 }, { "cabid":"此處爲機櫃id", "uPositionUsed":[12,13,14,15],//表示u位被佔用 } ......//此處表示更多 ] } */ WTServerAPI.prototype.FreeSpaceCacheData = null; WTServerAPI.prototype.FreeSpace = function (roomID, sucFunc, failFunc, fromCache) { var _this = this; if (fromCache) { return _this.FreeSpaceCacheData; } var url = _this.ServerUrl + "/CBHandler.ashx?action=FreeSpace&roomID=" + _this.roomId(roomID); httpGet(url, function (rs) { if (sucFunc) { if (rs && rs.resultCode && rs.resultCode == "success" && rs.result && rs.result.length && rs.result.length > 0) { _this.FreeSpaceCacheData = rs.result; sucFunc(rs.result); } else { if (failFunc) { failFunc(rs.error); } } } }, function (err) { if (failFunc) { failFunc(err); } }); } //溫度雲圖 /* 接口方式:get 返回格式: json Url:服務端自定 參數: action: 「Tnephogram」 // 執行的方法 roomID : 「c12d7373-a6db-4a3f-96a0-f1a851a8825d」 // 機房ID 返回格式（參考） { "resultCode": "success", "error": { "errorCode": 0, "errorInfo": "此處顯示錯誤信息" }, "result":[ { "thDevGuid":"此處爲溫溼度設備id", "position":{"x":"1","y":"50"},//位置 "tValue":"25.6",//溫度 }, { "thDevGuid":"此處爲溫溼度設備id", "position":{"x":"10","y":"100"},//位置 "tValue":"80",//溫度 } ] } */ WTServerAPI.prototype.TnephogramCacheData = null; WTServerAPI.prototype.Tnephogram = function (roomID, sucFunc, failFunc) { var _this = this; var url = _this.ServerUrl + "/CBHandler.ashx?action=Tnephogram&roomID=" + _this.roomId(roomID); httpGet(url, function (rs) { if (sucFunc) { if (rs && rs.resultCode && rs.resultCode == "success" && rs.result && rs.result.length && rs.result.length > 0) { _this.TnephogramCacheData = rs.result; sucFunc(rs.result); } else { if (failFunc) { failFunc(rs.error); } } } }, function (err) { if (failFunc) { failFunc(err); } }); } //溼度接口 /* 接口方式:get 返回格式: json Url:服務端自定 參數: action: 「Humidity」 // 執行的方法 roomID : 「c12d7373-a6db-4a3f-96a0-f1a851a8825d」 // 機房ID 返回格式（參考） { "resultCode": "success", "error": { "errorCode": 0, "errorInfo": "此處顯示錯誤信息" }, "result":[ { "thDevGuid":"此處爲溫溼度設備id", "position":{"x":"100","y":"100"},//位置 "hValue":"80",//溼度 }, { "thDevGuid":"此處爲溫溼度設備id", "position":{"x":"300","y":"500"},//位置 "hValue":"80",//溼度 } ] } */ WTServerAPI.prototype.Humidity = function (roomID, sucFunc, failFunc) { var _this = this; var url = _this.ServerUrl + "/CBHandler.ashx?action=Humidity&roomID=" + _this.roomId(roomID); httpGet(url, function (rs) { if (sucFunc) { if (rs && rs.resultCode && rs.resultCode == "success" && rs.result && rs.result.length && rs.result.length > 0) { sucFunc(rs.result); } else { if (failFunc) { failFunc(rs.error); } } } }, function (err) { if (failFunc) { failFunc(err); } }); } //設備詳細接口 /* 接口方式:get 返回格式: json Url:服務端自定 參數: action: 「deviceInfo」 // 執行的方法 devGuid: 「」 // 設備ID devGuid表明設備guid 返回格式（參考） { "resultCode": "success", "error": { "errorCode": 0, "errorInfo": "此處顯示錯誤信息" }, "result":{//設備詳情 } } */ WTServerAPI.prototype.DeviceInfo = function (devGuid, sucFunc, failFunc) { var _this = this; var url = _this.ServerUrl + "/CBHandler.ashx?action=deviceInfo&devGuid=" + devGuid; httpGet(url, function (rs) { if (sucFunc) { if (rs && rs.resultCode && rs.resultCode == "success" && rs.result) { sucFunc(rs); } else { if (failFunc) { failFunc(rs.error); } } } }, function (err) { if (failFunc) { failFunc(err); } }); } /* 獲取機櫃詳細信息 接口方式:get 返回格式: json Url:服務端自定 參數: action: 「ecInfo」 // 執行的方法 devGuid: 「」 // 機櫃ID 返回格式（參考） { "resultCode": "success", "error": { "errorCode": 0, "errorInfo": "此處顯示錯誤信息" }, "result":[ { AreaBelong:’所在區域’, ECName:’機櫃名稱’ }， PhysicalLocation:’位置’ }， UNumber:’U位數’ }， UseRate:’機櫃使用率’ }， StrUseRate:’機櫃使用率字符串標識’ }， TDP:’機櫃中全部設備功耗之和’ } ] } */ WTServerAPI.prototype.getCabinetInfo = function (devGuid, sucFunc, failFunc) { var _this = this; var url = _this.ServerUrl + "/CBHandler.ashx?action=ecInfo&devGuid=" + devGuid; httpGet(url, function (rs) { if (sucFunc) { if (rs && rs.resultCode && rs.resultCode == "success" && rs.result) { sucFunc(rs); } else { if (failFunc) { failFunc(rs.error); } } } }, function (err) { if (failFunc) { failFunc(err); } }); } var wtserverAPI = null;
3、邏輯控制代碼
var WT3DModel; function threeStart(_height,roomName,dataFunc) { // dataFunc 獲取機櫃，空調，牆等設備的json對象 WT3DModel = new WT3D(); // 實例化 3D 核心對象，見 WT3D.core.js 文件。 var initOption = { antialias: true, // 啓用平滑、抗鋸齒效果 loadSyn: true, // 是否啓用異步加載 showHelpGrid: false, // 是否顯示網格線 clearCoolr: 0x4068b0, // 背景色 clearColorOp: 0, // 透明度 }; var Aobjects = { // 給3D對象綁定事件 objects: dataFunc(roomName), Animation: [ { obj_name: "", obj_animation: function (_obj) { }, animationType: 0, // 動畫類型 -1永久循環執行 0觸發執行 >=1執行多少次 aniInterval: 1000, // 執行時間間隔 毫秒 }], events: { dbclick: [ { obj_name: "ALL", obj_event: function (_obj, face) { // 被選中的對象 被選中的面 // 此處設置雙擊聚焦 { console.log(_obj); console.log(face); if (_obj.objType == "optimizeModel") { console.log("optimizeModel"); console.log(_obj); _obj = WT3DModel.commonFunc.getOldModelByNewModelAndFace(_obj, face); } modelBussiness.dbClickSelectCabinet(_obj, face); var mainCamera = WT3DModel.camera;//主場景 //mainCamera.lookAt({ // x: _obj.position.x, y: _obj.position.y, z: _obj.position.z //}); var objpositionx = _obj.position.x; var objpositiony = _obj.position.y; var objpositionz = _obj.position.z; if (typeof (_obj.parent) != 'undefined' && _obj.parent != null && typeof (_obj.parent.position) != 'undefined' && _obj.parent.position != null) { objpositionx += _obj.parent.position.x; objpositiony += _obj.parent.position.y; objpositionz += _obj.parent.position.z; } if (typeof (_obj.oldPosition) != 'undefined' && _obj.oldPosition != null) { objpositionx = _obj.oldPosition.x; objpositiony = _obj.oldPosition.y; objpositionz = _obj.oldPosition.z; } new TWEEN.Tween(WT3DModel.controls.target).to({ // WT3DModel.controls.target: 要改變的對象 x: objpositionx, y: objpositiony, z: objpositionz // to({鍵值對：動畫結束時移動到的文職,完成動畫須要的時間}) }, 600).onComplete(function () { var x_distance = mainCamera.position.x - objpositionx; var y_distance = mainCamera.position.y - objpositiony; var z_distance = mainCamera.position.z - objpositionz; var lv = 1000 / Math.sqrt(x_distance * x_distance + y_distance * y_distance + z_distance * z_distance); var runtweenTime = 1000; if (lv > 0.6) { runtweenTime = 400; } else if (lv > 0.3) { runtweenTime = 1000; } else if (lv > 0.1) { runtweenTime = 1200; } else if (lv > 0.05) { runtweenTime = 1600; } else if (lv > 0.01) { runtweenTime = 2000; } else { runtweenTime = 2500; } if (x_distance * x_distance + y_distance * y_distance + z_distance * z_distance > 800 * 800 && lv < 0.9999) { new TWEEN.Tween(mainCamera.position).to({ x: objpositionx + (mainCamera.position.x - objpositionx) * lv, y: objpositiony, z: objpositionz + (mainCamera.position.z - objpositionz) * lv }, runtweenTime).start(); } }).start(); } } }, ], mouseDown: [{ obj_name: "ALL", obj_event: function (_obj, face) { console.log("mouseDown"); console.log(_obj); console.log(face); if (_obj.objType == "optimizeModel") { console.log("optimizeModel"); console.log(_obj); _obj = WT3DModel.commonFunc.getOldModelByNewModelAndFace(_obj, face); // UNDO } modelBussiness.clickSelectCabinet(_obj, face); } }, ], mouseUp: { }, mouseMove: [{ obj_name: "doorLeft", obj_event: function (_obj) { console.log(_obj.name); return true;//返回true表示移動 } }, ] }, //WT3DModel.viewState;表示0編輯狀態 1表示運行狀態 btns: [ { 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(); // }, //}, ] } if (parent != null && parent.Aobjects_objects != null) { Aobjects.objects = parent.Aobjects_objects; } //修改btns //優化Aobjects 此處用於優化 能夠先異步加載圖片 /* [ { imgurl: "../../img/3dImg/floor.jpg", width: 128, height: 128, }, { imgurl:"../../img/3dImg/floor.jpg", }, ] */ Aobjects.imageList = []; imageUUIDList = []; //遍歷獲取圖片資源 function getImageList(obj) { if (obj && typeof (obj) == "object") { $.each(obj, function (_index, _obj) { if (_obj && _obj.imgurl) { var imgObj = {}; imgObj.uuid = _obj.imgurl; imgObj.imgurl = _obj.imgurl; if ($.inArray(imgObj.uuid, imageUUIDList) < 0) { imageUUIDList.push(imgObj.uuid); Aobjects.imageList.push(imgObj); } } getImageList(_obj); }); } } getImageList(Aobjects.objects); if (_height != null && typeof (_height) != 'undefined' && _height == 0) { $("#canvas-frame").height($(document).height()); } //檢查是否存在動態資源須要加載 var dynamicSource = []; $.each(Aobjects.objects, function (_index, _obj) { /* 動態資源結構 { name: '', objType: 'dynamicSource', file:""; loadedCallBackFuncName:"" } */ if (_obj && _obj.objType && _obj.objType == "dynamicSource") { dynamicSource.push(_obj); } }); if (dynamicSource.length > 0) { WT3DModel.additionModels = {}; var loadednub = 0; $.each(dynamicSource, function (_index, _obj) { $.getScript(_obj.file).done(function () { /* 耶，沒有問題，這裏能夠乾點什麼 */ loadednub++; if (loadednub == dynamicSource.length) { $.each(dynamicSource, function (_dindex, _dobj) { if (_dobj.loadedCallBackFuncName && _dobj.loadedCallBackFuncName != "") { eval(_dobj.loadedCallBackFuncName + "()"); } }); } }) .fail(function () { /* 靠，立刻執行挽救操做 */ console.log("文件加載失敗"); }); }); } WT3DModel.initWT3D('canvas-frame', initOption, Aobjects); WT3DModel.start(); } //actionSign doorLeft doorRight cabinet1 cabinet2 function opcabinetdoor(_obj, _cmd, _func) { var doorstate = "close"; var tempobj = null; if (typeof (_obj.doorState) != 'undefined' && _obj.doorState != null) { doorstate = _obj.doorState; tempobj = _obj.parent; } else { _obj.oldPosition = { x: _obj.parent.position.x, y: _obj.parent.position.y, z: _obj.parent.position.z } _obj.doorstate = "close"; var _objparent = _obj.parent; tempobj = new THREE.Object3D(); tempobj.position.set(_obj.position.x, _obj.position.y, _obj.position.z - _obj.geometry.parameters.depth / 2); _obj.position.set(0, 0, _obj.geometry.parameters.depth / 2); _obj.matrixAutoUpdate = true; tempobj.add(_obj); _objparent.add(tempobj); } if (typeof (_cmd) == 'undefined' || _cmd == null || _cmd == "") { _obj.doorState = (doorstate == "close" ? "open" : "close"); } else { if (_cmd == _obj.doorState) { if (_func != null) { _func(); } return; } else { _obj.doorState = _cmd; } } new TWEEN.Tween(tempobj.rotation).to({ y: (_obj.doorState == "open" ? 0.5 * Math.PI : 0) }, 1000).onComplete(function () { if (_func != null) { _func(); } }).start(); } function openRightDoor(_obj, func, _cmd) { var doorstate = "close"; var tempobj = null; if (_obj.doorState != null && typeof (_obj.doorState) != 'undefined') { doorstate = _obj.doorState; tempobj = _obj.parent; } else { _obj.oldPosition = { x: _obj.position.x, y: _obj.position.y, z: _obj.position.z } _obj.doorState = "close"; var _objparent = _obj.parent; tempobj = new THREE.Object3D(); tempobj.position.set(_obj.position.x - _obj.geometry.parameters.width / 2, _obj.position.y, _obj.position.z); _obj.position.set(_obj.geometry.parameters.width / 2, 0, 0); tempobj.add(_obj); _objparent.add(tempobj); } if (typeof (_cmd) == 'undefined' || _cmd == null || _cmd == "") { _obj.doorState = (doorstate == "close" ? "open" : "close"); } else { if (_cmd == _obj.doorState) { if (func != null) { func(); } return; } else { _obj.doorState = _cmd; } } new TWEEN.Tween(tempobj.rotation).to({ y: (_obj.doorState == "open" ? 0.25 * 2 * Math.PI : 0 * 2 * Math.PI) }, 3000).easing(TWEEN.Easing.Elastic.Out).onComplete( function () { if (func != null) { func(); } } ).start(); } function openLeftDoor(_obj, func, _cmd) { var doorstate = "close"; var tempobj = null; if (_obj.doorState != null && typeof (_obj.doorState) != 'undefined') { doorstate = _obj.doorState; tempobj = _obj.parent; } else { _obj.oldPosition = { x: _obj.position.x, y: _obj.position.y, z: _obj.position.z } _obj.doorState = "close"; var _objparent = _obj.parent; tempobj = new THREE.Object3D(); tempobj.position.set(_obj.position.x + _obj.geometry.parameters.width / 2, _obj.position.y, _obj.position.z); _obj.position.set(-_obj.geometry.parameters.width / 2, 0, 0); tempobj.add(_obj); _objparent.add(tempobj); } if (typeof (_cmd) == 'undefined' || _cmd == null || _cmd == "") { _obj.doorState = (doorstate == "close" ? "open" : "close"); } else { if (_cmd == _obj.doorState) { if (func != null) { func(); } return; } else { _obj.doorState = _cmd; } } new TWEEN.Tween(tempobj.rotation).to({ y: (_obj.doorState == "open" ? -0.25 * 2 * Math.PI : 0 * 2 * Math.PI) }, 3000).easing(TWEEN.Easing.Elastic.Out).onComplete(function () { if (func != null) { func(); } }).start(); } function get3DConfiguration(stationId, sucfunc, failfunc, _userid) { // 沒用到？ businessService.getUser3DConfiguration(stationId, sucfunc, failfunc, _userid); }
下節預告：
下節課主要講解微模塊的實現與功能
技術交流 1203193731@qq.com
交流微信：
若是你有什麼要交流的心得 可郵件我
其它相關文章：
使用webgl(three.js)建立3D機房，3D機房微模塊詳細介紹(升級版二)
如何用webgl(three.js)搭建一個3D庫房-第一課
如何用webgl(three.js)搭建一個3D庫房,3D密集架,3D檔案室,-第二課
使用webgl(three.js)搭建一個3D建築，3D消防模擬——第三課
相關文章
- 1. 使用webgl(three.js)建立3D機房(升級版)-普通機房
- 2. 使用webgl(three.js)創建3D機房(升級版)-普通機房
- 3. 使用webgl(three.js)建立3D機房，3D機房微模塊詳細介紹(升級版二)
- 4. 使用three.js建立3D機房模型-分享一
- 5. 基於 HTML5 Canvas 的 3D WebGL 機房建立
- 6. 使用three.js創建3D機房模型-分享一
- 7. 機房【上機】
- 8. 北京聯通機房 東四網通機房 東四聯通雙線機房 服務器託管
- 9. 【機房】機房配置三部曲
- 10. 數北機房,數字北京機房
- 更多相關文章...
- • 使用TCP協議掃描主機 - TCP/IP教程
- • 使用UDP協議掃描主機 - TCP/IP教程
- • 漫談MySQL的鎖機制
- • Composer 安裝與使用
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
