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

释放双眼,带上耳机,听听看~!

序:

上节课已经详细描述了普通机房的实现过程,文章地址(https://www.cnblogs.com/yeyunfei/p/10473021.html

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

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

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

下面我们进入正文,详细讲解创建过程(机房的以及其它动力环境的创建 前面的课程已经讲诉 这里不在累赘描述)

一、创建组件

 正所谓造车得现有轮子,那么搭建整个机房得先创建一个个小的组件,最后组合成大的模块。我们的步骤是由内而外。

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

View Code

 

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

 

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

效果如下:

三、逻辑功能实现

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

 

 

 

 

下节预告:

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

 

技术交流 [email protected]

交流微信:

    

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

 

下级预告:

下节课还是讲解3D机房相关的知识,出一些不一样的展示效果。关注点在机柜服务器上 而外部的动力环境不做渲染

 

其它相关文章:

如何用webgl(three.js)搭建一个3D库房-第一课

如何用webgl(three.js)搭建一个3D库房,3D密集架,3D档案室,-第二课

使用webgl(three.js)搭建一个3D建筑,3D消防模拟——第三课

使用webgl(three.js)搭建一个3D智慧园区、3D建筑,3D消防模拟,web版3D,bim管理系统——第四课

如何用webgl(three.js)搭建不规则建筑模型,客流量热力图模拟

 
使用webgl(three.js)创建3D机房(升级版)-普通机房

 

人已赞赏
站长资讯

Vim-一款好用的文本编辑器

2020-11-9 3:39:36

站长资讯

PuppeteerSharp: 更友好的 Headless Chrome C# API

2020-11-9 3:39:55

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索