使用webgl(three.js)创建3D机房,3D机房微模块详细介绍(升级版二)
序:
上节课已经详细描述了普通机房的实现过程,文章地址()
紧接着上节课的内容 我们这节可来详细讲解机房微模块的三维实现
首先我们先看一下整体的效果图:
这是单个微模块的模拟最后的系统效果
下面我们进入正文,详细讲解创建过程(机房的以及其它动力环境的创建 前面的课程已经讲诉 这里不在累赘描述)
一、创建组件
正所谓造车得现有*,那么搭建整个机房得先创建一个个小的组件,最后组合成大的模块。我们的步骤是由内而外。
1.1、先创建服务器,大量的json参数 利于控制服务器的所有属性
var server={//服务器模型参数
"show": true,
"uuid": "",
"name": "equipment_card_2_4",
"objtype": "cube",
"length": 60,
"width": 65,
"height": 20,
"x": 0,
"y": 300,
"z": 0,
"style": {
"skincolor": 9593611,
"skin": {
"skin_up": {
"skincolor": 9593611,
"imgurl": "../../img/3dimg/rack_inside.jpg"
},
"skin_down": {
"skincolor": 9593611,
"imgurl": "../../img/3dimg/rack_inside.jpg"
},
"skin_fore": {
"skincolor": 9593611,
"imgurl": "../../img/3dimg/rack_inside.jpg"
},
"skin_behind": {
"skincolor": 9593611,
"imgurl": "../../img/3dimg/server2.jpg"
},
"skin_left": {
"skincolor": 9593611,
"imgurl": "../../img/3dimg/rack_inside.jpg"
},
"skin_right": {
"skincolor": 9593611,
"imgurl": "../../img/3dimg/rack_inside.jpg"
}
}
},
"showsortnub": 4
};
var servermodel=wt.commonfunc.createserver(server);//服务器模型生成
1.2、服务器端口
var postparam=webapi.getportsfromserverbyserverid(serverid);//获取服务端口参数
wt.commonfunc.createports(portparam);//更具服务器id创建服务器端口
这样服务器的效果就出来了
2.1机柜模型实现
由于机柜的模型是可以运动分解的模型 这样模型的代码要稍微多一点 这样才能做到控制机柜的每一个有意义的零件
机柜模型代码如下:
{ show: true, name: 'cabinet3', actionsign: "cabinet1", shellname: 'cabinet3_emptycabinetshell', uuid: '', // rotation: [{ direction: 'y', degree: 0.25*math.pi}],//旋转 uuid:'', objtype: 'emptycabinet2', transparent: true, size: { length: 66, width: 70, height: 200, thick: 2 }, position: { x: 0, y: 305, z: 0 }, doors: { doortype: 'lr',// ud上下门 lr左右门 单门可以缺省 doorsize: [1], doorname: ['cabinet3_emptycabinetdoor_01'], skins: [{ skincolor: 0x333333, skin_fore: { imgurl: "../../img/3dimg/rack_door_back.jpg", }, skin_behind: { imgurl: "../../img/3dimg/rack_front_door.jpg", } }] }, style: { skincolor: 0xff0000, skin: { skincolor: 0xff0000, skin_up: { imgurl: "../../img/3dimg/rack_door_back.jpg" }, skin_down: { imgurl: "../../img/3dimg/rack_door_back.jpg" }, skin_fore: { skincolor: 0xff0000, imgurl: "../../img/3dimg/rack1.png" }, skin_behind: { skincolor: 0xff0000, imgurl: "../../img/3dimg/rack2.png" }, skin_left: { imgurl: "../../img/3dimg/rack_door_back.jpg" }, skin_right: { imgurl: "../../img/3dimg/rack_door_back.jpg" }, } } }
机柜效果如下
2.2,接着我们的创建一个虚拟的机框模型,为了达到美工妹妹的效果 我们的虚拟机框还得放光发亮
知识点:这里用到了发光体 和 管道渲染的技术
var bodermodel=three.commonfunc.borderlight(serverid);//这里就是创建机柜发光的边的模型 其实这是和机柜本身模型分开的 只是使用了机柜的参数
3.1组合成微模块 这样一个微模块就实现了
在这里我们预先微模块都是两行多列的 而且中间的距离是机柜厚度的2.5倍 所以我们只需要一个机柜的位置参数就可以了
/*
*获取机柜在模块总的位置
*position:[{1,1,uuid-xxxx-xxxx-xxxxx-xx},{1,2,uuid-xxxx-xxxx-xxxxx-xx},{1,3,uuid-xxxx-xxxx-xxxxx-xx}]...
这是一个数组,存储的是行和列 以及id
*/
var micromodel=three.commonfunc.createmicromodule(serverid);
这样 微模块的雏形就创建完成啦,接着就是交给美工妹妹去优化配色方案 再修改
二、搭建组合数据中心
首先是环境模型
用json去创建机房环境
[{ "rotation": [{ "degree": 0, "direction": "x" }, { "degree": 0, "direction": "y" }, { "degree": 0, "direction": "z" }], "show": true, "length": 220, "scale": { "x": 1, "y": 1, "z": 1 }, "uuid": "", "name": "doorcasetop", "width": 24, "x": -300, "y": 220, "z": -350, "style": { "skincolor": 9095650, "skin": { "skin_behind": { "skincolor": 13819101 }, "skin_up": { "skincolor": 13819101 }, "skin_left": { "skincolor": 13819101 }, "skin_fore": { "skincolor": 13819101 }, "skin_down": { "skincolor": 13819101 }, "skin_right": { "skincolor": 13819101 } } }, "objtype": "cube", "height": 5 }, { "rotation": [{ "direction": "x", "degree": 0 }, { "direction": "y", "degree": 0 }, { "direction": "z", "degree": 0 }], "show": true, "length": 20, "scale": { "x": 1, "y": 1, "z": 1 }, "uuid": "", "name": "leftwall", "width": 810, "x": 490, "y": 120, "z": 50, "style": { "skincolor": 9095650, "skin": { "skin_up": { "skincolor": 14540253 }, "skin_down": { "skincolor": 14540253 }, "skin_fore": { "skincolor": 12434877 }, "skin_behind": { "skincolor": 12434877 }, "skin_left": { "skincolor": 14540253 }, "skin_right": { "skincolor": 12434877 } } }, "objtype": "cube", "height": 240, "showsortnub": 1, "animation": null, "dbclickevents": null, "thick": null, "binddevid": null, "binddevname": null, "devinfo": null, "bindmeteid": null, "bindmetename": null }, { "rotation": { "0": { "direction": "x", "degree": 0 }, "1": { "direction": "y", "degree": 0 }, "2": { "direction": "z", "degree": 0 } }, "show": true, "length": 1000, "scale": { "x": 1, "y": 1, "z": 1 }, "uuid": "", "childrens": [{ "op": "-", "show": true, "uuid": "", "name": "doorhole", "objtype": "cube", "width": 20, "height": 220, "length": 220, "x": -300, "y": -10, "z": 0, "style": { "skincolor": 9095650 } }, { "op": "-", "show": true, "uuid": "", "name": "windowhole", "objtype": "cube", "width": 20, "height": 160, "length": 500, "x": 200, "y": 10, "z": 0, "style": { "skincolor": 9095650 } }], "name": "forewall", "width": 20, "x": 0, "y": 120, "z": -350, "style": { "skincolor": 9095650, "skin": { "skin_up": { "skincolor": 14737632 }, "skin_down": { "skincolor": 12434877 }, "skin_fore": { "skincolor": 12434877 }, "skin_behind": { "skincolor": 12434877 }, "skin_left": { "skincolor": 12434877 }, "skin_right": { "skincolor": 12434877 } } }, "objtype": "holecube", "height": 240, "showsortnub": 1, "animation": null, "dbclickevents": null, "thick": null, "binddevid": null, "binddevname": null, "devinfo": null, "bindmeteid": null, "bindmetename": null }, { "rotation": [{ "direction": "x", "degree": 0 }, { "direction": "y", "degree": 0 }, { "direction": "z", "degree": 0 }], "show": true, "length": 20, "scale": { "x": 1, "y": 1, "z": 1 }, "uuid": "", "name": "rightwall", "width": 810, "x": -490, "y": 120, "z": 50, "style": { "skincolor": 9095650, "skin": { "skin_up": { "skincolor": 14540253 }, "skin_down": { "skincolor": 14540253 }, "skin_fore": { "skincolor": 12434877 }, "skin_behind": { "skincolor": 12434877 }, "skin_left": { "skincolor": 13224393 }, "skin_right": { "skincolor": 14540253 } } }, "objtype": "cube", "height": 240, "showsortnub": 1, "animation": null, "dbclickevents": null, "thick": null, "binddevid": null, "binddevname": null, "devinfo": null, "bindmeteid": null, "bindmetename": null }, { "rotation": [{ "direction": "x", "degree": 0 }, { "direction": "y", "degree": 0 }, { "direction": "z", "degree": 0 }], "show": true, "length": 1800, "scale": { "x": 1, "y": 1, "z": 1 }, "uuid": "", "name": "floor_2", "width": 1600, "x": 32.156, "y": -8.708, "z": 11.662, "style": { "skincolor": 9095650, "skin": { "skin_up": { "skincolor": 9991439, "imgurl": "../../img/3dimg/grasslight-big.jpg", "repeatx": true, "width": 512, "repeaty": true, "height": 512 }, "skin_down": { "skincolor": 3184895, "imgurl": "../../img/3dimg/grasslight-big.jpg" }, "skin_fore": { "skincolor": 10592673 }, "skin_behind": { "skincolor": 2968869 }, "skin_left": { "skincolor": 2968869 }, "skin_right": { "skincolor": 2968869 } } }, "objtype": "cube", "height": 10, "showsortnub": 1, "animation": null, "dbclickevents": null, "thick": null, "binddevid": null, "binddevname": null, "devinfo": null, "bindmeteid": null, "bindmetename": null }, { "doors": { "skins": [{ "skin_behind": { "imgurl": "../../img/3dimg/rack_front_door.jpg" }, "skincolor": 3355443, "skin_fore": { "imgurl": "../../img/3dimg/rack_door_back.jpg" } }], "doorname": ["cabinet3_2_emptycabinetdoor_01"], "doortype": "lr", "doorsize": [1] }, "size": { "length": 66, "width": 70, "thick": 2, "height": 200 }, "shellname": "cabinet3_2_emptycabinetshell", "show": true, "name": "cabinet3_2", "scale": { "x": 1, "y": 1, "z": 1 }, "style": { "skincolor": 16711680, "skin": { "skin_behind": { "imgurl": "../../img/3dimg/rack_door_back.jpg", "skincolor": 16711680 }, "skin_up": { "imgurl": "../../img/3dimg/rack_door_back.jpg" }, "skincolor": 16711680, "skin_left": { "imgurl": "../../img/3dimg/rack_door_back.jpg" }, "skin_fore": { "imgurl": "../../img/3dimg/rack_door_back.jpg", "skincolor": 16711680 }, "skin_down": { "imgurl": "../../img/3dimg/rack_door_back.jpg" }, "skin_right": { "imgurl": "../../img/3dimg/rack_door_back.jpg" } } }, "position": { "x": -100, "y": 105, "z": -80 }, "uuid": "", "objtype": "emptycabinet", "transparent": true }, { "rotation": [{ "degree": 0.3141592653589793, "direction": "y" }], "name": "fireextinguisher_3", "fileurl": "../../img/3dimg/objs/fireextinguisher.json", "scale": { "x": 15, "y": 12, "z": 15 }, "position": { "x": -460, "y": 8, "z": -250 }, "objtype": "jsonobj" }, { "rotation": [{ "degree": 0.9424777960769379, "direction": "y" }], "show": true, "name": "aircondition", "length": 60, "width": 80, "x": -420, "y": 130, "z": 370, "style": { "skincolor": 16711422, "skin": { "skin_fore": { "imgurl": "../../img/3dimg/aircondition.jpg" } } }, "uuid": "", "objtype": "cube", "height": 220 }, { "rotation": [{ "degree": 0, "direction": "x" }, { "degree": 0, "direction": "y" }, { "degree": 0, "direction": "z" }], "show": true, "length": 220, "scale": { "x": 1, "y": 1, "z": 1 }, "uuid": "", "name": "doorcasebottom", "width": 24, "x": -300, "y": 5, "z": -350, "style": { "skincolor": 9095650, "skin": { "skin_behind": { "skincolor": 13819101 }, "skin_up": { "skincolor": 13819101 }, "skin_left": { "skincolor": 13819101 }, "skin_fore": { "skincolor": 13819101 }, "skin_down": { "skincolor": 13819101 }, "skin_right": { "skincolor": 13819101 } } }, "objtype": "cube", "height": 5 }, { "rotation": [{ "degree": 0.3141592653589793, "direction": "y" }], "name": "fireextinguisher_2", "fileurl": "../../img/3dimg/objs/fireextinguisher.json", "scale": { "x": 15, "y": 12, "z": 15 }, "position": { "x": -460, "y": 8, "z": -230 }, "objtype": "jsonobj" }, { "show": true, "name": "equipment_card_3", "length": 60, "width": 65, "x": -100, "y": 145, "z": -180, "style": { "skincolor": 9593611, "skin": { "skin_behind": { "imgurl": "../../img/3dimg/server3.jpg", "skincolor": 9593611 }, "skin_up": { "imgurl": "../../img/3dimg/rack_inside.jpg", "skincolor": 9593611 }, "skin_left": { "imgurl": "../../img/3dimg/rack_inside.jpg", "skincolor": 9593611 }, "skin_fore": { "imgurl": "../../img/3dimg/rack_inside.jpg", "skincolor": 9593611 }, "skin_down": { "imgurl": "../../img/3dimg/rack_inside.jpg", "skincolor": 9593611 }, "skin_right": { "imgurl": "../../img/3dimg/rack_inside.jpg", "skincolor": 9593611 } } }, "uuid": "", "objtype": "cube", "height": 30 }, { "rotation": [{ "degree": 0.3141592653589793, "direction": "y" }], "name": "fireextinguisher_4", "fileurl": "../../img/3dimg/objs/fireextinguisher.json", "scale": { "x": 15, "y": 12, "z": 15 }, "position": { "x": -460, "y": 8, "z": -270 }, "objtype": "jsonobj" }, { "rotation": [{ "degree": 0, "direction": "x" }, { "degree": 0, "direction": "y" }, { "degree": 0, "direction": "z" }], "show": true, "length": 40, "scale": { "x": 1, "y": 1, "z": 1 }, "uuid": "", "name": "powerdcabinet1_87", "width": 80, "x": 462, "y": 132, "z": -223, "style": { "skincolor": 9095650, "skin": { "skin_behind": { "imgurl": "../../img/3dimg/pdg101.jpg", "skincolor": 12639968 }, "skin_up": { "skincolor": 16777215 }, "skin_left": { "imgurl": "../../img/3dimg/pdg102.jpg", "skincolor": 13692656 }, "skin_fore": { "imgurl": "../../img/3dimg/pdg103.jpg", "skincolor": 12639968 }, "skin_down": { "skincolor": 12639968 }, "skin_right": { "imgurl": "../../img/3dimg/pdg104.jpg", "skincolor": 13692656 } } }, "objtype": "cube", "height": 120 }, { "show": true, "name": "equipment_card_2", "length": 60, "width": 65, "x": -100, "y": 120, "z": -180, "style": { "skincolor": 9593611, "skin": { "skin_behind": { "imgurl": "../../img/3dimg/server2.jpg", "skincolor": 9593611 }, "skin_up": { "imgurl": "../../img/3dimg/rack_inside.jpg", "skincolor": 9593611 }, "skin_left": { "imgurl": "../../img/3dimg/rack_inside.jpg", "skincolor": 9593611 }, "skin_fore": { "imgurl": "../../img/3dimg/rack_inside.jpg", "skincolor": 9593611 }, "skin_down": { "imgurl": "../../img/3dimg/rack_inside.jpg", "skincolor": 9593611 }, "skin_right": { "imgurl": "../../img/3dimg/rack_inside.jpg", "skincolor": 9593611 } } }, "uuid": "", "objtype": "cube", "height": 20 }, { "doors": { "skins": [{ "skin_behind": { "imgurl": "../../img/3dimg/rack_front_door.jpg" }, "skincolor": 3355443, "skin_fore": { "imgurl": "../../img/3dimg/rack_door_back.jpg" } }], "doorname": ["cabinet1_5_emptycabinetdoor_01"], "doortype": "lr", "doorsize": [1] }, "size": { "length": 66, "width": 70, "thick": 2, "height": 200 }, "shellname": "cabinet1_5_emptycabinetshell", "show": true, "name": "cabinet1_5", "scale": { "x": 1, "y": 1, "z": 1 }, "style": { "skincolor": 16711680, "skin": { "skin_behind": { "imgurl": "../../img/3dimg/rack_door_back.jpg", "skincolor": 16711680 }, "skin_up": { "imgurl": "../../img/3dimg/rack_door_back.jpg" }, "skincolor": 16711680, "skin_left": { "imgurl": "../../img/3dimg/rack_door_back.jpg" }, "skin_fore": { "imgurl": "../../img/3dimg/rack_door_back.jpg", "skincolor": 16711680 }, "skin_down": { "imgurl": "../../img/3dimg/rack_door_back.jpg" }, "skin_right": { "imgurl": "../../img/3dimg/rack_door_back.jpg" } } }, "position": { "x": 300, "y": 105, "z": 220 }, "uuid": "", "objtype": "emptycabinet", "transparent": true }, { "values": [], "name": "btns", "objtype": "btns" }, { "rotation": [{ "degree": -3.141592653589793, "direction": "x" }, { "degree": 1.2246468525851679e-16, "direction": "y" }, { "degree": -3.141592653589793, "direction": "z" }], "show": true, "length": 50, "scale": { "x": 1, "y": 1, "z": 1 }, "uuid": "", "name": "powerdcabinet2_88", "width": 80, "x": 451, "y": 87, "z": -83, "style": { "skincolor": 9095650, "skin": { "skin_behind": { "skincolor": 16448496 }, "skin_up": { "skincolor": 16777215 }, "skin_left": { "skincolor": 16448496 }, "skin_fore": { "imgurl": "../../img/3dimg/pdg201.jpg", "skincolor": 16448496 }, "skin_down": { "skincolor": 12639968 }, "skin_right": { "skincolor": 16448496 } } }, "objtype": "cube", "height": 160 }, { "doors": { "skins": [{ "skin_behind": { "imgurl": "../../img/3dimg/rack_front_door.jpg" }, "skincolor": 3355443, "skin_fore": { "imgurl": "../../img/3dimg/rack_door_back.jpg" } }], "doorname": ["cabinet1_4_emptycabinetdoor_01"], "doortype": "lr", "doorsize": [1] }, "size": { "length": 66, "width": 70, "thick": 2, "height": 200 }, "shellname": "cabinet1_4_emptycabinetshell", "show": true, "name": "cabinet1_4", "scale": { "x": 1, "y": 1, "z": 1 }, "style": { "skincolor": 16711680, "skin": { "skin_behind": { "imgurl": "../../img/3dimg/rack_door_back.jpg", "skincolor": 16711680 }, "skin_up": { "imgurl": "../../img/3dimg/rack_door_back.jpg" }, "skincolor": 16711680, "skin_left": { "imgurl": "../../img/3dimg/rack_door_back.jpg" }, "skin_fore": { "imgurl": "../../img/3dimg/rack_door_back.jpg", "skincolor": 16711680 }, "skin_down": { "imgurl": "../../img/3dimg/rack_door_back.jpg" }, "skin_right": { "imgurl": "../../img/3dimg/rack_door_back.jpg" } } }, "position": { "x": 300, "y": 105, "z": 120 }, "uuid": "", "objtype": "emptycabinet", "transparent": true }, { "doors": { "skins": [{ "skin_behind": { "imgurl": "../../img/3dimg/rack_front_door.jpg" }, "skincolor": 3355443, "skin_fore": { "imgurl": "../../img/3dimg/rack_door_back.jpg" } }], "doorname": ["cabinet2_6_emptycabinetdoor_01"], "doortype": "lr", "doorsize": [1] }, "size": { "length": 66, "width": 70, "thick": 2, "height": 200 }, "shellname": "cabinet2_6_emptycabinetshell", "show": true, "name": "cabinet2_6", "scale": { "x": 1, "y": 1, "z": 1 }, "style": { "skincolor": 16711680, "skin": { "skin_behind": { "imgurl": "../../img/3dimg/rack_door_back.jpg", "skincolor": 16711680 }, "skin_up": { "imgurl": "../../img/3dimg/rack_door_back.jpg" }, "skincolor": 16711680, "skin_left": { "imgurl": "../../img/3dimg/rack_door_back.jpg" }, "skin_fore": { "imgurl": "../../img/3dimg/rack_door_back.jpg", "skincolor": 16711680 }, "skin_down": { "imgurl": "../../img/3dimg/rack_door_back.jpg" }, "skin_right": { "imgurl": "../../img/3dimg/rack_door_back.jpg" } } }, "position": { "x": 100, "y": 105, "z": 320 }, "uuid": "", "objtype": "emptycabinet", "transparent": true }, { "doors": { "skins": [{ "skin_behind": { "imgurl": "../../img/3dimg/rack_front_door.jpg" }, "skincolor": 3355443, "skin_fore": { "imgurl": "../../img/3dimg/rack_door_back.jpg" } }], "doorname": ["cabinet1_6_emptycabinetdoor_01"], "doortype": "lr", "doorsize": [1] }, "size": { "length": 66, "width": 70, "thick": 2, "height": 200 }, "shellname": "cabinet1_6_emptycabinetshell", "show": true, "name": "cabinet1_6", "scale": { "x": 1, "y": 1, "z": 1 }, "style": { "skincolor": 16711680, "skin": { "skin_behind": { "imgurl": "../../img/3dimg/rack_door_back.jpg", "skincolor": 16711680 }, "skin_up": { "imgurl": "../../img/3dimg/rack_door_back.jpg" }, "skincolor": 16711680, "skin_left": { "imgurl": "../../img/3dimg/rack_door_back.jpg" }, "skin_fore": { "imgurl": "../../img/3dimg/rack_door_back.jpg", "skincolor": 16711680 }, "skin_down": { "imgurl": "../../img/3dimg/rack_door_back.jpg" }, "skin_right": { "imgurl": "../../img/3dimg/rack_door_back.jpg" } } }, "position": { "x": 300, "y": 105, "z": 320 }, "uuid": "", "objtype": "emptycabinet", "transparent": true }, { "childrens": [{ "childrens": [{ "childrens": [{ "rotation": [{ "degree": 0, "direction": "x" }, { "degree": 0, "direction": "y" }, { "degree": 0, "direction": "z" }], "show": true, "radialsegments": 8, "scale": { "x": 1, "y": 1, "z": 1 }, "uuid": "", "points": [{ "x": 0, "y": 0, "z": 0 }, { "x": 0, "y": 35, "z": 0 }], "segments": 64, "name": "cm_桌椅1_63objcren0objcren0objcren0", "closed": false, "style": { "skincolor": 15790833 }, "position": { "x": 0, "y": 119.842, "z": 0 }, "radius": 3, "objtype": "tube" }, { "childrens": [{ "rotation": [{ "degree": 0, "direction": "x" }, { "degree": 0, "direction": "y" }, { "degree": 0, "direction": "z" }], "show": true, "radialsegments": 8, "scale": { "x": 1, "y": 1, "z": 1 }, "uuid": "", "points": [{ "x": 0, "y": 20, "z": 0 }, { "x": 30, "y": 10, "z": 0 }, { "x": 40, "y": 0, "z": 0 }], "segments": 64, "name": "cm_桌椅1_63objcren0objcren0objcren1objcren0", "closed": false, "style": { "skincolor": 14676206 }, "position": { "x": 0, "y": 100, "z": 0 }, "radius": 2, "objtype": "tube" }, { "segmentsy": 0, "radiusbottom": 4, "segmentsx": 100, "rotation": [{ "degree": 1.5707963267948963, "direction": "x" }, { "degree": 0, "direction": "y" }, { "degree": 0, "direction": "z" }], "name": "cm_桌椅1_63objcren0objcren0objcren1objcren1", "scale": { "x": 1, "y": 1, "z": 1 }, "openended": false, "style": { "skincolor": 16776960, "skin": { "skin_up": { "skincolor": 4342338 }, "skin_side": { "skincolor": 4342338 }, "skin_down": { "skincolor": 4342338 } } }, "position": { "x": 40.373, "y": 96.989, "z": -0.2281064684102727 }, "objtype": "cylinder", "radiustop": 4, "height": 4 }], "rotation": [{ "degree": 0, "direction": "x" }, { "degree": 0, "direction": "y" }, { "degree": 0, "direction": "z" }], "show": true, "name": "cm_桌椅1_63objcren0objcren0objcren1", "scale": { "x": 1, "y": 1, "z": 1 }, "position": { "x": 0, "y": 0, "z": 0 }, "uuid": "", "objtype": "groupobj" }, { "childrens": [{ "rotation": [{ "degree": 0, "direction": "x" }, { "degree": 0, "direction": "y" }, { "degree": 0, "direction": "z" }], "show": true, "radialsegments": 8, "scale": { "x": 1, "y": 1, "z": 1 }, "uuid": "", "points": [{ "x": 0, "y": 20, "z": 0 }, { "x": 30, "y": 10, "z": 0 }, { "x": 40, "y": 0, "z": 0 }], "segments": 64, "name": "cm_桌椅1_63objcren0objcren0objcren2objcren0", "closed": false, "style": { "skincolor": 14676206 }, "position": { "x": 0, "y": 100, "z": 0 }, "radius": 2, "objtype": "tube" }, { "segmentsy": 0, "radiusbottom": 4, "segmentsx": 100, "rotation": [{ "degree": 1.5707963267948963, "direction": "x" }, { "degree": 0, "direction": "y" }, { "degree": 0, "direction": "z" }], "name": "cm_桌椅1_63objcren0objcren0objcren2objcren1", "scale": { "x": 1, "y": 1, "z": 1 }, "openended": false, "style": { "skincolor": 16776960, "skin": { "skin_up": { "skincolor": 4342338 }, "skin_side": { "skincolor": 4342338 }, "skin_down": { "skincolor": 4342338 } } }, "position": { "x": 40.373337511555206, "y": 96.98891109282378, "z": -0.2281064684102727 }, "objtype": "cylinder", "radiustop": 4, "height": 4 }], "rotation": [{ "degree": -3.141592653589793, "direction": "x" }, { "degree": -0.9728629830197867, "direction": "y" }, { "degree": -3.141592653589793, "direction": "z" }], "show": true, "name": "cm_桌椅1_63objcren0objcren0objcren2", "scale": { "x": 1, "y": 1, "z": 1 }, "position": { "x": 0, "y": 0, "z": 0 }, "uuid": "", "objtype": "groupobj" }, ]
最后是 整个数据中心的效果:
也可创建综合类机房 有普通机柜 有微模块
效果如下:
三、逻辑功能实现
1、选择查看单个机柜,查看机柜详情,了解该机柜内的服务器排布情况
代码实现:
if (modelbussiness.showsingleserverneedvitures.length > 0) { wt3dobj.commonfunc.changeobjsopacity(modelbussiness.showsingleserverneedvitures, 0.2, 1, 200, function () { $.each(modelbussiness.showcabservers, function (_index, _obj) { _obj.visible = true; }); }); } _this.opencabdoor(_obj); if (modelbussiness.lastmouseincurrentobj.name.indexof("objcren7") > 0 || modelbussiness.lastmouseincurrentobj.name.indexof("objcren8") > 0) { this.commonfunc.opcabinetbackleftdoor(_obj.doors.leftdoor); this.commonfunc.opcabinetbackrightdoor(_obj.doors.rightdoor); } else if (modelbussiness.lastmouseincurrentobj.name.indexof("objcren9") > 0) { this.commonfunc.opcabinetmaindoor(_obj.doors.maindoor); } settimeout(function () { if (_obj.doors.leftdoor.doorstate == undefined || _obj.doors.leftdoor.doorstate == "close") { if (_obj.doors.rightdoor.doorstate == undefined || _obj.doors.rightdoor.doorstate == "close") { if (_obj.doors.maindoor.doorstate == undefined || _obj.doors.maindoor.doorstate == "close") { modelbussiness.commonfunc.showcabnetdetail(_obj, function () { }); } } } }, 200);
2、综合查看微模块的热力云图,空间使用情况,电力情况,制冷,承重等等。
代码实现:
{ btnid: "btn_reset", btntitle: "场景复位", btnimg: "../../img/3dimg/reset.png", sortnub: 0, btntype: "system", enable: true, show_event: function () { if (modelbussiness.lock == true) { layer.tips("当前正在运行" + modelbussiness.currentlockdetail, "#btn_space"); return; } modelbussiness.currentlockdetail = "场景复位"; modelbussiness.lock = true; settimeout(function () { modelbussiness.lock = false; }, 1000); modelbussiness.backbtn(); }, }, { btnid: "btn_fps", btntitle: "3d性能监测", btnimg: "../../img/3dimg/fps.png", sortnub: 0, btntype: "system", enable: true, show_event: function () { var display = $("#stats_output").css("display"); if (display == "none") { $("#stats_output").show(); } else { $("#stats_output").hide(); } }, }, { btnid: "btn_space", btntitle: "机柜利用率", btnimg: "../../img/3dimg/space.png", sortnub: 0, btntype: "system", enable: true, show_event: function () { if (modelbussiness.lock == true) { layer.tips("当前正在运行" + modelbussiness.currentlockdetail, "#btn_space"); return; } modelbussiness.currentlockdetail = "机柜利用率"; modelbussiness.lock = true; settimeout(function () { modelbussiness.lock = false; }, 2000); modelbussiness.showspacerate(); }, }, { btnid: "btn_usage", btntitle: "可用空间", btnimg: "../../img/3dimg/usage.png", sortnub: 0, btntype: "system", enable: true, show_event: function () { if (modelbussiness.lock == true) { layer.tips("当前正在运行" + modelbussiness.currentlockdetail, "#btn_usage"); return; } modelbussiness.currentlockdetail = "可用空间"; modelbussiness.lock = true; settimeout(function () { modelbussiness.lock = false; }, 2000); modelbussiness.showusagemap(); }, }, { btnid: "btn_lines", btntitle: "走线管理", btnimg: "../../img/3dimg/connection.png", sortnub: 0, btntype: "system", enable: true, show_event: function () { if (modelbussiness.lock == true) { layer.tips("当前正在运行" + modelbussiness.currentlockdetail, "#btn_lines"); return; } modelbussiness.currentlockdetail = "走线管理"; modelbussiness.lock = true; settimeout(function () { modelbussiness.lock = false; }, 1000); modelbussiness.showlines(); }, }, { btnid: "btn_temperature", btntitle: "温度云图", btnimg: "../../img/3dimg/temperature.png", sortnub: 0, btntype: "system", enable: true, show_event: function () { if (modelbussiness.lock == true) { layer.tips("当前正在运行" + modelbussiness.currentlockdetail, "#btn_temperature"); return; } modelbussiness.currentlockdetail = "温度云图"; modelbussiness.lock = true; settimeout(function () { modelbussiness.lock = false; }, 2000); modelbussiness.showtempturemap(); }, }, { btnid: "btn_water", btntitle: "湿度", btnimg: "../../img/3dimg/water.png", sortnub: 0, btntype: "system", enable: true, show_event: function () { if (modelbussiness.lock == true) { layer.tips("当前正在运行" + modelbussiness.currentlockdetail, "#btn_water"); return; } modelbussiness.currentlockdetail = "湿度效果"; modelbussiness.lock = true; settimeout(function () { modelbussiness.lock = false; }, 2000); modelbussiness.showhumidity(); }, }, { btnid: "btn_smokealarm", btntitle: "烟雾模拟", btnimg: "../../img/3dimg/smoke.png", sortnub: 0, btntype: "system", enable: true, show_event: function () { if (modelbussiness.lock == true) { layer.tips("当前正在运行" + modelbussiness.currentlockdetail, "#btn_smokealarm"); return; } modelbussiness.currentlockdetail = "烟雾模拟"; modelbussiness.lock = true; settimeout(function () { modelbussiness.lock = false; }, 2000); modelbussiness.showfirealarm(); }, }, { btnid: "btn_winds", btntitle: "空调风向", btnimg: "../../img/3dimg/air.png", sortnub: 0, btntype: "system", enable: true, show_event: function () { if (modelbussiness.lock == true) { layer.tips("当前正在运行" + modelbussiness.currentlockdetail, "#btn_winds"); return; } modelbussiness.currentlockdetail = "空调风向"; modelbussiness.lock = true; settimeout(function () { modelbussiness.lock = false; }, 1000); modelbussiness.showwinds(); }, }, //{ // btnid: "btn_power", // btntitle: "配店组", // btnimg: "../../img/3dimg/power.png", // sortnub: 0, // btntype: "system", // enable: true, // show_event: function () { // modelbussiness.showwinds(); // }, //}, //{ // btnid: "btn_alarm", // btntitle: "告警", // btnimg: "../../img/3dimg/alarm.png", // sortnub: 0, // btntype: "system", // enable: true, // show_event: function () { // modelbussiness.showwinds(); // }, //}, //{ // btnid: "btn_person", // btntitle: "巡检", // btnimg: "../../img/3dimg/person.png", // sortnub: 0, // btntype: "system", // enable: true, // show_event: function () { // modelbussiness.showwinds(); // }, //},
3、服务器下架操作
代码实现:
var _this = modelbussiness; _this.currentshowservernames = []; var cabinetname = cabinetobj.name; if (_this.devs[cabinetname] && _this.devs[cabinetname].devs && _this.devs[cabinetname].devs.length > 0) { $.each(_this.devs[cabinetname].devs, function (_index, _obj) { _obj.visible = true; _this.currentshowservernames.push(_obj.name); }); } else { var devjsonmodels = []; //1u 高度8.5 位置42 if (devs && devs.length > 0) { $.each(devs, function (_index, _obj) { var height = (_obj.devurange.max - _obj.devurange.min + 1) * 8.2; var positiony = height / 2 + 42 + (_obj.devurange.min - 1) * 8.5; var postioinx = cabinetobj.position.x; var postioinz = cabinetobj.position.z; var rotationy = cabinetobj.rotation.y + math.pi; var name = cabinetobj.name + "_server_" + _index; if (!_obj.devcustomskin) { var servvers = ["../img/3dimg/server2.jpg", "../img/3dimg/server3.jpg", "../img/3dimg/server1.jpg"]; _obj.devcustomskin = { up: "../img/3dimg/rack_inside.jpg", down: "../img/3dimg/rack_inside.jpg", fore: servvers[parseint(math.random() * 3)], behind: servvers[parseint(math.random() * 3)], left: "../img/3dimg/server_side.jpg", right: "../img/3dimg/server_side.jpg", } } var server = getsingleservermodel(cabinetobj.name + "_server_" + _index, { "x": postioinx, "y": positiony, "z": postioinz }, height, rotationy, _obj.devid, _obj.devcustomskin); server.binddevid = _obj.devid; devjsonmodels.push(server); _this.currentshowservernames.push(name); }); wt3dobj.commonfunc.loadmodelsbyjsons(devjsonmodels, { x: 0, y: 0, z: 0 }, { x: 0, y: 0, z: 0 }, true); _this.devs[cabinetname] = { devs: wt3dobj.commonfunc.findobjectsbynames(_this.currentshowservernames) }; } }
4、服务器上架操作
代码实现:
if (_this.needhidecabinets.length > 0) { wt3dobj.commonfunc.changecameraposition({ x: 2531, y: 3967, z: -1150 }, { x: -615, y: 0, z: -35 }, 1000, function () { $.each(_this.needhidecabinets, function (_index, _obj) { if (_obj.name.indexof("_rate_") < 0 && _obj.name.indexof("_yearcube_") < 0) { _obj.visible = true; } }); }); } if (_this.needhideobjs.length > 0) { _this.hidedevs(); wt3dobj.commonfunc.changecameraposition({ x: 2531, y: 3967, z: -1150 }, { x: -615, y: 0, z: -35 }, 1000, function () { $.each(_this.needhideobjs, function (_index, _obj) { if (_obj.name.indexof("tcl_line_") < 0 && _obj.name.indexof("_wind") < 0) { _obj.visible = true; if (_obj.children && _obj.children.length > 0) { $.each(_obj.children, function (_cindex, _cobj) { _cobj.visible = true; }); } } }); if (_this.currentshowcabinet) { _this.currentshowcabinet.visible = false; } wt3dobj.commonfunc.changeobjsopacity(_this.needhideobjs, 0.01, 1, 1000, function () { _this.hidelines(); _this.hidewinds(); _this.hideusagespacerate(); _this.hidespacerate(); }); }); }
5、服务器计划上架 计划下架操作
实现方式:
layer.closeall(); console.log(result); var cabnouse = {}; if (result && result.length && result.length > 0) { $.each(result, function (_index, _obj) { var _cab = wtserverapi.getcabinetbyuuid(modelbussiness.roomname, _obj.cabid); if (_cab && _cab.cabname) { var agevalue = []; if (_obj.upositionused && _obj.upositionused.length && _obj.upositionused.length > 0) { for (var j = 0; j < _obj.upositionused.length - 1; j++) { if (j == 0) { agevalue.push({ value: 1, max: _obj.upositionused[0], min: _obj.upositionused[0] }); } if (_obj.upositionused[j + 1] - _obj.upositionused[j] > 1) { agevalue.push({ value: 1, max: _obj.upositionused[j + 1], min: _obj.upositionused[j + 1] }); } else { agevalue[agevalue.length - 1].max = _obj.upositionused[j + 1]; } } } cabnouse[_cab.cabname] = agevalue; } }); } console.log(cabnouse); for (var i = 0; i < allcabs.length; i++) { var itcobj = wt3dobj.commonfunc.findobject(allcabs[i]); var agevalue = []; if (cabnouse[allcabs[i]]) { agevalue = cabnouse[allcabs[i]]; } var style = { bordercolor: 0x4444, outcolor: 0xffffff, outoprity: 0.1 }; if (itcobj) { _this.commonfunc.createuseagecube(allcabs[i], { x: 160, y: 380, z: 140 }, { x: itcobj.position.x, y: itcobj.position.y, z: itcobj.position.z }, { x: 0, y: 0, z: 0 }, agevalue, style, { timelong: 1000 }, i); } } }, function (err) { layer.closeall(); var cabnouse = {}; for (var i = 0; i < allcabs.length; i++) { var itcobj = wt3dobj.commonfunc.findobject(allcabs[i]); var agevalue = []; if (cabnouse[allcabs[i]]) { agevalue = cabnouse[allcabs[i]]; } var style = { bordercolor: 0x4444, outcolor: 0xffffff, outoprity: 0.1 }; if (itcobj) { _this.commonfunc.createuseagecube(allcabs[i], { x: 160, y: 380, z: 140 }, { x: itcobj.position.x, y: itcobj.position.y, z: itcobj.position.z }, { x: 0, y: 0, z: 0 }, agevalue, style, { timelong: 1000 }, i); } } });
下节预告:
下节课主要讲解微模块的实现与功能
技术交流 1203193731@qq.com
交流微信:
如果你有什么要交流的心得 可邮件我
下级预告:
下节课还是讲解3d机房相关的知识,出一些不一样的展示效果。关注点在机柜服务器上 而外部的动力环境不做渲染
其它相关文章:
如何用webgl(three.js)搭建一个3d库房-第一课
如何用webgl(three.js)搭建一个3d库房,3d密集架,3d档案室,-第二课
使用webgl(three.js)搭建一个3d建筑,3d消防模拟——第三课
使用webgl(three.js)搭建一个3d智慧园区、3d建筑,3d消防模拟,web版3d,bim管理系统——第四课
使用webgl(three.js)创建3d机房(升级版)-普通机房