所在的位置: html >> html介绍 >> webglthreejs创建自动化

webglthreejs创建自动化

目前市面上有两种机房一种是普通机房一种是由微模块组成的机房,本文主要介绍普通机房的抽象化体现模式。

抽象机房模式:机房展示过程中,我们需要对机房进行建模,当遇到大量机房需要建模时,这无疑是巨大工作量的,不仅仅拖了交期,还会让研发人员做了大量重复的工作。

  为满足大量机房三维效果,这种抽象化机房展示形式尤为突出。既满足了机房可视化直观效果,又能快速响应不同机房的要求。

一、整体视角,根据配置数据,自动生成行列机柜。

创建自动化前,首先要封装自动化代码,然后通过数据驱动生成模型

我们以该文章机房为例代码实现如下:

functiongetITCRoomData(){//获取列表varracks=getWebApiInstance().getRacksByRoomId();varmodels=[];//统计总的行列varmaxRow=0;//行varmaxCol=0;//列$.each(racks.Members,function(_index,_obj){varrow=parseInt(_obj.Location.split("-")[0]);varcol=parseInt(_obj.Location.split("-")[1]);if(row=maxRow){maxRow=row;}if(colmaxCol){maxCol=col;}});$.each(racks.Members,function(_index,_obj){varrow=parseInt(_obj.Location.split("-")[0]);varcol=parseInt(_obj.Location.split("-")[1]);var_cab=getCabinetModel(_obj.Id,"ITC_cab_A_"+(_index+1),{x:1,y:1,z:1},{"x":(row-1)*,"y":,"z":(col-1)*},[{"direction":"y","degree":0}]);models.push(_cab);});models.push({"show":true,"uuid":"","name":"ITC_floor","objType":"cube2","length":maxRow*+,"width":maxCol*+,"height":50,"x":((maxRow-1)*)/2,"y":-25,"z":((maxCol-1)*)/2,"style":{"skinColor":,"skin":{"skin_up":{"skinColor":0x8caeed,"side":1,"opacity":1,"imgurl":"../../img/3dImg/wall/top4.jpg","repeatx":true,"width":10,"repeaty":true,"height":10},"skin_down":{"skinColor":,"side":1,"opacity":1,"imgurl":"../../img/3dImg/wall/floor5.jpg","repeatx":true,"width":20,"repeaty":true,"height":30},"skin_fore":{"skinColor":,"side":1,"opacity":1},"skin_behind":{"skinColor":,"side":1,"opacity":1},"skin_left":{"skinColor":,"side":1,"opacity":1},"skin_right":{"skinColor":,"side":1,"opacity":1}}},"showSortNub":1,"customType1":"","customType2":"","animation":null,"dbclickEvents":null,"rotation":[{"direction":"x","degree":0},{"direction":"y","degree":0},{"direction":"z","degree":0}],"thick":null,"scale":{"x":1,"y":1,"z":1},"BindDevId":null,"BindDevName":null,"devInfo":null,"BindMeteId":null,"BindMeteName":null});returnmodels;varalarmmarks=[];//添加机柜for(vari=1;i=18;i++){var_cab=getCabinetModel("ITC_cab_A_"+i,{x:1,y:1,z:1},{"x":,"y":,"z":-+(i-1)*},[{"direction":"y","degree":0}]);models.push(_cab);if(Math.random()0.8){varalarmLeavel=Math.floor(Math.random()*4)+"0";varmarks=modelBussiness.addMark("ITC_cab_A_"+i+"Mark",{"x":,"y":,"z":-+(i-1)*},alarmLeavel);alarmmarks.push({row:0,col:i,alarmLevel:alarmLeavel});models=models.concat(marks);}}for(vari=1;i=18;i++){var_cab=getCabinetModel("ITC_cab_A_"+(i+18),{x:1,y:1,z:1},{"x":,"y":,"z":-+(i-1)*},[{"direction":"y","degree":0}]);models.push(_cab);if(Math.random()0.8){varalarmLeavel=Math.floor(Math.random()*4)+"0";alarmmarks.push({row:1,col:i,alarmLevel:alarmLeavel});varmarks=modelBussiness.addMark("ITC_cab_A_"+(i+18)+"Mark",{"x":,"y":,"z":-+(i-1)*},alarmLeavel);models=models.concat(marks);}}for(vari=1;i=18;i++){var_cab=getCabinetModel("ITC_cab_A_"+(i+36),{x:1,y:1,z:1},{"x":0,"y":,"z":-+(i-1)*},[{"direction":"y","degree":0}]);models.push(_cab);if(Math.random()0.8){varalarmLeavel=Math.floor(Math.random()*4)+"0";alarmmarks.push({row:2,col:i,alarmLevel:alarmLeavel});varmarks=modelBussiness.addMark("ITC_cab_A_"+(i+36)+"Mark",{"x":0,"y":,"z":-+(i-1)*},alarmLeavel);models=models.concat(marks);}}for(vari=1;i=18;i++){var_cab=getCabinetModel("ITC_cab_A_"+(i+54),{x:1,y:1,z:1},{"x":-,"y":,"z":-+(i-1)*},[{"direction":"y","degree":0}]);models.push(_cab);if(Math.random()0.8){varalarmLeavel=Math.floor(Math.random()*4)+"0";alarmmarks.push({row:3,col:i,alarmLevel:alarmLeavel});varmarks=modelBussiness.addMark("ITC_cab_A_"+(i+54)+"Mark",{"x":-,"y":,"z":-+(i-1)*},alarmLeavel);models=models.concat(marks);}}for(vari=1;i=18;i++){var_cab=getCabinetModel("ITC_cab_A_"+(i+72),{x:1,y:1,z:1},{"x":-,"y":,"z":-+(i-1)*},[{"direction":"y","degree":0}]);models.push(_cab);if(Math.random()0.8){varalarmLeavel=Math.floor(Math.random()*4)+"0";alarmmarks.push({row:4,col:i,alarmLevel:alarmLeavel});varmarks=modelBussiness.addMark("ITC_cab_A_"+(i+72)+"Mark",{"x":-,"y":,"z":-+(i-1)*},alarmLeavel);models=models.concat(marks);}//varserversGroup=getServerModel3("ITC_cab_A_"+(i+72)+"_sGroup",Math.floor(Math.random()*7),{"x":-,"y":,"z":-+(i-1)*},{x:1,y:1,z:1},0);//models.push(serversGroup);}page.alarmmarks=alarmmarks;returnmodels;}

二、异常设备视角,查看异常机柜,其它机柜隐藏虚化。

实现虚化比较简单:

直接获取非异常设备的名称列表,然后修改他们的透明度

//异常设备ModelBussiness.prototype.abnormalDevInfo=function(){if(modelBussiness.showState!=0){return;}this.showState=-1;//清除高亮边框if(modelBussiness.lightBorderModel){modelBussiness.


转载请注明:http://www.aierlanlan.com/rzfs/5172.html

  • 上一篇文章:
  •   
  • 下一篇文章: