欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

使用webgl(three.js)创建3D机房,3D机房微模块详细介绍(升级版二)

程序员文章站 2022-05-27 22:35:02
three.js,webGL讲解机房微模块的三维实现,3D库房,3D机房,普通3D机房搭建,机柜、服务器、端口实时监控 数据联动展示,机柜动态添加、服务器上下架,动力环境数据可视化展示(温湿度云图,防盗门禁,配店,管线控制)、告警展示 ......

序:

上节课已经详细描述了普通机房的实现过程,文章地址()

紧接着上节课的内容 我们这节可来详细讲解机房微模块的三维实现

首先我们先看一下整体的效果图:

这是单个微模块的模拟最后的系统效果

使用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创建服务器端口
 这样服务器的效果就出来了

   使用webgl(three.js)创建3D机房,3D机房微模块详细介绍(升级版二)

 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" },
                    }
                }
            }

机柜效果如下

使用webgl(three.js)创建3D机房,3D机房微模块详细介绍(升级版二)

2.2,接着我们的创建一个虚拟的机框模型,为了达到美工妹妹的效果 我们的虚拟机框还得放光发亮

知识点:这里用到了发光体 和 管道渲染的技术

var bodermodel=three.commonfunc.borderlight(serverid);//这里就是创建机柜发光的边的模型 其实这是和机柜本身模型分开的 只是使用了机柜的参数

使用webgl(three.js)创建3D机房,3D机房微模块详细介绍(升级版二)

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);

这样 微模块的雏形就创建完成啦,接着就是交给美工妹妹去优化配色方案 再修改

 使用webgl(three.js)创建3D机房,3D机房微模块详细介绍(升级版二)

二、搭建组合数据中心

 首先是环境模型

用json去创建机房环境

使用webgl(three.js)创建3D机房,3D机房微模块详细介绍(升级版二)
[{
    "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

 

最后是 整个数据中心的效果:

使用webgl(three.js)创建3D机房,3D机房微模块详细介绍(升级版二)

 

也可创建综合类机房 有普通机柜 有微模块

效果如下:

使用webgl(three.js)创建3D机房,3D机房微模块详细介绍(升级版二)

三、逻辑功能实现

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);

 

使用webgl(three.js)创建3D机房,3D机房微模块详细介绍(升级版二)

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();
            //    },
            //},

 

使用webgl(three.js)创建3D机房,3D机房微模块详细介绍(升级版二)

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)
            };
        }
    }

 

 

 

使用webgl(three.js)创建3D机房,3D机房微模块详细介绍(升级版二)

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();
            });
        });
    }

 

 

 

使用webgl(three.js)创建3D机房,3D机房微模块详细介绍(升级版二)

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);
                        }
                    }
                });

 

 

 

使用webgl(three.js)创建3D机房,3D机房微模块详细介绍(升级版二)

 

下节预告:

  下节课主要讲解微模块的实现与功能

 

技术交流 1203193731@qq.com

交流微信:

    使用webgl(three.js)创建3D机房,3D机房微模块详细介绍(升级版二)

如果你有什么要交流的心得 可邮件我

 

下级预告:

下节课还是讲解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机房(升级版)-普通机房