使用three.js创建3D机房模型-分享一

最新推荐文章于 2024-10-15 13:03:08 发布

w844916072

最新推荐文章于 2024-10-15 13:03:08 发布

阅读量4.8k three.js

原文链接：https://www.cnblogs.com/yeyunfei/p/6189661.html

three.js 专栏收录该内容

13 篇文章 46 订阅

二、源码

封装自己的模型库，这是初始的模型库，较为简陋了，牛逼的库都是不断的迭代个几百次的，不到的地方还望指正，互相学习共同进步

--这里封装一下就叫做.js--

   1 /*

  12 function () { }
  13 var Obj = null;
  14 w3dshow.prototype.start = function () {
  15     //此处用于判断浏览器
  16     
  17     //开始
  18     var _this = this;
  19     Obj = _this;
  20     _this.initThree(_this.fId);
  21     _this.initCamera();
  22     _this.initScene();
  23     _   26     //添加3D对象
  27     $.each(_this.objList, function (index,_obj) {
  28         _this.InitAddObject(_obj);
  29     });
  30     _this.initMouseCtrl();
  31     //创建按钮
  32     _this.addBtns(_this.btns);
  33 
  34     _this.animation();
  35   
  36 }
  37 /*
  38 方法：初始化
  39 fid 画布所属div的Id
  40 option:参数 {
  41             antialias:true,//抗锯齿效果为设置有效
  42             clearCoolr:0xFFFFFF,
  43             showHelpGrid:false,//是否显示网格线
  44                 }
  45 */
  46 w3dshow.prototype.init = function (_fId, _option,_datajson) {
  47     //参数处理
  48     this.option = new Object();
  49     this.opt 器
  57     this.camera = null;//摄像机
  58     this.scene = null;//场景
  59     this.SELECTED=null;
  60     this.objects = [];
  61     this.mouseClick = new THREE.Vector2();
  62     this.raycaster = new THREE.Raycaster();
  63     this.controls = null;//鼠标控制器
  64     this.objList = _datajson.objects;//对象列表
  65     this.eventList = _datajson.events;//事件对象列表
  66     this.btns = _datajson.btns;//按钮列表
  67     var _this = this;
  68 }
  69 //初始化渲染器
  70 w3dshow.prototype.initThree = function () {
  71     var _this = this;
  72     _this.renderer = new THREE.WebGLRenderer({ alpha: true, antialias: _this.option.antialias });
  73     _this oft = true;
  78     //事件
  79     _this.renderer.domElement.addEventListener('mousedown', _this.onDocumentMouseDown, false);
  80     _this.renderer.domElement.addEventListener('mousemove', _this.onDocumentMouseMove, false);
  81 }
  82 //初始化摄像机
  83 w3dshow.prototype.initCamera = function () {
  84     var _this = this;
  85     _this.camera = new THREE.PerspectiveCamera(45, _this.width / _this.height, 1, 100000);
  86     _this.camera.name = 'mainCamera';
  87     _this.camera.position.x =0;
  88     _thi  x: 0, y: 0, z: 0 });
  94     _this.objects.push(_this.camera);
  95 }
  96 //创建场景
  97 w3dshow.prototype.initScene=function() {
  98     var _this = this;
  99     _this.scene = new THREE.Scene();
 100 }
 101 //添加对象
 102 w3dshow.prototype.addObject = function (_obj) {
 103     var _this = Obj;
 104     _this.objects.push(_obj);
 105     _this.scene.add(_obj);
 106 }
 107 //创建网格线
 108 w3dshow.prototype.initHelpGrid = function () {
ototype.initLight = function () {
 117     /*
 118     AmbientLight: 环境光，基础光源，它的颜色会被加载到整个场景和所有对象的当前颜色上。
 119 PointLight：点光源，朝着所有方向都发射光线
 120 SpotLight ：聚光灯光源：类型台灯，天花板上的吊灯，手电筒等
 121 DirectionalLight：方向光，又称无限光，从这个发出的光源可以看做是平行光.
 122     */
 123     var _this = this;
 124     var light = new THREE.AmbientLight(0xcccccc);
 125     light.position.set(0, 0,0);
 126     _this.scene.add(light);
 127     var ligh 
 134 }
 135 //创建鼠标控制器
 136 w3dshow.prototype.initMouseCtrl=function() {
 137     var _this = thi  140 }
 141 //控制器回调
 142 w3dshow.prototype.updateControls = function () {
 143     
 144    //controls.update();
 145 }
 146 //循环渲染界面
 147 w3dshow.prototype.animation = function () {
 148     var _this = Obj;
 149     if (TWEEN != null && typeof (TWEEN) != 'undefined') {
 150         TWEEN.update();
 151     }
 152  154 }
 155 
 156 /*
 157 添加对象
 158 */
 159 w3dshow.prototype.InitAddObject = function (_obj) {
 160     192 }
 193 
 194 //创建地板
 195 w3dshow.prototype.CreateFloor = function (_obj) {
 196     v  199 }
 200 //创建墙体
 201 w3dshow.prototype.CreateWall = function (_this, _obj) {
 202     if (_this == null) {
 203   //。。。 249 }
 250 //挖洞
 251 w3dshow.prototype.CreateHole = function (_this, _obj) {
 252     if (_this == null) {
 253         _this = this;
 254     }
 255    290 }
 291 //模型合并 使用ThreeBSP插件mergeOP计算方式 -表示减去 +表示加上 
 292 w3dshow.prototype.mergeModel = function (_this, mergeOP, _fobj, _sobj) {
 293      326     result.uuid= _fobj.uuid+mergeOP+_sobj.uuid;
 327     result.name=_fobj.name+mergeOP+_sobj.name;
 328     result.material.needsUpdate = true;
 329     result.geometry.buffersNeedUpdate = true;
 330     result.geometry.uvsNeedUpdate = true;
 331     var _foreFaceSkin = null;
 332     for (var i = 0; i < result.geometry.faces.length; i++) {
 333         var _faceset = false;
 334         for (var j = 0; j < _fobj.geometry.faces.length; j++) {
 335             if (result.geometry.faces[i].vertexNormals[0].x === _fobj.geometry.faces[j].vertexNormals[0].x
 336                 && result.geometry.faces[i].vertexNormals[0].y === _fobj.geometry.faces[j].vertexNormals[0].y
 337                 && result.geometry.faces[i].vertexNormals[0].z === _fobj.geometry.faces[j].vertexNormals[0].z
 338                  && result.geometry.faces[i].vertexNormals[1].x === _fobj.geometry.faces[j].vertexNormals[1].x
 339                 && result.geometry.faces[i].vertexNormals[1].y === _fobj.geometry.faces[j].vertexNormals[1].y
 340                 && result.geometry.faces[i].vertexNormals[1].z === _fobj.geometry.faces[j].vertexNormals[1].z
 341                 && result.geometry.faces[i].vertexNormals[2].x === _fobj.geometry.faces[j].vertexNormals[2].x
 342         etry.faces[j].color.b * 0x0000ff;
 346                 _faceset =true;
 347             }
 348         }
 349         if (_faceset == false){
 350             for(var j = 0; j < _sobj.geometry.faces.length; j++) {
 351                 if (result.geometry.faces[i].vertexNormals[0].x === _sobj.geometry.faces[j].vertexNormals[0].x
 352                     && result.geometry.faces[i].vertexNormals[0].y === _sobj.geometry.faces[j].vertexNormals[0].y
 353                     && result.geometry.faces[i].vertexNormals[0].z === _sobj.geometry.faces[j].vertexNormals[0].z
 354                      && result.geometry.faces[i].vertexNormals[1].x === _sobj.geometry.faces[j].vertexNormals[1].x
 355                     && result.geometry.faces[i].vertexNormals[1].y === _sobj.geometry.faces[j].vertexNormals[1].y
 356              364                 }
 365             }
 366         }
 367         if (_faceset == false) {
 368             result.geometry.faces[i].color.setHex(_foreFaceSkin);
 369         }
 370     // result.geometry.faces[i].materialIndex = i
 371     }
 372     result.castShadow = true;
 373     result.receiveShadow = true;
 374     return result;
 375 }
 376 //创建盒子体
 377 w3dshow.prototype.createCube = function (_this, _obj) {
 378     if (_this == null) {
 379         _this = this;
 380     }
 381     var _length = _obj.length || 1000;//默认1000
 382     var _width = _obj.width || _length;
 383     var _h 
 395     var skin_up_obj = {
 396         vertexColors: THREE.FaceColors
 397     }
 398     var skin_down_obj = skin_up_obj,
 399         skin_fore_obj = skin_up_obj,
 400         skin_behind_obj = skin_up_obj,
 401         skin_left_obj = skin_up_obj,
 402         skin_right_obj = skin_up_obj;
 403     var skin_opacity = 1;
 404     if (_obj.style != null && typeof (_obj.style) != 'undefined'
 405         && _obj.style.skin != null && typeof (_obj.style.skin) != 'undefined') {
 406         //透明度
 407         if (_obj.style.skin.opacity != null && typeof (_obj.style.skin.opacity) != 'undefined') {
 408             skin_opacity = _obj.style.skin.opacity;
 409             console.log(skin_opacity)
 410         }
 411         //上
 412         skin_up_obj = _this.createSkinOptionOnj(_this, _length, _width, _obj.style.skin.skin_up, cubeGeometry, 4);
 413         //下
 414         skin_down_obj = _this.createSkinOptionOnj(_this, _length, _width, _obj.style.skin.skin_down, cubeGeometry, 6);
 415         //前
 416         skin_fore_obj = _this.createSkinOptionOnj(_this, _length, _width, _obj.style.skin.skin_fore, cubeGeometry, 0);
 417         //后
 418         skin_behind_obj = _this.createSkinOptionOnj(_this, _length, _width, _obj.style.skin.skin_behind, cubeGeometry, 2);
 419         //左
 420         skin_left_obj = _this.createSkinOptionOnj(_this, _length, _width, _obj.style.skin.skin_left, cubeGeometry, 8);
 421         //右
 422         skin_right_obj = _this.createSkinOptionOnj(_this, _length, _width, _obj.style.skin.skin_right, cubeGeometry, 10);
 423     }
 424     var cubeMaterialArray = [];
 425     cubeMaterialArray.push(new THREE.MeshLambertMaterial(skin_fore_obj));
 426     cubeMaterialArray.push(new THREE.MeshLambertMaterial(skin_behind_obj));
 427     cubeMaterialArray.push(new THREE.MeshLambertMaterial(skin_up_obj));
 428     cubeMaterialArray.push(new THREE.MeshLambertMaterial(skin_down_obj));
 429     cubeMaterialArray.push(new THREE.MeshLambertMaterial(skin_right_obj));
 430     cubeMaterialArray.push(new THREE.MeshLambertMaterial(skin_left_obj));
 431     var cubeMaterials = new THREE.MeshFaceMaterial(cubeMaterialArray);
 432     cube = new THREE.Mesh(cubeGeometry, cubeMaterials);
 433     cube.castShadow = true;
 434     cube.receiveShadow = true;
 435     cube.uuid = _obj.uuid;
 436     cube.name =  446                     break;
 447                 case 'z':
 448                     cube.rotateZ(rotation_obj.degree);
 449                     break;
 450                 case 'arb':
 451                     cube.rotateOnAxis(new THREE.Vector3(rotation_obj.degree[0], rotation_obj.degree[1], rotation_obj.degree[2]), rotation_obj.degree[3]);
 452                     break;
 453             }
 454         });
 455     }
 456 
 457     return cube;
 458 }
 459 //创建二维平面-长方形
 460 w3dshow.prototype.createPlaneGeometry = function (_this,_obj) {
 461           //options={           
 462           //    width:0,
 463           //    height:0,
 464           //    pic:"",
 465           //    transparent:true,
 466           //    opacity:1
 467     //    blending:false,
 468     //position: { x:,y:,z:},
 469     //rotation: { x:,y:,z:},
 470     //}
 471   
 472    var  options = _obj;
 473     if (typeof options.pic == "string") {//传入的材质是图片路径，使用 textureloader加载图片作为材质
 474         var loader = new THREE.TextureLoader();
 475         loader.setCrossOrigin(this.crossOrigin);
 476         var texture = loader.load(options.pic, function () { }, undefined, function () { });
 477     } else {
 478         var texture = new THREE.CanvasTexture(options.pic)
 479     }
 480     var MaterParam = {//材质的参数
 481         map: texture,
 482         overdraw: true,
 483         side: THREE.FrontSide,
 484         //              blending: THREE.AdditiveBlending,
 485         transparent: options.transparent,
 486         //needsUpdate:true,
 487         //premultipliedAlpha: true,
 488         opacity: options.opacity
 489     }
 490     if (options.blending) {
 491         MaterParam.blending = THREE.AdditiveBlending//使用饱和度叠加渲染
 492     }
 493     var plane = new THREE.Mesh(
 494         new THREE.PlaneGeometry(options.width, options.height, 1, 1),
 495         new THREE.MeshBasicMaterial(MaterParam)
 496     );
 497     plane.position.x = options.position.x;
 498  502     plane.rotation.z = options.rotation.z;
 503     return plane;
 504 }
 505 //创建空柜子
 506 w3dshow.prototype.createEmptyCabinet = function (_this, _obj) {
 507     /* 参数demo
 508     {
 509     show:true,
 510     name: 'test',
 511     uuid: 'test',
 512    rotation: [{ direction: 'y', degree: 0.25*Math.PI}],//旋转     uuid:'',
 513     objType: 'emptyCabinet',
 514     transparent:true,
 515     size:{length:50,width:60,height:200, thick:2},
 516     position: { x: -220, y: 105, z: -150 },
 517     doors: {
 518         doorType:'lr',// ud门 lr左右门
 519         doorSize:[1],
 520         skins:[ {
 521             skinColor: 0x333333,
 522             skin_fore: {
 523                 imgurl: "../datacenterdemo/res/rack_door_back.jpg",
 524             },
 525             skin_behind: {
 526                 imgurl: "../datacenterdemo/res/rack_front_door.jpg",
 527             }
 528         }]
 529     },
 530     skin:{
 531             skinColor: 0xdddddd,
 532             
 533                 skin:{
 534                             skinColor: 0xdddddd,
 535                             skin_up: { imgurl: "../datacenterdemo/res/rack_door_back.jpg" },
 536                             skin_down: { imgurl: "../datacenterdemo/res/rack_door_back.jpg" },
 537                             skin_fore: { imgurl: "../datacenterdemo/res/rack_door_back.jpg" },
 538                             skin_behind: { imgurl: "../datacenterdemo/res/rack_door_back.jpg" },
 539                             skin_left: { imgurl: "../datacenterdemo/res/rack_door_back.jpg" },
 540                             skin_right: { imgurl: "../datacenterdemo/res/rack_door_back.jpg" },
 541                 }
 542         
 543         }
 544 }
 545     */
 546     var _this = Obj;
 547     //创建五个面
 548     //上
 549     var upobj= {
 550         show: true,
 551         uuid: "",
 552         name: '',
 553         objType: 'cube',
 554         length: _obj.size.length+1,
 555         width: _obj.size.width ,
 556         height: _obj.size.thick + 1,
 557         x: _obj.position.x+1,
 558         y: _obj.position.y+(_obj.size.height/2-_obj.size.thick/2),
 559         z:_obj.position.z,
 560         style: {
 561             skinColor: _obj.skin.skinColor,
 562             skin: _obj.skin.skin_up.skin
 563         }
 564     }
 565     var upcube = _this.createCube(_this, upobj);
 566     //左
 567     var leftobj = {
 568         show: true,
 569         uuid: "",
 570         name: '',
 571         objType: 'cube',
 572         length: _obj.size.length,
 573         width: _obj.size.thick,
 574         height: _obj.size.height,
 575         x: 0,
 576         y: -(_obj.size.height / 2 - _obj.size.thick / 2),
 577         z: 0 - (_obj.size.width / 2 - _obj.size.thick / 2) - 1,
 578         style: {
 579             skinColor: _obj.skin.skinColor,
 580             skin: _obj.skin.skin_left.skin
 581         }
 582     }
 583     var leftcube = _this.createCube(_this, leftobj);
 584     var Cabinet = _this.mergeModel(_this, '+', upcube, leftcube);
 585     //右
 586     var Rightobj = {
 587         show: true,
 588         uuid: "",
 589         name: '',
 590         objType: 'cube',
 591         length: _obj.size.length,
 592         width: _obj.size.thick,
 593         height: _obj.size.height,
 594         x: 0,
 595         y: -(_obj.size.height / 2 - _obj.size.thick / 2),
 596         z: (_obj.size.width / 2 - _obj.size.thick / 2)+1,
 597         style: {
 598             skinColor: _obj.skin.skinColor,
 599             skin: _obj.skin.skin_right.skin
 600         }
 601     }
 602     var Rightcube = _this.createCube(_this, Rightobj);
 603     Cabinet = _this.mergeModel(_this, '+', Cabinet, Rightcube);
 604     //后
 605     var Behidobj = {
 606         show: true,
 607         uuid: "",
 608         name: '',
 609         objType: 'cube',
 610         length: _obj.size.thick,
 611         width: _obj.size.width,
 612         height: _obj.size.height,
 613         x: (_obj.size.length / 2 - _obj.size.thick / 2)+1,
 614         y: -(_obj.size.height / 2 - _obj.size.thick / 2),
 615         z:0,
 616         style: {
 617             skinColor: _obj.skin.skinColor,
 618            skin: _obj.skin.skin_behind.skin
 619         }
 620     }
 621     var Behindcube = _this.createCube(_this, Behidobj);
 622     Cabinet = _this.mergeModel(_this, '+', Cabinet, Behindcube);
 623     //下
 624     var Downobj = {
 625         show: true,
 626         uuid: "",
 627         name: '',
 628         objType: 'cube',
 629         length: _obj.size.length+1,
 630         width: _obj.size.width,
 631         height: _obj.size.thick,
 632   645     tempobj.name = _obj.name;
 646     tempobj.uuid = _obj.uuid;
 647     Cabinet.name = _obj.shellname,
 648     _this.objects.push(Cabinet);
 649     tempobj.position = Cabinet.position;
 650     //门
 651     if (_obj.doors != null && typeof (_obj.doors) != 'undefined') {
 652         var doors = _obj.doors;
 653         if (doors.skins.length == 1) {//单门
 654             var singledoorobj = {
 655                 show: true,
 656                 uuid:"",
 657                 name: _obj.doors.doorname[0],
 658                 objType: 'cube',
 659                 length: _obj.size.thick,
 660                 width: _obj.size.width,
 661                 height: _obj.size.height,
 662                 x: _obj.position.x - _obj.size.length / 2 - _obj.size.thick / 2,
 663                 y: _obj.position.y,
 664  672             tempobj.add(singledoorcube);
 673         } else if (doors.skins.length > 1) {//多门
 674 
 675 
 676         }
 677 
 678     }
 679 
 680     if (_obj.rotation != null && typeof (_obj.rotation) != 'undefined' && _obj.rotation.length > 0) {
 681         $.each(_obj.rotation, function (index, rotation_obj) {
 682             switch (rotation_obj.direction) {
 683                 case 'x':
 684                     tempobj.rotateX(rotation_obj.degree);
 685                     break;
 686            696         });
 697     }
 698   tation.y;
 706     var tmpobj2 = _this.createPlaneGeometry(_this, _obj);
dth = 128,imgheight=128;
 712     if (_obj.width != null&& typeof (_obj.width) != 'undefined') {
 713         imgwidth = _obj.width;
 714     }
 715     if (_obj.height != null && typeof (_obj.height) != 'undefined') {
 716         imgheight = _obj.height;
 717     }
 718     var texture = new THREE.TextureLoader().load(_obj.imgurl);
 719     var _repeat = false;
 720     if (_obj.repeatx != null && typeof (_obj.repeatx) != 'undefined' && _obj.repeatx==true) {
 721         texture.wrapS = THREE.RepeatWrapping;
 722         _repeat = true;
 723     }
 724     if (_obj.repeaty != null && typeof (_obj.repeaty) != 'undefined' && _obj.repeaty == true) {
 725         texture.wrapT = THREE.RepeatWrapping;
 726         _repeat = true;  736         if (_this.commonFunc.hasObj(_obj.imgurl)) {
 737             return {
 738                 map: _this.createSkin(flength, fwidth, _obj),transparent:true
 739             }
 740         } else {
 741             if (_this.commonFunc.hasObj(_obj.skinColor)) {
 742                 _cube.faces[_cubefacenub].color.setHex(_obj.skinColor);
 743                 _cube.faces[_cubefacenub + 1].color.setHex(_obj.skinColor);
 744             }
 745             770         $.each(_this.objects, function (index,_obj) {
 771             if (_obj.name != null && _obj.name != '') {
 772                 if (_obj.name == _objname) {
 773                     findedobj = _obj;
 774                     return true;
 775                 }
 776             }
 777         });
 778         return findedobj;
 779     },
 780     //复制对象
 781     cloneObj: function (_objname, newparam) {
 782         /*newparam
 783         {
 784         show: true,
 785         uuid:
 786         copyfrom: 'cabinet1_1',
 787         name:
 788         childrenname:[]
 789         objType: 'cloneObj',
 790         position:{x:y:z:}//相对复制品的
 791         scale:{x:1,y:1,z:1}
 792          rotation: [{ direction: 'y', degree: 0.25*Math.PI}],//旋转     uuid:'',
 793 tion) {
 820                         case 'x':
 821                             newobj.rotateX(rotation_obj.degree);
 822                             break;
 823                         case 'y':
 824  834         }
 835         newobj.name = newparam.name;
 836         newobj.uuid = newparam.uuid;
 837         return h > 0) {
 847                 $.each(_obj.material.materials, function (index,obj) {
 848                     obj.emissive.setHex(_color);
 849                 });
 850             }
 851         }
 852     },
 853     //添加图片标识
 854     addIdentification: function (_objname, _obj) {
 855         /*
 856  879     },
 880     //添加文字
 881     makeTextSprite: function (_objname, parameters)
 882     {
 883         var _this = Obj;
 884      909         sprite.name = parameters.name;
 910         sprite.scale.set(0.5 * fontsize, 0.25 * fontsize, 0.75 * fontsize);
 911         _this.addObject(sprite);
 912         }
 913 }
 914 w3dshow.prototype.loadObj = function (_obj) {
 915     var jsload  927         });
 928 }
 929 
 930 //添加按钮
 931 w3dshow.prototype.addBtns = function (_btnobjs) {
 9  _obj.btnTitle + '" id="' + _obj.btnid + '" />');
 937         
 947 var dbclick =0;
 948 w3dshow.prototype.onDocumentMouseDown = function (event) {
 949     dbclick++;
 950     var _this = Obj;
 951       984 
 985 }
 986 
 987 
 988 w3dshow.prototype.addTestObj = function () {
 989     
 990     var _this = Obj;
 991    
 992     //  0*Math.PI, z: 0 },
1014     //    blending: false
1015     //});
1016 }

三、库也封装好了下面就直接用呗

这个也存成一个文件，姑且先叫做data.js吧

100

101

102

103

104

105

106

107

108

109

110

111

112

113

114

115

116

117

118

119

120

121

122

123

124

125

126

127

128

129

130

131

132

133

134

135

136

137

138

139

140

141

142

143

144

145

146

147

148

149

150

151

152

153

154

155

156

157

158

159

160

161

162

var msjstation;

function threeStart() {

var initOption = {

antialias: true,

showHelpGrid: false,

clearCoolr: 0x112233

};

msjstation = new ();

var Aobjects = {

function () { });

}

},

{

obj_name: "doorLeft",

obj_uuid: "",

obj_event: function (_obj) {

var doorstate = "close";

var tempobj = null;

if (_obj.doorState != null && typeof (_obj.doorState) != 'undefined') {

doorstate = _obj.doorState;

}

_obj.doorState = (doorstate == "close" ? "open" : "close");

new TWEEN.Tween(tempobj.rotation).to({

y: (doorstate == "close" ? -0.25 * 2 * Math.PI : 0 * 2 * Math.PI)

}, 10000).easing(TWEEN.Easing.Elastic.Out).start();

}

},

{

obj_name: "cabinetdoor3_1",

obj_uuid: "",

obj_event: function (_obj) {

opcabinetdoor(_obj);

}

},

{

findObject:function(_objname){//查找某一类符合名称的对象

if (_objname.indexOf("cabinet") >= 0 && _objname.indexOf("door") >= 0) {

return true;

} else {

return false;

}

},

obj_uuid: "",

obj_event: function (_obj) {

opcabinetdoor(_obj);

}

},

{

findObject: function (_objname) {//查找某一类符合名称的对象

if (_objname.indexOf("equipment") >= 0 && _objname.indexOf("card") >= 0) {

return true;

} else {

return false;

}

},

obj_uuid: "",

obj_event: function (_obj) {

var cardstate = "in";

if (_obj.cardstate != null && typeof (_obj.cardstate) != 'undefined') {

cardstate = _obj.cardstate;

} else {

_obj.cardstate = "out";

}

new TWEEN.Tween(_obj.position).to({

x: (cardstate == "in" ? _obj.position.x - 50 : _obj.position.x + 50),

}, 1000).onComplete(function () { _obj.cardstate = cardstate == "in" ? "out" : "in"; }).start();

}

],

mouseDown: {

},

mouseUp: {

},

mouseMove: {

}

},

btns: [

btnimg: "../datacenterdemo/res/usage.png",

event: function () {

}

},

{

btnid: "btn_edit",

btnTitle: "拖拽机柜",

btnimg: "../datacenterdemo/res/edit.png",

event: function () {

}

},

{

btnid: "btn_alarm",

btnTitle: "告警巡航",

btnimg: "../datacenterdemo/res/alarm.png",

event: function () {

var mainCamera = Obj.commonFunc.findObject("mainCamera");//主摄像机

var doorRight = Obj.commonFunc.findObject("doorRight");

mainCamera.lookAt(doorRight.position);

new TWEEN.Tween(mainCamera.position).to({

x:-300, y:200, z:-700,

}, 5000).onComplete(function () {

openRightDoor(Obj.commonFunc.findObject("doorRight"), function () {

var cabinet3_1 = Obj.commonFunc.findObject("cabinet3_1");

mainCamera.lookAt(cabinet3_1.position);

new TWEEN.Tween(mainCamera.position).to({

x: -300, y: 150, z: -200,

}, 5000).onComplete(function () {

mainCamera.lookAt(cabinet3_1.position);

}).start();

});

}).start();

}

},

]

}

function opcabinetdoor(_obj) {

var doorstate = "close";

var tempobj = null;

if (_obj.doorState != null && typeof (_obj.doorState) != 'undefined') {

doorstate = _obj.doorState;

tempobj = _obj.parent;

} else {

console.log("add parent");

var _objparent = _obj.parent;

tempobj = new THREE.Object3D();

tempobj.position.set(_obj.position.x, _obj.position.y, _obj.position.z + _obj.geometry.parameters.depth / 2);

_obj.position.set(0, 0, -_obj.geometry.parameters.depth / 2);

tempobj.add(_obj);

_objparent.add(tempobj);

}

_obj.doorState = (doorstate == "close" ? "open" : "close");

new TWEEN.Tween(tempobj.rotation).to({

y: (doorstate == "close" ? 0.25 * 2 * Math.PI : 0 * 2 * Math.PI)

}, 1000).start();

}

function openRightDoor(_obj,func) {

var doorstate = "close";

var tempobj = null;

if (_obj.doorState != null && typeof (_obj.doorState) != 'undefined') {

doorstate = _obj.doorState;

tempobj = _obj.parent;

} else {

console.log("add parent");

var _objparent = _obj.parent;

tempobj = new THREE.Object3D();

tempobj.position.set(_obj.position.x - _obj.geometry.parameters.width / 2, _obj.position.y, _obj.position.z);

_obj.position.set(_obj.geometry.parameters.width / 2, 0, 0);

tempobj.add(_obj);

_objparent.add(tempobj);

}

_obj.doorState = (doorstate == "close" ? "open" : "close");

new TWEEN.Tween(tempobj.rotation).to({

y: (doorstate == "close" ? 0.25 * 2 * Math.PI : 0 * 2 * Math.PI)

}, 10000).easing(TWEEN.Easing.Elastic.Out).onComplete(func()).start();

}

该封的都封好了

然后就创建一个页面直接运行呗，那就简单了，直接在onload事件里面调用一下就行了。

其它相关文章：

如何用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机房(升级版)-普通机房

好了，先写这么多，嘻嘻，其实也没写啥东西全是贴码

后面再加博文讲解吧。

使用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

};<br>var serverModel=WT.commonFunc.createServer(server);//服务器模型生成

　　1.2、服务器端口

　　　　var postParam=webApi.getPortsFromServerByServerid(serverid);//获取服务端口参数

1	`<span style="font-size: 16px;">　　WT.commonFunc.createPorts(portParam);//更具服务器id创建服务器端口</span><br><span style="font-size: 16px;">　这样服务器的效果就出来了</span>`

2.1机柜模型实现

由于机柜的模型是可以运动分解的模型这样模型的代码要稍微多一点这样才能做到控制机柜的每一个有意义的零件

机柜模型代码如下：

{
                show: true,
                name: 'cabinet3',
                actionSign: "cabinet1",
                shellname: 'cabinet3_emptyCabinetshell',
                uuid: '',
                // rotation: [{ direction: 'y', degree: 0.25*Math.PI}],//旋转     uuid:'',
                objType: 'emptyCabinet2',
                transparent: true,
                size: { length: 66, width: 70, height: 200, thick: 2 },
                position: { x: 0, y: 305, z: 0 },
                doors: {
                    doorType: 'lr',// ud上下门 lr左右门 单门可以缺省
                    doorSize: [1],
                    doorname: ['cabinet3_emptyCabinetdoor_01'],
                    skins: [{
                        skinColor: 0x333333,
                        skin_fore: {
                            imgurl: "../../img/3dImg/rack_door_back.jpg",
                        },
                        skin_behind: {
                            imgurl: "../../img/3dImg/rack_front_door.jpg",
                        }
                    }]
                },
                style: {
                    skinColor: 0xff0000,
                    skin: {
                        skinColor: 0xff0000,
                        skin_up: { imgurl: "../../img/3dImg/rack_door_back.jpg" },
                        skin_down: { imgurl: "../../img/3dImg/rack_door_back.jpg" },
                        skin_fore: {
                            skinColor: 0xff0000,
                            imgurl: "../../img/3dImg/rack1.png"
                        },
                        skin_behind: {
                            skinColor: 0xff0000,
                            imgurl: "../../img/3dImg/rack2.png"
                        },
                        skin_left: { imgurl: "../../img/3dImg/rack_door_back.jpg" },
                        skin_right: { imgurl: "../../img/3dImg/rack_door_back.jpg" },
                    }
                }
            }

机柜效果如下

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

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

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

3.1组合成微模块这样一个微模块就实现了

在这里我们预先微模块都是两行多列的而且中间的距离是机柜厚度的2.5倍所以我们只需要一个机柜的位置参数就可以了

*获取机柜在模块总的位置

*position:[{1,1,uuid-xxxx-xxxx-xxxxx-xx},{1,2,uuid-xxxx-xxxx-xxxxx-xx},{1,3,uuid-xxxx-xxxx-xxxxx-xx}]...

这是一个数组，存储的是行和列以及id

var microModel=THREE.commonFunc.createMicroModule(serverid);

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

二、搭建组合数据中心

首先是环境模型

用json去创建机房环境

[{
    "rotation": [{
        "degree": 0,
        "direction": "x"
    }, {
        "degree": 0,
        "direction": "y"
    }, {
        "degree": 0,
        "direction": "z"
    }],
    "show": true,
    "length": 220,
    "scale": {
        "x": 1,
        "y": 1,
        "z": 1
    },
    "uuid": "",
    "name": "doorCaseTop",
    "width": 24,
    "x": -300,
    "y": 220,
    "z": -350,
    "style": {
        "skinColor": 9095650,
        "skin": {
            "skin_behind": {
                "skinColor": 13819101
            },
            "skin_up": {
                "skinColor": 13819101
            },
            "skin_left": {
                "skinColor": 13819101
            },
            "skin_fore": {
                "skinColor": 13819101
            },
            "skin_down": {
                "skinColor": 13819101
            },
            "skin_right": {
                "skinColor": 13819101
            }
        }
    },
    "objType": "cube",
    "height": 5
}, {
    "rotation": [{
        "direction": "x",
        "degree": 0
    }, {
        "direction": "y",
        "degree": 0
    }, {
        "direction": "z",
        "degree": 0
    }],
    "show": true,
    "length": 20,
    "scale": {
        "x": 1,
        "y": 1,
        "z": 1
    },
    "uuid": "",
    "name": "Leftwall",
    "width": 810,
    "x": 490,
    "y": 120,
    "z": 50,
    "style": {
        "skinColor": 9095650,
        "skin": {
            "skin_up": {
                "skinColor": 14540253
            },
            "skin_down": {
                "skinColor": 14540253
            },
            "skin_fore": {
                "skinColor": 12434877
            },
            "skin_behind": {
                "skinColor": 12434877
            },
            "skin_left": {
                "skinColor": 14540253
            },
            "skin_right": {
                "skinColor": 12434877
            }
        }
    },
    "objType": "cube",
    "height": 240,
    "showSortNub": 1,
    "animation": null,
    "dbclickEvents": null,
    "thick": null,
    "BindDevId": null,
    "BindDevName": null,
    "devInfo": null,
    "BindMeteId": null,
    "BindMeteName": null
}, {
    "rotation": {
        "0": {
            "direction": "x",
            "degree": 0
        },
        "1": {
            "direction": "y",
            "degree": 0
        },
        "2": {
            "direction": "z",
            "degree": 0
        }
    },
    "show": true,
    "length": 1000,
    "scale": {
        "x": 1,
        "y": 1,
        "z": 1
    },
    "uuid": "",
    "childrens": [{
        "op": "-",
        "show": true,
        "uuid": "",
        "name": "doorhole",
        "objType": "cube",
        "width": 20,
        "height": 220,
        "length": 220,
        "x": -300,
        "y": -10,
        "z": 0,
        "style": {
            "skinColor": 9095650
        }
    }, {
        "op": "-",
        "show": true,
        "uuid": "",
        "name": "windowHole",
        "objType": "cube",
        "width": 20,
        "height": 160,
        "length": 500,
        "x": 200,
        "y": 10,
        "z": 0,
        "style": {
            "skinColor": 9095650
        }
    }],
    "name": "forewall",
    "width": 20,
    "x": 0,
    "y": 120,
    "z": -350,
    "style": {
        "skinColor": 9095650,
        "skin": {
            "skin_up": {
                "skinColor": 14737632
            },
            "skin_down": {
                "skinColor": 12434877
            },
            "skin_fore": {
                "skinColor": 12434877
            },
            "skin_behind": {
                "skinColor": 12434877
            },
            "skin_left": {
                "skinColor": 12434877
            },
            "skin_right": {
                "skinColor": 12434877
            }
        }
    },
    "objType": "holeCube",
    "height": 240,
    "showSortNub": 1,
    "animation": null,
    "dbclickEvents": null,
    "thick": null,
    "BindDevId": null,
    "BindDevName": null,
    "devInfo": null,
    "BindMeteId": null,
    "BindMeteName": null
}, {
    "rotation": [{
        "direction": "x",
        "degree": 0
    }, {
        "direction": "y",
        "degree": 0
    }, {
        "direction": "z",
        "degree": 0
    }],
    "show": true,
    "length": 20,
    "scale": {
        "x": 1,
        "y": 1,
        "z": 1
    },
    "uuid": "",
    "name": "Rightwall",
    "width": 810,
    "x": -490,
    "y": 120,
    "z": 50,
    "style": {
        "skinColor": 9095650,
        "skin": {
            "skin_up": {
                "skinColor": 14540253
            },
            "skin_down": {
                "skinColor": 14540253
            },
            "skin_fore": {
                "skinColor": 12434877
            },
            "skin_behind": {
                "skinColor": 12434877
            },
            "skin_left": {
                "skinColor": 13224393
            },
            "skin_right": {
                "skinColor": 14540253
            }
        }
    },
    "objType": "cube",
    "height": 240,
    "showSortNub": 1,
    "animation": null,
    "dbclickEvents": null,
    "thick": null,
    "BindDevId": null,
    "BindDevName": null,
    "devInfo": null,
    "BindMeteId": null,
    "BindMeteName": null
}, {
    "rotation": [{
        "direction": "x",
        "degree": 0
    }, {
        "direction": "y",
        "degree": 0
    }, {
        "direction": "z",
        "degree": 0
    }],
    "show": true,
    "length": 1800,
    "scale": {
        "x": 1,
        "y": 1,
        "z": 1
    },
    "uuid": "",
    "name": "floor_2",
    "width": 1600,
    "x": 32.156,
    "y": -8.708,
    "z": 11.662,
    "style": {
        "skinColor": 9095650,
        "skin": {
            "skin_up": {
                "skinColor": 9991439,
                "imgurl": "../../img/3dImg/grasslight-big.jpg",
                "repeatx": true,
                "width": 512,
                "repeaty": true,
                "height": 512
            },
            "skin_down": {
                "skinColor": 3184895,
                "imgurl": "../../img/3dImg/grasslight-big.jpg"
            },
            "skin_fore": {
                "skinColor": 10592673
            },
            "skin_behind": {
                "skinColor": 2968869
            },
            "skin_left": {
                "skinColor": 2968869
            },
            "skin_right": {
                "skinColor": 2968869
            }
        }
    },
    "objType": "cube",
    "height": 10,
    "showSortNub": 1,
    "animation": null,
    "dbclickEvents": null,
    "thick": null,
    "BindDevId": null,
    "BindDevName": null,
    "devInfo": null,
    "BindMeteId": null,
    "BindMeteName": null
}, {
    "doors": {
        "skins": [{
            "skin_behind": {
                "imgurl": "../../img/3dImg/rack_front_door.jpg"
            },
            "skinColor": 3355443,
            "skin_fore": {
                "imgurl": "../../img/3dImg/rack_door_back.jpg"
            }
        }],
        "doorname": ["cabinet3_2_emptyCabinetdoor_01"],
        "doorType": "lr",
        "doorSize": [1]
    },
    "size": {
        "length": 66,
        "width": 70,
        "thick": 2,
        "height": 200
    },
    "shellname": "cabinet3_2_emptyCabinetshell",
    "show": true,
    "name": "cabinet3_2",
    "scale": {
        "x": 1,
        "y": 1,
        "z": 1
    },
    "style": {
        "skinColor": 16711680,
        "skin": {
            "skin_behind": {
                "imgurl": "../../img/3dImg/rack_door_back.jpg",
                "skinColor": 16711680
            },
            "skin_up": {
                "imgurl": "../../img/3dImg/rack_door_back.jpg"
            },
            "skinColor": 16711680,
            "skin_left": {
                "imgurl": "../../img/3dImg/rack_door_back.jpg"
            },
            "skin_fore": {
                "imgurl": "../../img/3dImg/rack_door_back.jpg",
                "skinColor": 16711680
            },
            "skin_down": {
                "imgurl": "../../img/3dImg/rack_door_back.jpg"
            },
            "skin_right": {
                "imgurl": "../../img/3dImg/rack_door_back.jpg"
            }
        }
    },
    "position": {
        "x": -100,
        "y": 105,
        "z": -80
    },
    "uuid": "",
    "objType": "emptyCabinet",
    "transparent": true
}, {
    "rotation": [{
        "degree": 0.3141592653589793,
        "direction": "y"
    }],
    "name": "FireExtinguisher_3",
    "fileurl": "../../img/3dImg/OBJS/FireExtinguisher.json",
    "scale": {
        "x": 15,
        "y": 12,
        "z": 15
    },
    "position": {
        "x": -460,
        "y": 8,
        "z": -250
    },
    "objType": "jsonobj"
}, {
    "rotation": [{
        "degree": 0.9424777960769379,
        "direction": "y"
    }],
    "show": true,
    "name": "aircondition",
    "length": 60,
    "width": 80,
    "x": -420,
    "y": 130,
    "z": 370,
    "style": {
        "skinColor": 16711422,
        "skin": {
            "skin_fore": {
                "imgurl": "../../img/3dImg/aircondition.jpg"
            }
        }
    },
    "uuid": "",
    "objType": "cube",
    "height": 220
}, {
    "rotation": [{
        "degree": 0,
        "direction": "x"
    }, {
        "degree": 0,
        "direction": "y"
    }, {
        "degree": 0,
        "direction": "z"
    }],
    "show": true,
    "length": 220,
    "scale": {
        "x": 1,
        "y": 1,
        "z": 1
    },
    "uuid": "",
    "name": "doorCaseBottom",
    "width": 24,
    "x": -300,
    "y": 5,
    "z": -350,
    "style": {
        "skinColor": 9095650,
        "skin": {
            "skin_behind": {
                "skinColor": 13819101
            },
            "skin_up": {
                "skinColor": 13819101
            },
            "skin_left": {
                "skinColor": 13819101
            },
            "skin_fore": {
                "skinColor": 13819101
            },
            "skin_down": {
                "skinColor": 13819101
            },
            "skin_right": {
                "skinColor": 13819101
            }
        }
    },
    "objType": "cube",
    "height": 5
}, {
    "rotation": [{
        "degree": 0.3141592653589793,
        "direction": "y"
    }],
    "name": "FireExtinguisher_2",
    "fileurl": "../../img/3dImg/OBJS/FireExtinguisher.json",
    "scale": {
        "x": 15,
        "y": 12,
        "z": 15
    },
    "position": {
        "x": -460,
        "y": 8,
        "z": -230
    },
    "objType": "jsonobj"
}, {
    "show": true,
    "name": "equipment_card_3",
    "length": 60,
    "width": 65,
    "x": -100,
    "y": 145,
    "z": -180,
    "style": {
        "skinColor": 9593611,
        "skin": {
            "skin_behind": {
                "imgurl": "../../img/3dImg/server3.jpg",
                "skinColor": 9593611
            },
            "skin_up": {
                "imgurl": "../../img/3dImg/rack_inside.jpg",
                "skinColor": 9593611
            },
            "skin_left": {
                "imgurl": "../../img/3dImg/rack_inside.jpg",
                "skinColor": 9593611
            },
            "skin_fore": {
                "imgurl": "../../img/3dImg/rack_inside.jpg",
                "skinColor": 9593611
            },
            "skin_down": {
                "imgurl": "../../img/3dImg/rack_inside.jpg",
                "skinColor": 9593611
            },
            "skin_right": {
                "imgurl": "../../img/3dImg/rack_inside.jpg",
                "skinColor": 9593611
            }
        }
    },
    "uuid": "",
    "objType": "cube",
    "height": 30
}, {
    "rotation": [{
        "degree": 0.3141592653589793,
        "direction": "y"
    }],
    "name": "FireExtinguisher_4",
    "fileurl": "../../img/3dImg/OBJS/FireExtinguisher.json",
    "scale": {
        "x": 15,
        "y": 12,
        "z": 15
    },
    "position": {
        "x": -460,
        "y": 8,
        "z": -270
    },
    "objType": "jsonobj"
}, {
    "rotation": [{
        "degree": 0,
        "direction": "x"
    }, {
        "degree": 0,
        "direction": "y"
    }, {
        "degree": 0,
        "direction": "z"
    }],
    "show": true,
    "length": 40,
    "scale": {
        "x": 1,
        "y": 1,
        "z": 1
    },
    "uuid": "",
    "name": "powerDCabinet1_87",
    "width": 80,
    "x": 462,
    "y": 132,
    "z": -223,
    "style": {
        "skinColor": 9095650,
        "skin": {
            "skin_behind": {
                "imgurl": "../../img/3dImg/pdg101.jpg",
                "skinColor": 12639968
            },
            "skin_up": {
                "skinColor": 16777215
            },
            "skin_left": {
                "imgurl": "../../img/3dImg/pdg102.jpg",
                "skinColor": 13692656
            },
            "skin_fore": {
                "imgurl": "../../img/3dImg/pdg103.jpg",
                "skinColor": 12639968
            },
            "skin_down": {
                "skinColor": 12639968
            },
            "skin_right": {
                "imgurl": "../../img/3dImg/pdg104.jpg",
                "skinColor": 13692656
            }
        }
    },
    "objType": "cube",
    "height": 120
}, {
    "show": true,
    "name": "equipment_card_2",
    "length": 60,
    "width": 65,
    "x": -100,
    "y": 120,
    "z": -180,
    "style": {
        "skinColor": 9593611,
        "skin": {
            "skin_behind": {
                "imgurl": "../../img/3dImg/server2.jpg",
                "skinColor": 9593611
            },
            "skin_up": {
                "imgurl": "../../img/3dImg/rack_inside.jpg",
                "skinColor": 9593611
            },
            "skin_left": {
                "imgurl": "../../img/3dImg/rack_inside.jpg",
                "skinColor": 9593611
            },
            "skin_fore": {
                "imgurl": "../../img/3dImg/rack_inside.jpg",
                "skinColor": 9593611
            },
            "skin_down": {
                "imgurl": "../../img/3dImg/rack_inside.jpg",
                "skinColor": 9593611
            },
            "skin_right": {
                "imgurl": "../../img/3dImg/rack_inside.jpg",
                "skinColor": 9593611
            }
        }
    },
    "uuid": "",
    "objType": "cube",
    "height": 20
}, {
    "doors": {
        "skins": [{
            "skin_behind": {
                "imgurl": "../../img/3dImg/rack_front_door.jpg"
            },
            "skinColor": 3355443,
            "skin_fore": {
                "imgurl": "../../img/3dImg/rack_door_back.jpg"
            }
        }],
        "doorname": ["cabinet1_5_emptyCabinetdoor_01"],
        "doorType": "lr",
        "doorSize": [1]
    },
    "size": {
        "length": 66,
        "width": 70,
        "thick": 2,
        "height": 200
    },
    "shellname": "cabinet1_5_emptyCabinetshell",
    "show": true,
    "name": "cabinet1_5",
    "scale": {
        "x": 1,
        "y": 1,
        "z": 1
    },
    "style": {
        "skinColor": 16711680,
        "skin": {
            "skin_behind": {
                "imgurl": "../../img/3dImg/rack_door_back.jpg",
                "skinColor": 16711680
            },
            "skin_up": {
                "imgurl": "../../img/3dImg/rack_door_back.jpg"
            },
            "skinColor": 16711680,
            "skin_left": {
                "imgurl": "../../img/3dImg/rack_door_back.jpg"
            },
            "skin_fore": {
                "imgurl": "../../img/3dImg/rack_door_back.jpg",
                "skinColor": 16711680
            },
            "skin_down": {
                "imgurl": "../../img/3dImg/rack_door_back.jpg"
            },
            "skin_right": {
                "imgurl": "../../img/3dImg/rack_door_back.jpg"
            }
        }
    },
    "position": {
        "x": 300,
        "y": 105,
        "z": 220
    },
    "uuid": "",
    "objType": "emptyCabinet",
    "transparent": true
}, {
    "values": [],
    "name": "btns",
    "objType": "BtnS"
}, {
    "rotation": [{
        "degree": -3.141592653589793,
        "direction": "x"
    }, {
        "degree": 1.2246468525851679e-16,
        "direction": "y"
    }, {
        "degree": -3.141592653589793,
        "direction": "z"
    }],
    "show": true,
    "length": 50,
    "scale": {
        "x": 1,
        "y": 1,
        "z": 1
    },
    "uuid": "",
    "name": "powerDCabinet2_88",
    "width": 80,
    "x": 451,
    "y": 87,
    "z": -83,
    "style": {
        "skinColor": 9095650,
        "skin": {
            "skin_behind": {
                "skinColor": 16448496
            },
            "skin_up": {
                "skinColor": 16777215
            },
            "skin_left": {
                "skinColor": 16448496
            },
            "skin_fore": {
                "imgurl": "../../img/3dImg/pdg201.jpg",
                "skinColor": 16448496
            },
            "skin_down": {
                "skinColor": 12639968
            },
            "skin_right": {
                "skinColor": 16448496
            }
        }
    },
    "objType": "cube",
    "height": 160
}, {
    "doors": {
        "skins": [{
            "skin_behind": {
                "imgurl": "../../img/3dImg/rack_front_door.jpg"
            },
            "skinColor": 3355443,
            "skin_fore": {
                "imgurl": "../../img/3dImg/rack_door_back.jpg"
            }
        }],
        "doorname": ["cabinet1_4_emptyCabinetdoor_01"],
        "doorType": "lr",
        "doorSize": [1]
    },
    "size": {
        "length": 66,
        "width": 70,
        "thick": 2,
        "height": 200
    },
    "shellname": "cabinet1_4_emptyCabinetshell",
    "show": true,
    "name": "cabinet1_4",
    "scale": {
        "x": 1,
        "y": 1,
        "z": 1
    },
    "style": {
        "skinColor": 16711680,
        "skin": {
            "skin_behind": {
                "imgurl": "../../img/3dImg/rack_door_back.jpg",
                "skinColor": 16711680
            },
            "skin_up": {
                "imgurl": "../../img/3dImg/rack_door_back.jpg"
            },
            "skinColor": 16711680,
            "skin_left": {
                "imgurl": "../../img/3dImg/rack_door_back.jpg"
            },
            "skin_fore": {
                "imgurl": "../../img/3dImg/rack_door_back.jpg",
                "skinColor": 16711680
            },
            "skin_down": {
                "imgurl": "../../img/3dImg/rack_door_back.jpg"
            },
            "skin_right": {
                "imgurl": "../../img/3dImg/rack_door_back.jpg"
            }
        }
    },
    "position": {
        "x": 300,
        "y": 105,
        "z": 120
    },
    "uuid": "",
    "objType": "emptyCabinet",
    "transparent": true
}, {
    "doors": {
        "skins": [{
            "skin_behind": {
                "imgurl": "../../img/3dImg/rack_front_door.jpg"
            },
            "skinColor": 3355443,
            "skin_fore": {
                "imgurl": "../../img/3dImg/rack_door_back.jpg"
            }
        }],
        "doorname": ["cabinet2_6_emptyCabinetdoor_01"],
        "doorType": "lr",
        "doorSize": [1]
    },
    "size": {
        "length": 66,
        "width": 70,
        "thick": 2,
        "height": 200
    },
    "shellname": "cabinet2_6_emptyCabinetshell",
    "show": true,
    "name": "cabinet2_6",
    "scale": {
        "x": 1,
        "y": 1,
        "z": 1
    },
    "style": {
        "skinColor": 16711680,
        "skin": {
            "skin_behind": {
                "imgurl": "../../img/3dImg/rack_door_back.jpg",
                "skinColor": 16711680
            },
            "skin_up": {
                "imgurl": "../../img/3dImg/rack_door_back.jpg"
            },
            "skinColor": 16711680,
            "skin_left": {
                "imgurl": "../../img/3dImg/rack_door_back.jpg"
            },
            "skin_fore": {
                "imgurl": "../../img/3dImg/rack_door_back.jpg",
                "skinColor": 16711680
            },
            "skin_down": {
                "imgurl": "../../img/3dImg/rack_door_back.jpg"
            },
            "skin_right": {
                "imgurl": "../../img/3dImg/rack_door_back.jpg"
            }
        }
    },
    "position": {
        "x": 100,
        "y": 105,
        "z": 320
    },
    "uuid": "",
    "objType": "emptyCabinet",
    "transparent": true
}, {
    "doors": {
        "skins": [{
            "skin_behind": {
                "imgurl": "../../img/3dImg/rack_front_door.jpg"
            },
            "skinColor": 3355443,
            "skin_fore": {
                "imgurl": "../../img/3dImg/rack_door_back.jpg"
            }
        }],
        "doorname": ["cabinet1_6_emptyCabinetdoor_01"],
        "doorType": "lr",
        "doorSize": [1]
    },
    "size": {
        "length": 66,
        "width": 70,
        "thick": 2,
        "height": 200
    },
    "shellname": "cabinet1_6_emptyCabinetshell",
    "show": true,
    "name": "cabinet1_6",
    "scale": {
        "x": 1,
        "y": 1,
        "z": 1
    },
    "style": {
        "skinColor": 16711680,
        "skin": {
            "skin_behind": {
                "imgurl": "../../img/3dImg/rack_door_back.jpg",
                "skinColor": 16711680
            },
            "skin_up": {
                "imgurl": "../../img/3dImg/rack_door_back.jpg"
            },
            "skinColor": 16711680,
            "skin_left": {
                "imgurl": "../../img/3dImg/rack_door_back.jpg"
            },
            "skin_fore": {
                "imgurl": "../../img/3dImg/rack_door_back.jpg",
                "skinColor": 16711680
            },
            "skin_down": {
                "imgurl": "../../img/3dImg/rack_door_back.jpg"
            },
            "skin_right": {
                "imgurl": "../../img/3dImg/rack_door_back.jpg"
            }
        }
    },
    "position": {
        "x": 300,
        "y": 105,
        "z": 320
    },
    "uuid": "",
    "objType": "emptyCabinet",
    "transparent": true
}, {
    "childrens": [{
        "childrens": [{
            "childrens": [{
                "rotation": [{
                    "degree": 0,
                    "direction": "x"
                }, {
                    "degree": 0,
                    "direction": "y"
                }, {
                    "degree": 0,
                    "direction": "z"
                }],
                "show": true,
                "radialSegments": 8,
                "scale": {
                    "x": 1,
                    "y": 1,
                    "z": 1
                },
                "uuid": "",
                "points": [{
                    "x": 0,
                    "y": 0,
                    "z": 0
                }, {
                    "x": 0,
                    "y": 35,
                    "z": 0
                }],
                "segments": 64,
                "name": "cM_桌椅1_63OBJCREN0OBJCREN0OBJCREN0",
                "closed": false,
                "style": {
                    "skinColor": 15790833
                },
                "position": {
                    "x": 0,
                    "y": 119.842,
                    "z": 0
                },
                "radius": 3,
                "objType": "tube"
            }, {
                "childrens": [{
                    "rotation": [{
                        "degree": 0,
                        "direction": "x"
                    }, {
                        "degree": 0,
                        "direction": "y"
                    }, {
                        "degree": 0,
                        "direction": "z"
                    }],
                    "show": true,
                    "radialSegments": 8,
                    "scale": {
                        "x": 1,
                        "y": 1,
                        "z": 1
                    },
                    "uuid": "",
                    "points": [{
                        "x": 0,
                        "y": 20,
                        "z": 0
                    }, {
                        "x": 30,
                        "y": 10,
                        "z": 0
                    }, {
                        "x": 40,
                        "y": 0,
                        "z": 0
                    }],
                    "segments": 64,
                    "name": "cM_桌椅1_63OBJCREN0OBJCREN0OBJCREN1OBJCREN0",
                    "closed": false,
                    "style": {
                        "skinColor": 14676206
                    },
                    "position": {
                        "x": 0,
                        "y": 100,
                        "z": 0
                    },
                    "radius": 2,
                    "objType": "tube"
                }, {
                    "segmentsY": 0,
                    "radiusBottom": 4,
                    "segmentsX": 100,
                    "rotation": [{
                        "degree": 1.5707963267948963,
                        "direction": "x"
                    }, {
                        "degree": 0,
                        "direction": "y"
                    }, {
                        "degree": 0,
                        "direction": "z"
                    }],
                    "name": "cM_桌椅1_63OBJCREN0OBJCREN0OBJCREN1OBJCREN1",
                    "scale": {
                        "x": 1,
                        "y": 1,
                        "z": 1
                    },
                    "openEnded": false,
                    "style": {
                        "skinColor": 16776960,
                        "skin": {
                            "skin_up": {
                                "skinColor": 4342338
                            },
                            "skin_side": {
                                "skinColor": 4342338
                            },
                            "skin_down": {
                                "skinColor": 4342338
                            }
                        }
                    },
                    "position": {
                        "x": 40.373,
                        "y": 96.989,
                        "z": -0.2281064684102727
                    },
                    "objType": "cylinder",
                    "radiusTop": 4,
                    "height": 4
                }],
                "rotation": [{
                    "degree": 0,
                    "direction": "x"
                }, {
                    "degree": 0,
                    "direction": "y"
                }, {
                    "degree": 0,
                    "direction": "z"
                }],
                "show": true,
                "name": "cM_桌椅1_63OBJCREN0OBJCREN0OBJCREN1",
                "scale": {
                    "x": 1,
                    "y": 1,
                    "z": 1
                },
                "position": {
                    "x": 0,
                    "y": 0,
                    "z": 0
                },
                "uuid": "",
                "objType": "GroupObj"
            }, {
                "childrens": [{
                    "rotation": [{
                        "degree": 0,
                        "direction": "x"
                    }, {
                        "degree": 0,
                        "direction": "y"
                    }, {
                        "degree": 0,
                        "direction": "z"
                    }],
                    "show": true,
                    "radialSegments": 8,
                    "scale": {
                        "x": 1,
                        "y": 1,
                        "z": 1
                    },
                    "uuid": "",
                    "points": [{
                        "x": 0,
                        "y": 20,
                        "z": 0
                    }, {
                        "x": 30,
                        "y": 10,
                        "z": 0
                    }, {
                        "x": 40,
                        "y": 0,
                        "z": 0
                    }],
                    "segments": 64,
                    "name": "cM_桌椅1_63OBJCREN0OBJCREN0OBJCREN2OBJCREN0",
                    "closed": false,
                    "style": {
                        "skinColor": 14676206
                    },
                    "position": {
                        "x": 0,
                        "y": 100,
                        "z": 0
                    },
                    "radius": 2,
                    "objType": "tube"
                }, {
                    "segmentsY": 0,
                    "radiusBottom": 4,
                    "segmentsX": 100,
                    "rotation": [{
                        "degree": 1.5707963267948963,
                        "direction": "x"
                    }, {
                        "degree": 0,
                        "direction": "y"
                    }, {
                        "degree": 0,
                        "direction": "z"
                    }],
                    "name": "cM_桌椅1_63OBJCREN0OBJCREN0OBJCREN2OBJCREN1",
                    "scale": {
                        "x": 1,
                        "y": 1,
                        "z": 1
                    },
                    "openEnded": false,
                    "style": {
                        "skinColor": 16776960,
                        "skin": {
                            "skin_up": {
                                "skinColor": 4342338
                            },
                            "skin_side": {
                                "skinColor": 4342338
                            },
                            "skin_down": {
                                "skinColor": 4342338
                            }
                        }
                    },
                    "position": {
                        "x": 40.373337511555206,
                        "y": 96.98891109282378,
                        "z": -0.2281064684102727
                    },
                    "objType": "cylinder",
                    "radiusTop": 4,
                    "height": 4
                }],
                "rotation": [{
                    "degree": -3.141592653589793,
                    "direction": "x"
                }, {
                    "degree": -0.9728629830197867,
                    "direction": "y"
                }, {
                    "degree": -3.141592653589793,
                    "direction": "z"
                }],
                "show": true,
                "name": "cM_桌椅1_63OBJCREN0OBJCREN0OBJCREN2",
                "scale": {
                    "x": 1,
                    "y": 1,
                    "z": 1
                },
                "position": {
                    "x": 0,
                    "y": 0,
                    "z": 0
                },
                "uuid": "",
                "objType": "GroupObj"
            },  ]

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

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

效果如下：

三、逻辑功能实现

1、选择查看单个机柜，查看机柜详情，了解该机柜内的服务器排布情况

代码实现：

 if (modelBussiness.showSingleServerNeedVitures.length > 0) {
                WT3DObj.commonFunc.changeObjsOpacity(modelBussiness.showSingleServerNeedVitures, 0.2, 1, 200, function () {
                    $.each(modelBussiness.showCabServers, function (_index, _obj) {
                        _obj.visible = true;
                    });
                });
            }
            _this.openCabDoor(_obj);
   if (modelBussiness.lastMouseInCurrentObj.name.indexOf("OBJCREN7") > 0 || modelBussiness.lastMouseInCurrentObj.name.indexOf("OBJCREN8") > 0) {
            this.commonFunc.opcabinetBackLeftdoor(_obj.doors.leftDoor);
            this.commonFunc.opcabinetBackRightdoor(_obj.doors.rightDoor);
        } else if (modelBussiness.lastMouseInCurrentObj.name.indexOf("OBJCREN9") > 0) {
            this.commonFunc.opcabinetMaindoor(_obj.doors.mainDoor);
        }

        setTimeout(function () {

            if (_obj.doors.leftDoor.doorState == undefined || _obj.doors.leftDoor.doorState == "close") {

                if (_obj.doors.rightDoor.doorState == undefined || _obj.doors.rightDoor.doorState == "close") {

                    if (_obj.doors.mainDoor.doorState == undefined || _obj.doors.mainDoor.doorState == "close") {
                        modelBussiness.commonFunc.showCabnetDetail(_obj, function () {
                        });
                    }
                }
            }
        }, 200);

2、综合查看微模块的热力云图，空间使用情况，电力情况，制冷，承重等等。

代码实现：

 {
                btnid: "btn_reset",
                btnTitle: "场景复位",
                btnimg: "../../img/3dImg/reset.png",
                sortnub: 0,
                btnType: "system",
                enable: true,
                show_event: function () {
                    if (modelBussiness.lock == true) {
                        layer.tips("当前正在运行" + modelBussiness.currentLockDetail, "#btn_space");
                        return;
                    }
                    modelBussiness.currentLockDetail = "场景复位";
                    modelBussiness.lock = true;
                    setTimeout(function () {
                        modelBussiness.lock = false;
                    }, 1000);
                    modelBussiness.backBtn();
                },
            },
            {
                btnid: "btn_fps",
                btnTitle: "3D性能监测",
                btnimg: "../../img/3dImg/fps.png",
                sortnub: 0,
                btnType: "system",
                enable: true,
                show_event: function () {

                    var display = $("#Stats_output").css("display");
                    if (display == "none") {
                        $("#Stats_output").show();
                    } else {
                        $("#Stats_output").hide();
                    }
                },
            },
            {
                btnid: "btn_space",
                btnTitle: "机柜利用率",
                btnimg: "../../img/3dImg/space.png",
                sortnub: 0,
                btnType: "system",
                enable: true,
                show_event: function () {
                    if (modelBussiness.lock == true) {
                        layer.tips("当前正在运行" + modelBussiness.currentLockDetail, "#btn_space");
                        return;
                    }
                    modelBussiness.currentLockDetail = "机柜利用率";
                    modelBussiness.lock = true;
                    setTimeout(function () {
                        modelBussiness.lock = false;
                    }, 2000);
                    modelBussiness.showSpaceRate();
                },
            },
            {
                btnid: "btn_usage",
                btnTitle: "可用空间",
                btnimg: "../../img/3dImg/usage.png",
                sortnub: 0,
                btnType: "system",
                enable: true,
                show_event: function () {
                    if (modelBussiness.lock == true) {
                        layer.tips("当前正在运行" + modelBussiness.currentLockDetail, "#btn_usage");
                        return;
                    }
                    modelBussiness.currentLockDetail = "可用空间";
                    modelBussiness.lock = true;
                    setTimeout(function () {
                        modelBussiness.lock = false;
                    }, 2000);
                    modelBussiness.showUsageMap();
                },
            },

            {
                btnid: "btn_lines",
                btnTitle: "走线管理",
                btnimg: "../../img/3dImg/connection.png",
                sortnub: 0,
                btnType: "system",
                enable: true,
                show_event: function () {
                    if (modelBussiness.lock == true) {
                        layer.tips("当前正在运行" + modelBussiness.currentLockDetail, "#btn_lines");
                        return;
                    }
                    modelBussiness.currentLockDetail = "走线管理";
                    modelBussiness.lock = true;
                    setTimeout(function () {
                        modelBussiness.lock = false;
                    }, 1000);
                    modelBussiness.showLines();
                },
            },
            {
                btnid: "btn_temperature",
                btnTitle: "温度云图",
                btnimg: "../../img/3dImg/temperature.png",
                sortnub: 0,
                btnType: "system",
                enable: true,
                show_event: function () {
                    if (modelBussiness.lock == true) {
                        layer.tips("当前正在运行" + modelBussiness.currentLockDetail, "#btn_temperature");
                        return;
                    }
                    modelBussiness.currentLockDetail = "温度云图";
                    modelBussiness.lock = true;
                    setTimeout(function () {
                        modelBussiness.lock = false;
                    }, 2000);
                    modelBussiness.showTemptureMap();
                },
            },
            {
                btnid: "btn_water",
                btnTitle: "湿度",
                btnimg: "../../img/3dImg/water.png",
                sortnub: 0,
                btnType: "system",
                enable: true,
                show_event: function () {
                    if (modelBussiness.lock == true) {
                        layer.tips("当前正在运行" + modelBussiness.currentLockDetail, "#btn_water");
                        return;
                    }
                    modelBussiness.currentLockDetail = "湿度效果";
                    modelBussiness.lock = true;
                    setTimeout(function () {
                        modelBussiness.lock = false;
                    }, 2000);
                    modelBussiness.showHumidity();
                },
            },
            {
                btnid: "btn_smokeAlarm",
                btnTitle: "烟雾模拟",
                btnimg: "../../img/3dImg/smoke.png",
                sortnub: 0,
                btnType: "system",
                enable: true,
                show_event: function () {
                    if (modelBussiness.lock == true) {
                        layer.tips("当前正在运行" + modelBussiness.currentLockDetail, "#btn_smokeAlarm");
                        return;
                    }
                    modelBussiness.currentLockDetail = "烟雾模拟";
                    modelBussiness.lock = true;
                    setTimeout(function () {
                        modelBussiness.lock = false;
                    }, 2000);
                    modelBussiness.showFireAlarm();

                },
            },
            {
                btnid: "btn_winds",
                btnTitle: "空调风向",
                btnimg: "../../img/3dImg/air.png",
                sortnub: 0,
                btnType: "system",
                enable: true,
                show_event: function () {
                    if (modelBussiness.lock == true) {
                        layer.tips("当前正在运行" + modelBussiness.currentLockDetail, "#btn_winds");
                        return;
                    }
                    modelBussiness.currentLockDetail = "空调风向";
                    modelBussiness.lock = true;
                    setTimeout(function () {
                        modelBussiness.lock = false;
                    }, 1000);
                    modelBussiness.showWinds();
                },
            },
            //{
            //    btnid: "btn_power",
            //    btnTitle: "配店组",
            //    btnimg: "../../img/3dImg/power.png",
            //    sortnub: 0,
            //    btnType: "system",
            //    enable: true,
            //    show_event: function () {
            //        modelBussiness.showWinds();
            //    },
            //},
            //{
            //    btnid: "btn_alarm",
            //    btnTitle: "告警",
            //    btnimg: "../../img/3dImg/alarm.png",
            //    sortnub: 0,
            //    btnType: "system",
            //    enable: true,
            //    show_event: function () {
            //        modelBussiness.showWinds();
            //    },
            //},
            //{
            //    btnid: "btn_person",
            //    btnTitle: "巡检",
            //    btnimg: "../../img/3dImg/person.png",
            //    sortnub: 0,
            //    btnType: "system",
            //    enable: true,
            //    show_event: function () {
            //        modelBussiness.showWinds();
            //    },
            //},

3、服务器下架操作

代码实现：

  var _this = modelBussiness;
    _this.currentShowServerNames = [];
    var cabinetName = cabinetobj.name;
    if (_this.Devs[cabinetName] && _this.Devs[cabinetName].devs && _this.Devs[cabinetName].devs.length > 0) {
        $.each(_this.Devs[cabinetName].devs, function (_index, _obj) {
            _obj.visible = true;
            _this.currentShowServerNames.push(_obj.name);
        });
    } else {
        var devJsonModels = [];
        //1u 高度8.5 位置42
        if (devs && devs.length > 0) {
            $.each(devs, function (_index, _obj) {
                var height = (_obj.devURange.max - _obj.devURange.min + 1) * 8.2;
                var positiony = height / 2 + 42 + (_obj.devURange.min - 1) * 8.5;
                var postioinx = cabinetobj.position.x;
                var postioinz = cabinetobj.position.z;
                var rotationy = cabinetobj.rotation.y + Math.PI;
                var name = cabinetobj.name + "_Server_" + _index;
                if (!_obj.devCustomSkin) {
                    var servvers = ["../img/3dImg/server2.jpg", "../img/3dImg/server3.jpg", "../img/3dImg/server1.jpg"];
                    _obj.devCustomSkin = {
                        up: "../img/3dImg/rack_inside.jpg",
                        down: "../img/3dImg/rack_inside.jpg",
                        fore: servvers[parseInt(Math.random() * 3)],
                        behind: servvers[parseInt(Math.random() * 3)],
                        left: "../img/3dImg/server_side.jpg",
                        right: "../img/3dImg/server_side.jpg",
                    }
                }
                var server = getSingleServerModel(cabinetobj.name + "_Server_" + _index, { "x": postioinx, "y": positiony, "z": postioinz }, height, rotationy, _obj.devId, _obj.devCustomSkin);
                server.BindDevId = _obj.devId;
                devJsonModels.push(server);
                _this.currentShowServerNames.push(name);
            });
            WT3DObj.commonFunc.loadModelsByJsons(devJsonModels, { x: 0, y: 0, z: 0 }, { x: 0, y: 0, z: 0 }, true);
            _this.Devs[cabinetName] = {
                devs: WT3DObj.commonFunc.findObjectsByNames(_this.currentShowServerNames)
            };
        }
    }

4、服务器上架操作

代码实现：

    if (_this.needHideCabinets.length > 0) {
        WT3DObj.commonFunc.changeCameraPosition({ x: 2531, y: 3967, z: -1150 }, { x: -615, y: 0, z: -35 }, 1000, function () {
            $.each(_this.needHideCabinets, function (_index, _obj) {
                if (_obj.name.indexOf("_rate_") < 0 && _obj.name.indexOf("_yearCube_") < 0) {
                    _obj.visible = true;
                }
            });
        });
    }
    if (_this.needHideobjs.length > 0) {

        _this.hideDevs();
        WT3DObj.commonFunc.changeCameraPosition({ x: 2531, y: 3967, z: -1150 }, { x: -615, y: 0, z: -35 }, 1000, function () {

            $.each(_this.needHideobjs, function (_index, _obj) {
                if (_obj.name.indexOf("TCL_line_") < 0 && _obj.name.indexOf("_wind") < 0) {
                    _obj.visible = true;
                    if (_obj.children && _obj.children.length > 0) {
                        $.each(_obj.children, function (_cindex, _cobj) {
                            _cobj.visible = true;
                        });
                    }
                }
            });
            if (_this.currentShowCabinet) {
                _this.currentShowCabinet.visible = false;
            }
            WT3DObj.commonFunc.changeObjsOpacity(_this.needHideobjs, 0.01, 1, 1000, function () {

                _this.hideLines();
                _this.hideWinds();
                _this.hideUsageSpaceRate();
                _this.hideSpaceRate();
            });
        });
    }

5、服务器计划上架计划下架操作

实现方式：

      layer.closeAll();
                    console.log(result);
                    var cabNoUse = {};
                    if (result && result.length && result.length > 0) {
                        $.each(result, function (_index, _obj) {
                            var _cab = wtserverAPI.getCabinetByUUID(modelBussiness.roomName, _obj.cabid);
                            if (_cab && _cab.cabName) {
                                var ageValue = [];
                                if (_obj.uPositionUsed && _obj.uPositionUsed.length && _obj.uPositionUsed.length > 0) {
                                    for (var j = 0; j < _obj.uPositionUsed.length - 1; j++) {
                                        if (j == 0) {
                                            ageValue.push({
                                                value: 1,
                                                max: _obj.uPositionUsed[0],
                                                min: _obj.uPositionUsed[0]
                                            });
                                        }
                                        if (_obj.uPositionUsed[j + 1] - _obj.uPositionUsed[j] > 1) {
                                            ageValue.push({
                                                value: 1,
                                                max: _obj.uPositionUsed[j + 1],
                                                min: _obj.uPositionUsed[j + 1]
                                            });
                                        } else {
                                            ageValue[ageValue.length - 1].max = _obj.uPositionUsed[j + 1];
                                        }
                                    }
                                }
                                cabNoUse[_cab.cabName] = ageValue;
                            }
                        });
                    }
                    console.log(cabNoUse);
                    for (var i = 0; i < allCabs.length; i++) {
                        var itcobj = WT3DObj.commonFunc.findObject(allCabs[i]);
                        var ageValue = [];
                        if (cabNoUse[allCabs[i]]) {
                            ageValue = cabNoUse[allCabs[i]];
                        }
                        var style = {
                            borderColor: 0x4444,
                            outColor: 0xFFFFFF,
                            outOprity: 0.1
                        };
                        if (itcobj) {
                            _this.commonFunc.createUseageCube(allCabs[i],
                                { x: 160, y: 380, z: 140 },
                                { x: itcobj.position.x, y: itcobj.position.y, z: itcobj.position.z },
                                { x: 0, y: 0, z: 0 },
                                ageValue,
                                style, { timelong: 1000 }, i);
                        }
                    }
                }, function (err) {
                    layer.closeAll();
                    var cabNoUse = {};
                    for (var i = 0; i < allCabs.length; i++) {
                        var itcobj = WT3DObj.commonFunc.findObject(allCabs[i]);
                        var ageValue = [];
                        if (cabNoUse[allCabs[i]]) {
                            ageValue = cabNoUse[allCabs[i]];
                        }
                        var style = {
                            borderColor: 0x4444,
                            outColor: 0xFFFFFF,
                            outOprity: 0.1
                        };
                        if (itcobj) {
                            _this.commonFunc.createUseageCube(allCabs[i],
                                { x: 160, y: 380, z: 140 },
                                { x: itcobj.position.x, y: itcobj.position.y, z: itcobj.position.z },
                                { x: 0, y: 0, z: 0 },
                                ageValue,
                                style, { timelong: 1000 }, i);
                        }
                    }
                });