使用webgl(three.js)建立3D機房,3D機房微模塊詳細介紹(升級版二)

序:javascript

上節課已經詳細描述了普通機房的實現過程,文章地址(http://www.javashuo.com/article/p-nkkikoeu-s.htmlcss

緊接着上節課的內容 咱們這節可來詳細講解機房微模塊的三維實現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"
            },  ]
View Code

 

最後是 整個數據中心的效果:

 

也可建立綜合類機房 有普通機櫃 有微模塊

效果以下:

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管理系統——第四課

如何用webgl(three.js)搭建不規則建築模型,客流量熱力圖模擬

 
使用webgl(three.js)建立3D機房(升級版)-普通機房

相關文章
相關標籤/搜索