使用webgl(three.js)创建3D机房(升级版)-普通机房
程序员文章站
2022-05-03 10:34:21
three.js,webGL,3D库房,3D机房，普通3D机房搭建，机柜、服务器、端口实时监控 数据联动展示，机柜动态添加、服务器上下架，动力环境数据可视化展示（温湿度云图，防盗门禁，配店，管线控制）、告警展示 ......
序：
目前市面上的数据中心主要分两大类，一类属于普通数据中心，机柜按照xy轴 有序排放，一类属于微模块集合的数据中心，多个机柜组合而成的微模块。
本节课主要详细讲解普通数据中心的可视化展示，浏览器直接查看机房实时3d数据。
功能简述：普通3d机房搭建，机柜、服务器、端口实时监控 数据联动展示，机柜动态添加、服务器上下架，动力环境数据可视化展示（温湿度云图，防盗门禁，配店，管线控制）、告警展示；
技术难点：
一、如何有效快速根据实际场景搭建机房模型
解决方案：封装各代码模型，复用代码模型，争取快速有效搭建机房
二、如何接入实时数据
解决方案：使用一次请求，变化更新，订阅通知机制
三、如何有效控制各场景间的切换平滑过渡，无卡顿，无延迟
解决方案：使用 状态机 策略，有效控制状态变更与回滚，及时把控各状态之间的切换
四、如何控制加载速度、浏览器内存、上万台服务器场景，如何有效控制帧率与处理速度
解决方案：使用代码模型，降低模型*空间，使用瓦片策略，实现所见即所载，减少提笔浏览器提笔次数，保证帧率与速度。
三维数据可视化执行的意义：
为什么需要可视化展示，我总结如下几点：
a、实用性：直观快速的展示数据，提示告警，快速定位问题，为解决问题节省大量时间，
b、成本管理：成本对于企业来讲是至关重要的，三维可视化可以为高层领导者，执行者提供最快捷的管理方案
c、去专业化：本着代码改变世界的愿望，可视化操控就是为了让更多人的能够看懂、操作所谓专业的东西，
d、科技：越是科技的东西，越需要直观的展示，越是复杂的东西越需要简单的描述。可视化恰恰解决了这个痛点。
e、体面：企业的数据大屏是企业的形象，三维可视化可快速提示企业高大上的企业形象，向客户展示企业的实力与精致，
d、轻便：这是技术的实现方式，使用电脑浏览器 或者手机浏览器直接查看三维机房，方便快捷
如有不妥之处，还望指出 交流邮箱：1203193731@qq.com
效果与功能展示：
一、机房建模
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);
赞 (0)
打赏
微信扫一扫
相关文章:
-
-
初步认识Swiper_前端交互控制神器_滚动3D切换等特效简单制作
总结：附上Swiper学习的网址：前端一定要学习和去了解，帮助是很大的，可以通过简短的代码实现出特别好的效果，先简单介绍到这里吧，以后有机会继续学习... [阅读全文] -
1、var var 声明的变量为全局变量，并会进行变量提升；也可以只声明变量而不进行赋值，输出为undefined，以下写法都是合法的。 2、let... [阅读全文]
-
这是一段数组截取的代码，函数功能是检查后面的'*'的数量，若多于指定输入数，则把多余的'*'删除 注释部分是我一开始... [阅读全文]
-
/** * 单击事件 * @param obj */var dom;var state;WarningIllegalIntime.onRowClic... [阅读全文]
-
GROUP BY你都不会！ROLLUP，CUBE，GROUPPING详解
Group By Group By 谁不会啊？这不是最简单的吗？越是简单的东西，我们越会忽略掉他，因为我们不愿意再去深入了解它。 "1 小时 SQL... [阅读全文] -
版权声明：本文内容由互联网用户贡献，该文观点仅代表作者本人。本站仅提供信息存储服务，不拥有所有权，不承担相关法律责任。 如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 2386932994@qq.com 举报，一经查实将立刻删除。
上一篇： viewer.js 视图预览demo
下一篇： C#上手练习7（方法语句2）
发表评论