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

3d 库房, 3d 档案室, 3d 密集架, webGL,threejs,3d 机房

闲话少叙，我们接着第一课继续讲（http://www.cnblogs.com/yeyunfei/p/7899613.html），很久没有做技术分享了。很多人问第二课有没有，我也是抽空写一下第二课。

第一课程提到了在库房的基础上添加上下架 消防 温湿度等等控制

刚好 最近有接到一个客户的需求 是和库房差不多的项目 只是不是库房了 是档案室 但是基本操控还是差不多的 也有文件上下架什么的

那么第二课 我们就按照客户的需求 先做一个概述性的展现

特此说明：为了减少网络传输带宽 我特意用 ScreenToGif 工具 截了一些 gif 图 压缩成低帧率

有什么需要交流的 可邮件我 1203193731@qq.com

一、需要场景进行无缝的动画切换

代码实现

//应用切换库
<script src="js/pagetransitions.js"></script>
var PageTransitions = (function() {
    var $main = $( '#pt-main' ),
        $pages = $main.children( 'div.pt-page' ),
        $iterate = $( '.pt-touch-button' ),
        animcursor = 1,
        pagesCount = $pages.length,
        current = 1,
        precurrent=1,
        isAnimating = false,
        endCurrPage = false,
        endNextPage = false,
        animEndEventNames = {
            'WebkitAnimation' : 'webkitAnimationEnd',
            'OAnimation' : 'oAnimationEnd',
            'msAnimation' : 'MSAnimationEnd',
            'animation' : 'animationend'
        },
        // animation end event name
        animEndEventName = animEndEventNames[ Modernizr.prefixed( 'animation' ) ],
        // support css animations
        support = Modernizr.cssanimations;
    function init() {
        $pages.each( function() {
            var $page = $( this );
            $page.data( 'originalClassList', $page.attr( 'class' ) );
        } );
        $($(".pt-page.pt-page-1")[0]).addClass( 'pt-page-current' );
        precurrent = 1;
        $iterate.on('click', function () {
            var frameindex = $(this).attr("data-frameindex");
            current = frameindex;
            console.log(frameindex);
            var _this = this;
            if (isAnimating || current == precurrent ) {
                return false;
            }
            if( animcursor > 5 ) {
                animcursor = 1;
            }
            nextPage( animcursor );
            ++animcursor;
            //setTimeout(function () {
            //    $("#frame" + $(_this).attr("data-frameindex")).attr("src", $(_this).attr("data-src"));
            //}, 500);
        } );
    }
    function nextPage( animation ) {
        if (isAnimating) {
            return false;
        }
        isAnimating = true;
        var $currPage = $($(".pt-page.pt-page-" + precurrent)[0]);
        var $nextPage = $($(".pt-page.pt-page-" +  current)[0]).addClass( 'pt-page-current' ),
            outClass = '', inClass = '';
        precurrent = current;
        switch( animation ) {
            case 1:
                outClass = 'pt-page-rotateCubeLeftOut pt-page-ontop';
                inClass = 'pt-page-rotateCubeLeftIn';
                break;
            case 2:
                outClass = 'pt-page-rotateCubeRightOut pt-page-ontop';
                inClass = 'pt-page-rotateCubeRightIn';
                break;
            case 3:
                outClass = 'pt-page-rotateCubeTopOut pt-page-ontop';
                inClass = 'pt-page-rotateCubeTopIn';
                break;
            case 4:
                outClass = 'pt-page-rotateCubeBottomOut pt-page-ontop';
                inClass = 'pt-page-rotateCubeBottomIn';
                break;
            case 5:
                outClass = 'pt-page-rotateSlideOut';
                inClass = 'pt-page-rotateSlideIn';
                break;
        }
        $currPage.addClass( outClass ).on( animEndEventName, function() {
            $currPage.off( animEndEventName );
            endCurrPage = true;
            if( endNextPage ) {
                onEndAnimation( $currPage, $nextPage );
            }
        } );
        $nextPage.addClass( inClass ).on( animEndEventName, function() {
            $nextPage.off( animEndEventName );
            endNextPage = true;
            if( endCurrPage ) {
                onEndAnimation( $currPage, $nextPage );
            }
        } );
        if( !support ) {
            onEndAnimation( $currPage, $nextPage );
        }
    }
    function onEndAnimation( $outpage, $inpage ) {
        endCurrPage = false;
        endNextPage = false;
        resetPage( $outpage, $inpage );
        isAnimating = false;
    }
    function resetPage( $outpage, $inpage ) {
        $outpage.attr( 'class', $outpage.data( 'originalClassList' ) );
        $inpage.attr( 'class', $inpage.data( 'originalClassList' ) + ' pt-page-current' );
    }
    init();
    return { init : init };
})();

二、打开密集架 有过度动画

代码实现

this.loadMjjFace = function (mjjObj) {
      $.each(mjjObj.material.materials, function (_index, _obj) {
          if (_obj.opacity > 0.1) {
              _obj.opacity = 0.1;
          }
      });
      var cube = {
          "show": true,
          "uuid": "",
          "name": mjjObj.name + "_animationCube",
          "objType": "cube2",
          "length": 78,
          "width": 319,
          "height": 1,
          "x": mjjObj.position.x,
          "y": mjjObj.position.y - 99,
          "z": mjjObj.position.z,
          "style": {
              "skinColor": 16777215, "skin":
                  {
                      "skin_up": { "skinColor": 7219463, "opacity": 0.9, },
                      "skin_down": { "skinColor": 7219463, "opacity": 0.9, },
                      "skin_fore": { "skinColor": 7219463, "opacity": 0.9, },
                      "skin_behind": { "skinColor": 7219463, "opacity": 0.9, },
                      "skin_left": { "skinColor": 7219463, "opacity": 0.9, },
                      "skin_right": { "skinColor": 7219463, "opacity": 0.9, }
                  }
          }, "showSortNub": 11, "animation": null, "dbclickEvents": null, "rotation": [{ "direction": "x", "degree": 0 }, { "direction": "y", "degree": 0 }, { "direction": "z", "degree": 0 }], "thick": null, "scale": { "x": 1, "y": 1, "z": 1 }, "BindDevId": null, "BindDevName": null, "devInfo": null, "BindMeteId": null, "BindMeteName": null
      }
      var temObj = tl3DCoreObj.createObjByJson(cube);
      tl3DCoreObj.addObject(temObj);
      new TWEEN.Tween(temObj.position).to({
          y: mjjObj.position.y
      }, 2000).start();
      new TWEEN.Tween(temObj.scale).to({
          y: 199
      }, 2000).onComplete(function () {
          $.each(mjjObj.material.materials, function (_index, _obj) {
              if (_obj.opacity == 0.1) {
                  _obj.opacity = 1;
              }
          });
          tl3DCoreObj.destoryObj(mjjObj.name + "_animationCube");
      }).start();
      this.createMjjDetail(mjjObj);
  }

三、对密集架的文件档案进行上下架操作 保留操作接口

代码实现

//创建密集架详情
    this.createMjjDetail = function (mjjObj) {
        var _this = this;
        var detailGroup = null;
        //获取密集架序号
        var _groupNub = parseInt(mjjObj.name.split('_')[1]);//组序号
        var _colomnNub = parseInt(mjjObj.name.split('_')[2])//列序号
        //此处表示密集架行数 列数
        var mjjparam = null;
        var rowHeigtht = null;//每隔高度 此处200表示密集架高度
        var columlength = null;//此处320表示宽度
        if (_this.mjjDetails[_groupNub - 1] && _this.mjjDetails[_groupNub - 1][_colomnNub - 1]) {
            detailGroup = _this.mjjDetails[_groupNub - 1][_colomnNub - 1];
        } else {
             mjjparam = {
                rows: 12,
                colums: 4,
            }
             rowHeigtht = 200 / mjjparam.rows;//每隔高度 此处200表示密集架高度
             columlength = 320 / mjjparam.colums;//此处320表示宽度
            var mjjdetailGroup = {
                show: true,
                uuid: "",
                name: "mjjdetailGroup1",
                objType: "GroupObj",
                scale: { x: 1, y: 1, z: 1 },
                position: {
                    x: mjjObj.position.x,
                    y: mjjObj.position.y,
                    z: mjjObj.position.z
                },
                rotation: [{ direction: 'x', degree: 0 }],//旋转 表示x方向0度  arb表示
                childrens: [
                ]
            }
            //创建横向隔板
            for (var i = 0; i < mjjparam.rows - 1; i++) {
                var gb1 = {
                    "show": true,
                    "uuid": "",
                    "name": "mjjdetail_r" + (i + 1),
                    "objType": "cube2",
                    "length": 79,
                    "width": 319,
                    "height": 1,
                    "x": 0,
                    "y": 100 - (i + 1) * rowHeigtht,
                    "z": 0,
                    "style": { "skinColor": 16777215, "skin": { "skin_up": { "skinColor": 16777215, "imgurl": "../../img/3dImg/outside_lightmap.jpg" }, "skin_down": { "skinColor": 14540253 }, "skin_fore": { "skinColor": 14540253, "imgurl": "../../img/3dImg/card_panel.png" }, "skin_behind": { "skinColor": 14540253, "imgurl": "../../img/3dImg/card_panel.png" }, "skin_left": { "skinColor": 14540253 }, "skin_right": { "skinColor": 14540253 } } }, "showSortNub": 4, "animation": null, "dbclickEvents": null, "rotation": [{ "direction": "x", "degree": 0 }, { "direction": "y", "degree": 0 }, { "direction": "z", "degree": 0 }], "thick": null, "scale": { "x": 1, "y": 1, "z": 1 }, "BindDevId": null, "BindDevName": null, "devInfo": null, "BindMeteId": null, "BindMeteName": null
                };
                mjjdetailGroup.childrens.push(gb1);
            }
            //创建竖向隔板
            for (var i = 0; i < mjjparam.colums - 1; i++) {
                var gb2 = { "show": true, "uuid": "", "name": "mjjdetail_c" + (i + 1), "objType": "cube2", "length": 10, "width": 2, "height": 199, "x": 35, "y": 0, "z": 160 - ((i + 1) * columlength), "style": { "skinColor": 16777215, "skin": { "skin_up": { "skinColor": 14540253 }, "skin_down": { "skinColor": 14540253 }, "skin_fore": { "skinColor": 0xaaaaaa }, "skin_behind": { "skinColor": 0xaaaaaa }, "skin_left": { "skinColor": 14540253, "imgurl": "../../img/3dImg/card_panel.png" }, "skin_right": { "skinColor": 14540253, "imgurl": "../../img/3dImg/card_panel.png" } } }, "showSortNub": 4, "animation": null, "dbclickEvents": null, "rotation": [{ "direction": "x", "degree": 0 }, { "direction": "y", "degree": 0 }, { "direction": "z", "degree": 0 }], "thick": null, "scale": { "x": 1, "y": 1, "z": 1 }, "BindDevId": null, "BindDevName": null, "devInfo": null, "BindMeteId": null, "BindMeteName": null };
                mjjdetailGroup.childrens.push(gb2);
                var gb3 = ({ "show": true, "uuid": "", "name": "mjjdetail_c3" + (i + 1), "objType": "cube", "length": 10, "width": 2, "height": 199, "x": 0 - 35, "y": 0, "z": 160 - ((i + 1) * columlength), "style": { "skinColor": 16777215, "skin": { "skin_up": { "skinColor": 14540253 }, "skin_down": { "skinColor": 14540253 }, "skin_fore": { "skinColor": 0xaaaaaa }, "skin_behind": { "skinColor": 0xaaaaaa }, "skin_left": { "skinColor": 14540253, "imgurl": "../../img/3dImg/card_panel.png" }, "skin_right": { "skinColor": 14540253, "imgurl": "../../img/3dImg/card_panel.png" } } }, "showSortNub": 4, "animation": null, "dbclickEvents": null, "rotation": [{ "direction": "x", "degree": 0 }, { "direction": "y", "degree": 0 }, { "direction": "z", "degree": 0 }], "thick": null, "scale": { "x": 1, "y": 1, "z": 1 }, "BindDevId": null, "BindDevName": null, "devInfo": null, "BindMeteId": null, "BindMeteName": null });
                mjjdetailGroup.childrens.push(gb3);
            }
            detailGroup = tl3DCoreObj.createObjByJson(mjjdetailGroup);
            if (_this.mjjDetails[_groupNub - 1] == undefined) {
                _this.mjjDetails[_groupNub - 1] = [];
            }
            _this.mjjDetails[_groupNub - 1][_colomnNub - 1] = detailGroup;
            tl3DCoreObj.addObject(detailGroup);
        }
        //获取内部实时数据
        /*
        数据格式 将有文件的格子信息 以如下形式输出
            [
                {
                rowNo_:1,//行数
                colNo_:1,//列数
                filesNub:5//文件个数
                },
            ]
        */
        var _files = [];
        {//演示数据 获取真实数据后可替换
            for (var i = 1; i <= mjjparam.rows;i++){
                for (var j= 1; j <= mjjparam.colums;j++) {
                    _files.push({
                        rowNo_: i,//行数
                        colNo_: j,//列数
                        filesNub:Math.floor(Math.random()*10)%5 //随机生成演示文件个数
                    });
                }
            }
        }
        //刷新文件排布
        detailGroup.children.length = mjjparam.rows + mjjparam.colums*2-3;
        $.each(_files, function (_index,_obj) {
            if (_obj.filesNub > 0) {
                for (var w = 0; w < parseInt(Math.random() * parseInt((columlength - 2) / 22)) + 1 ; w++) {
                    var _tmfile = {
                        "show": true, "uuid": "", "name": "filebox_" + _obj.rowNo_ + "_" + _obj.colNo_ + "_w" + w, "objType": "cube", "length":70, "width": 20, "height": (rowHeigtht - 5),
                        "x": mjjObj.position.x,
                        "y": ( (_obj.rowNo_-1) * rowHeigtht + (rowHeigtht - 5) / 2 + 5),
                        "z": mjjObj.position.z + (-160 + ((_obj.colNo_ - 1) * columlength) + 22* (1 + w)),
                        "style": { "skinColor": 16777215, "skin": { "skin_up": { "skinColor": 10382134 }, "skin_down": { "skinColor": 10382134 }, "skin_fore": { "skinColor": 9525548 }, "skin_behind": { "skinColor": 9525548 }, "skin_left": { "skinColor": 13076036 }, "skin_right": { "skinColor": 13203019 } } }, "showSortNub": 11, "animation": null, "dbclickEvents": null, "rotation": [{ "direction": "x", "degree": 0 }, { "direction": "y", "degree": 0 }, { "direction": "z", "degree": 0 }], "thick": null, "scale": { "x": 1, "y": 1, "z": 1 }, "BindDevId": null, "BindDevName": null, "devInfo": null, "BindMeteId": null, "BindMeteName": null
                    };
                    var _tmfileObj = tl3DCoreObj.createObjByJson(_tmfile);
                    detailGroup.children.push(_tmfileObj);
                }
            }
        });
        detailGroup.visible = false;
        detailGroup.position.x = mjjObj.position.x;
        detailGroup.position.y = mjjObj.position.y;
        detailGroup.position.z = mjjObj.position.z;
        setTimeout(function () {
            detailGroup.visible = true;
        }, 2000);
    }

四、快速检索文件，并定位

代码实现

//查找文件 此处查找条件可以自定义
 this.searchFile = function () {
     var _this = this;
     $("#toolbar").hide();
     //获取到文件位置信息
     //返回类型 searchFileObj={fileName:'',mjjName:'',mjjGroup:'3',mjjnub:'2',face:'',row:'',color:'',nub:''}\
     //边缘弹出
     layer.open({
         title: "文件查找",
         type: 1,
         offset: 'lt' //具体配置参考：offset参数项
         , content: '<div style="padding: 10px;width:250px;min-height:150px;background-color:rgba(255,255,255,0.4);">\
 <table class="table">\
 <tr><td style="text-align:right;width:80px;">类型：</td><td><input id="fsfileType" value="" /></td></tr>\
 <tr><td style="text-align:right;width:80px;">关键字：</td><td><input id="fskeyWord" value="" /></td></tr>\
 <tr><td style="text-align:right;width:80px;">结果：</td><td colspan=2 id="searchResuleTd"></td></tr>\
 </table></div>'
         , btn: '确认查找'
         , btnAlign: 'c' //按钮居中
         , shade: 0 //不显示遮罩
         , yes: function () {
             var searchFileObj = {
                 mjjGroup: Math.floor(Math.random() * 12) % 6 + 1,
                 mjjnub: Math.floor(Math.random() * 14) % 7 + 1,
                 face: Math.random()>0.5? "A":"B",
                 row: Math.floor(Math.random() * 20) % 10+1,
                 column: Math.floor(Math.random() * 20) % 8+1,
                 nub: Math.floor(Math.random() * 40) % 20 + 1
             };
             $("#searchResuleTd").html("密集架组：" + searchFileObj.mjjGroup + "组</br>"
                                     + "密集架号：" + searchFileObj.mjjnub + "号</br>"
                                     + "密集架面：" + searchFileObj.face + "面</br>"
                                     + "所在行数：" + searchFileObj.row + "行</br>"
                                     + "所在列数：" + searchFileObj.column + "列</br>"
                                     + "文档序号：" + searchFileObj.nub + "</br>"
                                         );
             var _mjjObj = tl3DCoreObj.commonFunc.findObject("mjj_" + searchFileObj.mjjGroup + "_" + searchFileObj.mjjnub);
             _this.selectObj(_mjjObj);
             var newposition = {
                 x: (tl3DCoreObj.camera.position.x + _mjjObj.position.x)/2,
                 y: 600,
                 z: (tl3DCoreObj.camera.position.z+ _mjjObj.position.z) / 2
             }
             if ((tl3DCoreObj.camera.position.x - _mjjObj.position.x) * (tl3DCoreObj.camera.position.x - _mjjObj.position.x)
                 + (600 - _mjjObj.position.y) * (600 - _mjjObj.position.y)
                 + (tl3DCoreObj.camera.position.z - _mjjObj.position.z) * (tl3DCoreObj.camera.position.z - _mjjObj.position.z)
                 < 150 * 150 * 150) {
                 newposition = {
                     x: (tl3DCoreObj.camera.position.x),
                     y: 600,
                     z: (tl3DCoreObj.camera.position.z )
                 }
             }
             _this.changeCameraPosition(newposition, _mjjObj.position, 500)
         },
         end: function () {
             $("#toolbar").show();
             _this.unselectObj();
         }
     });
     $("#fsfileType").click(function () {
         $("#fsfileType").focus();
     })
     $("#fskeyWord").click(function () {
         $("#fskeyWord").focus();
     })
 }
 this.selectedObjs = null;
 this.selectObj=function (_obj) {
     var _this = this;
     if (_this.selectedObjs) {
         _this.unselectObj();
     }
     var outlineMaterial2 = new THREE.MeshBasicMaterial({ color: 0x00ff00, side: THREE.BackSide });
     var outlineMesh2 = new THREE.Mesh(_obj.geometry.clone(), outlineMaterial2);
     outlineMesh2.scale.multiplyScalar(1.05);
     outlineMesh2.position.x = _obj.position.x;
     outlineMesh2.position.y = _obj.position.y;
     outlineMesh2.position.z = _obj.position.z;
     tl3DCoreObj.scene.add(outlineMesh2);
     _this.selectedObjs = outlineMesh2;
     _this.flashObj(_obj);
 }
 this.unselectObj=function () {
     var _this = this;
     if (_this.selectedObjs) {
         tl3DCoreObj.scene.remove(_this.selectedObjs);
         _this.selectedObjs = null;
     }
 }

五、场景内监控摄像头 调取实时视频

/*摄像头部分*********************************************************************/
   this.cameraRange = [];
   //摄像头按钮
   this.showCamera = function () {
       var _this = this;
       if (_this.cameraRange.length <= 0) {
           var jsonobj1 = { "segmentsY": 0, "segmentsX": 6, "rotation": [{ "degree": 1.836627410320584, "direction": "x" }, { "degree": -0.01857030395023093, "direction": "y" }, { "degree": -0.10075785157596659, "direction": "z" }], "show": true, "scale": { "x": 1.1, "y": 1, "z": 0.3 }, "openEnded": false, "radiusTop": 500, "radiusBottom": 5, "showSortNub": 211, "name": "camera_range", "style": { "skinColor": 16776960, "skin": { "skin_up": { "side": 0, "skinColor": 16777215, "opacity": 0 }, "skin_side": { "imgurl": "../../img/3dImg/camarerange.png", "side": 2, "skinColor": 2746367, "opacity": 0.3 }, "skin_down": { "side": 1, "skinColor": 6881093, "opacity": 0 } } }, "position": { "x": -129.087, "y": 170.956, "z": -314.488 }, "objType": "cylinder", "height": 500 };
           var temObj1 = tl3DCoreObj.createObjByJson(jsonobj1);
           tl3DCoreObj.addObject(temObj1);
           _this.cameraRange.push(temObj1);
           var jsonobj2 = {"segmentsY": 0, "segmentsX": 6, "rotation": [{ "direction": "x", "degree":1.5415097019464317 }, { "direction": "y", "degree": -0.08611454529340022 },{ "direction": "z", "degree": -3.0382866151642487 }], "show": true, "scale": { "x": 1.1, "y": 1, "z": 0.3 }, "openEnded": false, "radiusTop": 500, "radiusBottom": 5, "showSortNub": 211,"name": "camera_range2", "style": {"skinColor": 16776960, "skin": {
                       "skin_up": { "skinColor": 16777215, "side": 0, "opacity": 0 }, "skin_down":{ "skinColor": 6881093, "side": 1, "opacity": 0 },
                       "skin_side": { "skinColor": 2746367, "side": 2, "opacity": 0.3, "imgurl": "../../img/3dImg/camarerange.png" }
                   }
               }, "position": { "x": 45.312, "y": 247.096, "z": 534.465 }, "objType": "cylinder",
               "height": 500, "customType1": "", "customType2": "", "animation": null, "dbclickEvents": null, "BindDevId": null, "BindDevName": null, "devInfo": null, "BindMeteId": null, "BindMeteName": null
           };
           var temObj2 = tl3DCoreObj.createObjByJson(jsonobj2);
           tl3DCoreObj.addObject(temObj2);
           _this.cameraRange.push(temObj2);
       }
       if (_this.cameraRange.length > 0) {
           $.each(_this.cameraRange, function (_index, _obj) {
               _obj.visible = true;
               _this.flashObj(_obj, 0xb2fb07);
           });
       }
       _this.changeCameraPosition({ x: -1284, y: 1787, z: -378 }, { x: -237, y: 308, z: 145 }, 1000)
   }
   //隐藏摄像头范围
   this.hideCamera = function () {
       var _this = this;
       if (_this.cameraRange.length > 0) {
           $.each(_this.cameraRange, function (_index, _obj) {
               _obj.visible = false;
           });
       }
   }
   //打开视屏
   this.showVideo = function (_obj) {
       var _this = this;
       layer.closeAll();
       var videoUrl = "";
       layer.open({
           title: "视频",
           area:["555px","280px"],
           type: 1,
           content: '<video id="video" autoplay loop webkit-playsinline style="width:100%;" >\
                       <source src="../../img/3dImg/video.mp4">\
                   </video>'
       , btn: false
       , shade: 0 //不显示遮罩
       , yes: function () {
           },
       end: function () {
           _this.hideCamera();
        }
       });
   }

