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

序：前段时间公司一次研讨会上，一市场部同事展现了同行业其他公司的3D机房，我司领导觉得这个可以研究研究，为了节约成本，我们在网上大量检索，派本人研究一下web3D的技术，于是乎便有了下面的技术分享。

使用webgl(three.js)创建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)搭建不规则建筑模型，客流量热力图模拟

技术交流 1203193731@qq.com

交流微信：

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

一、本着开源的思想，使用three.js框架，封装常用的模型库。先学着那位前辈的样子，使用ThreeJS画出类似的效果图，只是稍微有点丑，看官莫怪。

二、源码

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

--这里封装一下就叫做.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           //    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,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          _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          _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          _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          _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          _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                  _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吧

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

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

后面再加博文讲解吧。

本人也是three.js的初学者，不正的地方，还望大牛前辈指点。

交流邮箱：1203193731@qq.com