六、消防灭火器快速定位 查找

/*消防按钮部分*********************************************************************/
    //消防按钮--灭火器定位
    this.FireControl = function () {
        var _this = this;
        _this.VirtualWalls();
        _this.hideAllMjj();
        _this.hideCamera();
        _this.removeMark();
        _this.addMark({ "x": 940, "y":200, "z": -660 });
        _this.addMark({ "x": 660, "y": 200, "z": -70 });
        _this.addMark({ "x": 660, "y": 200, "z": 400 });
        _this.addMark({ "x": -960, "y": 200, "z": -70 });
        _this.addMark({ "x": -960, "y": 200, "z": 400 });
        function markmoveUP(){
            new TWEEN.Tween(_this.marks[0].position).to({
                y:230
            }, 700).onUpdate(function () {
                var _marktPosition=this;
                $.each(_this.marks, function (_index, _obj) {
                    if (_index != 0) {
                        _obj.position.y = _marktPosition.y
                    }
                });
            }).onComplete(function () {
                if (_this.marks.length > 0) {
                    markmoveDown();
                }
            }).start();
        }
        function markmoveDown() {
            new TWEEN.Tween(_this.marks[0].position).to({
                y: 200
            }, 700).onUpdate(function () {
                var _marktPosition = this;
                $.each(_this.marks, function (_index, _obj) {
                    if (_index != 0) {
                        _obj.position.y = _marktPosition.y
                    }
                });
            }).onComplete(function () {
                if (_this.marks.length > 0) {
                    markmoveUP();
                }
            }).start();
        }
        function moveCameras() {
            _this.changeCameraPosition(
                    { "x": -270, "y": 1274, "z": -714 },
                    { "x": 209, "y": 705, "z": -750 },
                    1000,
                   function () {
                     _this.changeCameraPosition(
                           { "x": -574, "y": 1430, "z":-161 },
                           { "x": 486, "y": 134, "z": -90 },
                           2000,
                           function () {
                               _this.changeCameraPosition(
                              { "x": 196, "y": 1262, "z":340},
                              { "x": -639, "y": 277, "z":216},
                              4000,
                              function () {
                                  _this.changeCameraPosition(
                                  { "x":12, "y": 1749, "z": -2468 },
                                  { "x":61, "y": 156, "z":194 }, 1000, function () { });
                              }
                          );
                       }
                   );
                 }
                );
        }
        markmoveUP();
        moveCameras();
        $("#toolbar").hide();
        layer.open({
            title: "消防-灭火器定位",
            type: 1,
            offset: 'lt' //具体配置参考：offset参数项
       , content: '<div style="padding: 10px;width:300px;min-height:200px;background-color:rgba(255,255,255,0.4);">\
            <table class="table">\
            <tr><td style="text-align:right;width:80px;">序号</td><td>位置</td><td>定位</td></tr>\
            <tr><td style="text-align:center;width:80px;">1</td><td>大门口</td><td><button onclick="tl3dCoreBusiness.changeCameraPosition({ x: -270, y: 1274, z: -714 },{ x: 209, y: 705, z: -750 },1000)">定位</button></tr>\
            <tr><td style="text-align:center;width:80px;">2</td><td>密集架5和密集架6中间</td><td><button onclick="tl3dCoreBusiness.changeCameraPosition({ x: -574, y: 1430, z: -161 },{ x: 486, y: 134, z: -90 },1000)">定位</button></td></tr>\
            <tr><td style="text-align:center;width:80px;">3</td><td>密集架4和密集架5中间</td><td><button onclick="tl3dCoreBusiness.changeCameraPosition({ x: -574, y: 1430, z: -161 },{ x: 486, y: 134, z: -90 },1000)">定位</button></tr>\
            <tr><td style="text-align:center;width:80px;">4</td><td>密集架1和密集架2中间</td><td><button onclick="tl3dCoreBusiness.changeCameraPosition({ x: 196, y: 1262, z: 340},{ x: -639, y: 277, z: 216 },1000)">定位</button></tr>\
            <tr><td style="text-align:center;width:80px;">5</td><td>密集架2和密集架3中间</td><td><button onclick="tl3dCoreBusiness.changeCameraPosition({ x: 196, y: 1262, z: 340},{ x: -639, y: 277, z: 216 },1000)">定位</button></tr>\
            </table></div>'
       , btn:false
       , btnAlign: 'c' //按钮居中
       , shade: 0 //不显示遮罩
       , end: function () {
                _this.hideFireControls();
            }
        });
    }
    this.hideFireControls = function () {
        var _this = this;
        $("#toolbar").show();
        _this.EntityWalls();
        _this.showAllMjj();
        _this.removeMark();
    }

七、实时 3D 模拟消防火警 显示火灾参考情况

/*烟感模拟部分*********************************************************************/
//烟感模拟
this.smokeSensors = [];//烟感
this.getSmokeSensors = function () {
    var _this = this;
    if (_this.smokeSensors&&_this.smokeSensors.length == 0) {
        $.each(tl3DCoreObj.objects, function (_index, _obj) {
            if (_obj.name.indexOf("smokeSensor_") >= 0) {
                _this.smokeSensors.push(_obj);
            }
        });
    }
}

八、场景内温度调节 并且有调节动画

/*温度部分*********************************************************************/
//温度调节模拟+云图
this.changeTemplate = function () {
    var _this = this;
    $("#toolbar").hide();
    _this.hideCamera();
    _this.changeCameraPosition({ x: 540, y: 388, z: -524 }, { x: 0, y: 260, z: 130 }, 1000);
    //获取当前湿度值
    var hvalue = 28.5;
    //隐藏所有密集架
    this.hideAllMjj();
    if (this.templates.length == 0) {
        var tps = [300, -100, 300, 500, -500, -100, -500, 500]
        for (var i = 0; i < 4; i++) {
            var _obj1 = {
                show: true,
                name: "thermometer",
                objType: "Thermometer3D",
                position: { x: tps[2 * i], y: 400, z: tps[2 * i + 1] },
                rotation: [{ "direction": "x", "degree": 0 }],
                scale: { "x": 2, "y": 1.5, "z": 2},
                value: hvalue,
            }
            var temObj1 = tl3DCoreObj.createObjByJson(_obj1);
            tl3DCoreObj.addObject(temObj1);
            _this.templates.push(temObj1)
        }
    }
    for (var i = 0; i < _this.templates.length; i++) {
        _this.templates[i].position.y = 400;
        _this.templates[i].visible = true;
    }
    new TWEEN.Tween(_this.templates[0].position).to({
        y: 200
    }, 2000).onUpdate(function () {
        for (var i = 1; i < _this.templates.length; i++) {
            _this.templates[i].position.y = this.y;
        }
    }).easing(TWEEN.Easing.Elastic.Out).start();
    layer.closeAll();
    var videoUrl = "";
    layer.open({
        title: "调节温度",
        type: 1,
        anim: 2,
        content: '<div style="padding: 10px;width:240px;height:80px;background-color:rgba(255,255,255,0.71);text-align:center;">\
            温度:<input type="text" style="width:100px" id="template_input" value="' + hvalue + '" />%\
            </div>'
    , btn: ["调节", "关闭"]
    , shade: 0 //不显示遮罩
    , yes: function () {
        var t = parseFloat($("#template_input").val());
        for (var i = 0; i < _this.templates.length; i++) {
            _this.templates[i].changeThermoneter(t);
        }
    },
        end: function () {
            _this.hideTemplate();
        }
    });
    var t = $("#template_input").val();
    $("#template_input").val("").focus().val(t)
}
this.hideTemplate = function () {
    var _this = this;
    $("#toolbar").show();
    _this.hideCamera();
    var _this = this;
    if (this.templates.length > 0) {
        for (var i = 0; i < _this.templates.length; i++) {
            _this.templates[i].position.y = 400;
            _this.templates[i].visible = false;
        }
    }
    _this.showAllMjj();
}

九 、场景内湿度调节 有调节动画

//湿度调节模拟+云图
this.humiditys = [];
this.changehumidity = function () {
    var _this = this;
    $("#toolbar").hide();
    _this.hideCamera();
    _this.changeCameraPosition({ x: -35, y: 647, z: -1190 }, { x: -37, y: 190, z: 95 }, 1000);
    //获取当前湿度值
    var hvalue = 28.5;
    //隐藏所有密集架
    this.hideAllMjj();
    if (this.humiditys.length == 0) {
        var humiditys = [300, -100, 300, 500, -500, -100, -500, 500]
        for (var i = 0; i < 4;i++){
            var humidity1 = {
                show: true,
                name: "humidity",
                objType: "Humidity",
                position: { x: humiditys[2 * i], y: 400, z: humiditys[2 * i+1] },
                rotation: [{ "direction": "x", "degree": 0 }],
                scale: { "x": 1, "y": 1, "z": 1 },
                value: hvalue,
            }
            var temObj1 = tl3DCoreObj.createObjByJson(humidity1);
            tl3DCoreObj.addObject(temObj1);
            _this.humiditys.push(temObj1)
        }
    }
    for (var i = 0; i < _this.humiditys.length;i++){
        _this.humiditys[i].position.y = 400;
        _this.humiditys[i].visible = true;
    }
    new TWEEN.Tween(_this.humiditys[0].position).to({
        y: 200
    }, 2000).onUpdate(function () {
        for (var i = 1; i < _this.humiditys.length; i++) {
            _this.humiditys[i].position.y = this.y;
        }
    }).easing(TWEEN.Easing.Elastic.Out).start();
    layer.closeAll();
    var videoUrl = "";
    layer.open({
        title: "调节湿度",
        type: 1,
        anim: 2,
        content: '<div style="padding: 10px;width:240px;height:80px;background-color:rgba(255,255,255,0.71);text-align:center;">\
            湿度:<input type="text" style="width:100px" id="humidity_input" value="' + hvalue + '" />%\
            </div>'
    , btn: ["调节","关闭"]
    , shade: 0 //不显示遮罩
    , yes: function () {
        var t = parseFloat($("#humidity_input").val());
        for (var i = 0; i < _this.humiditys.length; i++) {
            _this.humiditys[i].changeThermoneter(t);
        }
    },
        end: function () {
            _this.hideHumidity();
        }
    });
    var t = $("#humidity_input").val();
    $("#humidity_input").val("").focus().val(t)
}
this.hideHumidity = function () {
    var _this = this;
    $("#toolbar").show();
    _this.hideCamera();
    var _this = this;
    if (this.humiditys.length > 0) {
        for (var i = 0; i < _this.humiditys.length;i++){
            _this.humiditys[i].position.y = 400;
            _this.humiditys[i].visible = false;
        }
    }
    _this.showAllMjj();
}
this.templates = [];