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

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

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

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

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

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

技术交流 1203193731@qq.com

交流微信：

　　　　

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

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

 

 代码实现

 

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
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
//应用切换库
<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 };
 
})();

　　

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

  代码实现

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
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);
  }

　　

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

  代码实现

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
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
//创建密集架详情
    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);
 
    }

　　

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

  代码实现

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
//查找文件 此处查找条件可以自定义
 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;
     }
 }

　　

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

 

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
/*摄像头部分*********************************************************************/
   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();
        }
       });
   }

　　

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

 

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
/*消防按钮部分*********************************************************************/
    //消防按钮--灭火器定位
    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模拟消防火警 显示火灾参考情况

 

?
1
2
3
4
5
6
7
8
9
10
11
12
13
/*烟感模拟部分*********************************************************************/
//烟感模拟
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);
            }
        });
    }
}

 

　　

 

 

 

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

 

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
/*温度部分*********************************************************************/
//温度调节模拟+云图
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();
}

 

　　

 

 

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

 

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
//湿度调节模拟+云图
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 = [];

　　

 十、对场景内数据大屏 进行操控 屏幕切换

 

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
    /*大屏部分*********************************************************************/
    //获取大屏
    this.bigScreens = [];
    this.getScreens = function () {
        var _this = this;
        if (_this.bigScreens.length == 0) {
            $.each(tl3DCoreObj.objects, function (_index, _obj) {
                if (_obj.name.indexOf("wall_bigScreen_") >= 0) {
                    _this.bigScreens.push(_obj);
                }
            });
        }
        return _this.bigScreens;
    }
    this.showBigScreenCtrls = function () {
        this.getScreens();
        $("#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:60px;">序号</td><td style="text-align:center;width:120px;">位置</td><td style="width:60px;">定位</td><td style="width:60px;">设置</td></tr>\
            <tr><td style="text-align:center;width:80px;">1</td><td style="text-align:center;">一号外墙大屏</td><td><button onclick="tl3dCoreBusiness.changeCameraPosition({ x:1013, y:335, z: -456 },{ x: 328, y: -37, z: -532 },1000)">定位</button></td><td><button onclick="tl3dCoreBusiness.setSreenParams(\'wall_bigScreen_1\')">设置</button></td></tr>\
            <tr><td style="text-align:center;width:80px;">2</td><td style="text-align:center;">二号室内大屏</td><td><button onclick="tl3dCoreBusiness.changeCameraPosition({ x: -310, y: 187, z: 452},{ x: -325, y: 147, z: 870 },1000)">定位</button></td><td><button onclick="tl3dCoreBusiness.setSreenParams(\'wall_bigScreen_2\')">设置</button></td></tr>\
            </table></div>'
      , btn: false
      , btnAlign: 'c' //按钮居中
      , shade: 0 //不显示遮罩
      , end: function () {
          $("#toolbar").show();
         }
        });
    }
    this.setSreenParams = function (sreenName) {
        var _screenobj = null;
        var _this = this;
       // layer.closeAll();
        for (var i = 0; i < _this.bigScreens.length; i++) {
            if (_this.bigScreens[i].name == sreenName) {
                _screenobj = _this.bigScreens[i];
            }
        }
        var screenType = "1";//1图片 2视频
        var screenUrl = "../../img/3dImg/tv.jpg";
        if (_screenobj && _screenobj.screenType) {
            screenType = _screenobj.screenType
        }
        if (_screenobj && _screenobj.screenUrl) {
            screenUrl = _screenobj.screenUrl
        }
        var layerindex=layer.open({
            title: "大屏定位-设置",
            type: 1,
            offset: 'lt' //具体配置参考：offset参数项
      , content: '<div style="padding: 10px;width:300px;min-height:100px;background-color:rgba(255,255,255,1);">\
            <table class="table">\
            <tr><td style="text-align:right;width:60px;">类型:</td><td>' + '<label><input name="screenTypeAndUrl" type="radio" ' + (screenType == "1" ? " checked='checked' " : "") + ' value="1" />图片 </label>\
<label><input name="screenTypeAndUrl" type="radio" ' + (screenType == "2" ? "  checked='checked' " : "") + ' value="2" />视频 </label> </td></tr>\
            <tr><td style="text-align:right;width:60px;">url:</td><td><input onclick="var t = $(\'#screenUrl\').val();$(\'#screenUrl\').val(\'\').focus().val(t)" id="screenUrl" value="' + screenUrl + '" /></td></tr>\
            </table></div>'
      , btn: ["确定","取消"]
      , btnAlign: 'c' //按钮居中
      , shade: 0 //不显示遮罩
      , yes: function () {
          var setScreenType = $("input:radio[name='screenTypeAndUrl']:checked").val();
          var setScreenUrl = $("#screenUrl").val();
          if (setScreenType == "1") {
              tl3DCoreObj.commonFunc.setObjSkinImg(_screenobj, 0, setScreenUrl);
          } else {
              tl3DCoreObj.commonFunc.setObjSkinVideo(_screenobj, 0, setScreenUrl, sreenName);
          }
          _screenobj.screenType = setScreenType;
          _screenobj.screenUrl = setScreenUrl;
          layer.close(layerindex);
      }
      , end: function () {
         
      }
        });
        $("#canvas-frame canvas").dblclick();
        var t = $('#screenUrl').val();$('#screenUrl').val("").focus().val(t);
    }

　　

十一、对场景内通风系统进行3D操作 并且有过度动画

 

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
/*风控部分***********************************************************************/
//风控按钮
this.showWindsCtrl = function () {
    var _this = this;
    $("#toolbar").hide();
    _this.changeCameraPosition({ x: 430, y: 1449, z: -2557 }, { x: 8, y: 234, z: 814 }, 1000);
    if (_this.windsISOPEN) {
        _this.openWinds();
        layer.confirm('当前风控开启状态，是否关闭风控按钮？', {
            offset: 'lt' ,
            btn: ['关闭', '取消'] //按钮
        }, function () {
            _this.closeWinds();
            layer.msg("已关闭");
            _this.windsISOPEN = false;
            $("#toolbar").show();
            layer.closeAll();
        }, function () {
            $("#toolbar").show();
            _this.hiddenIngWinds();
            layer.closeAll();
        });
    } else {
        layer.confirm('当前风控关闭状态，是否开启风控按钮？', {
            offset: 'lt',
            btn: ['开启', '取消'] //按钮
        }, function () {
            _this.openWinds();
            layer.msg("已开启")
            layer.closeAll();
            _this.windsISOPEN = true;
            setTimeout(function () {
                _this.hiddenIngWinds();
                $("#toolbar").show();
            }, 2000);
        }, function () {
            $("#toolbar").show();
            layer.closeAll();
        });
    }
}
this.openWinds = function () {
    var _this=this;
    var _winds = [
        { "name": "win_1_1","position": {"x": 0,"y": -100,"z": 640},"rotation": {x:0,y:0,z:0},},
        { "name": "win_1_2", "position": { "x": 0, "y": -100, "z":110 }, "rotation": { x: 0, y: 0, z: 0 }, },
        { "name": "win_1_3", "position": { "x": 0, "y": -100, "z": -400 }, "rotation": { x: 0, y: 0, z: 0 }, },
        { "name": "win_1_4", "position": { "x": -240, "y": -100, "z": -400 }, "rotation": { x: -3.141592653589793, y: 0, z: -3.141592653589793 }, },
        { "name": "win_1_5", "position": { "x": -240, "y": -100, "z": 110 }, "rotation": { x: -3.141592653589793, y: 0, z: -3.141592653589793 }, },
        { "name": "win_1_6", "position": { "x": -240, "y": -100, "z": 640 }, "rotation": { x: -3.141592653589793, y: 0, z: -3.141592653589793 }, },
    ];
    if (_this.winds.length <= 0) {
    $.each(_winds, function (_index,_obj) {
        _this.createWind(_obj.position,_obj.name,_obj.rotation);
    })
    }
    $.each(_this.winds, function (_index, _obj) {
        _obj.visible = true;
    });
}
this.closeWinds = function () {
    var _this = this;
    if (_this.winds.length > 0) {
        $.each(_this.winds, function (_index, _obj) {
            _obj.visible = false;
        });
    }
}

　　

 十二、对场景内空调 中央空调进行3D操作 并且有过度动画

 

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
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
//空调
   this.airConditionerCtls = function () {
       var _this = this;
       $("#toolbar").hide();
       //获取到文件位置信息
       //边缘弹出
       layer.open({
           title: "空调控制",
           type: 1,
           offset: 'lt' //具体配置参考：offset参数项
           , content: '<div style="padding: 10px;width:300px;min-height:120px;background-color:rgba(255,255,255,0.4);">\
   <table class="table">\
   <tr><td style="text-align:center;width:80px;">空调</td><td style="text-align:center;width:200px;">操作</td></tr>\
   <tr><td style="text-align:left;width:80px;">立柜空调</td><td style="text-align:center;">\
       <button id="LGAC_btn1" onclick="tl3dCoreBusiness.changeCameraPosition({x: -98, y: 356, z: 407},{x: -75, y: 121, z: 762},1000)">定位</button>\
       <button id="LGAC_btn2" onclick="tl3dCoreBusiness.openLSAirconditioner(\'aircondition_57\')">开启</button>\
       <button id="LGAC_btn3" onclick="tl3dCoreBusiness.closeLSAirconditioner(\'aircondition_57\')">关闭</button>\
   </td></tr>\
   <tr><td style="text-align:left;width:80px;">中央空调</td><td style="text-align:center;">\
       <button onclick="tl3dCoreBusiness.showCenterAirConditioner()" id="centerAC_btn1">定位</button>\
       <button onclick="tl3dCoreBusiness.openCenterAirConditioner()" id="centerAC_btn2">开启</button>\
       <button onclick="tl3dCoreBusiness.closeCenterAirConditioner()" id="centerAC_btn3">关闭</button>\
   </td></tr>\
   </table></div>'
           , btn: false
           , btnAlign: 'c' //按钮居中
           , shade: 0 //不显示遮罩
           , end: function () {
               $("#toolbar").show();
               _this.hideCenterAirConditioner();
               _this.hideLSAirconditioner();
           }
       });
 
   }
   this.LGAirConditions = [];
   //开启立式空调
   this.openLSAirconditioner = function (airConName) {
       var tempAirWind=null;
       var _this = this;
       var aircondition = tl3DCoreObj.commonFunc.findObject(airConName);
       if (this.LGAirConditions && this.LGAirConditions.length > 0) {
           $.each(this.LGAirConditions, function (_index, _obj) {
               if (_obj.name == airConName + "_wind_1") {
                   tempAirWind = _obj;
               }
           });
       }
       //{x: -82.581, y: 92.342, z: 743.966}
       if (tempAirWind == null) {
       var lgairwin = {
           "show": true, "uuid": "",
           "name":airConName+"_wind_1",// "lgAirC_wind_1",
           "objType": "flowTube",
           "points": [{ "x": 0, "y": 200, "z": 0 }, { "x": 0, "y": 150, "z": -60 }, { "x": 0, "y": 150, "z": -200 }],
           "position": { "x": aircondition.position.x, "y": aircondition.position.y - 122, "z": aircondition.position.z - 13 },
           "scale": { "x": 1, "y": 1, "z": 1 },
           "rotation": [{ "direction": "x", "degree": 0 }, { "direction": "y", "degree": 0 }, { "direction": "z", "degree": 0 }],
           "style": { "skinColor": 16772846, "imgurl": "../../img/3dImg/right2wind.png", "opacity": 1, "canvasSkin": { "cwidth": 1024, "cheight": 128, "cwNub": 16, "chNub": 8, "cMarginW": 0.2, "cMarginH": 0.2, "speed": 8, "fps": 40, "direction": "w", "forward": "f", "side": 1, "run": true, "bgcolor": "rgba(255, 227, 248, 0.02)" } }, "segments": 64, "radialSegments": 2, "closed": false, "radius": 20, "showSortNub": 196, "customType1": "", "customType2": "", "animation": null, "dbclickEvents": null, "BindDevId": null, "BindDevName": null, "devInfo": null, "BindMeteId": null, "BindMeteName": null
       }
       var temObj1 = tl3DCoreObj.createObjByJson(lgairwin);
       tl3DCoreObj.addObject(temObj1);
       _this.LGAirConditions.push(temObj1);
       tempAirWind = temObj1;
       }
       if (tempAirWind) {
           tempAirWind.visible = true;
       }
   }
   //关闭立式空调
   this.closeLSAirconditioner = function (airConName,isCloseAll) {
       var _this = this;
       if (this.LGAirConditions && this.LGAirConditions.length > 0) {
           $.each(this.LGAirConditions, function (_index, _obj) {
               if (_obj.name == airConName + "_wind_1") {
                   _obj.visible = false;
               }
               if (isCloseAll) {
                   _obj.visible = false;
               }
           });
       }
   }
   //隐藏立式空调风口动画
   this.hideLSAirconditioner = function () {
       var _this = this;
       if (this.LGAirConditions && this.LGAirConditions.length > 0) {
           $.each(this.LGAirConditions, function (_index, _obj) {
                   _obj.visible = false;
           });
       }
   }
   //开启中央空调
   this.centerAirConditionerDevs = [];
   //显示中央空调设备
   this.showCenterAirConditioner = function () {
       var _this = this;
       if (_this.centerAirConditionerDevs.length <= 0) {
       var centerAirCondition = [
           { "show": true, "uuid": "", "name": "center_air_conditioning_2_2", "objType": "cube2", "length": 78, "width": 78, "height": 40, "x": -80.785, "y": 370.664, "z": -456.654, "style": { "skinColor": 16777215, "skin": { "skin_up": { "skinColor": 16777215, "side": 1, "opacity": 0 }, "skin_down": { "skinColor": 16777215, "side": 1, "opacity": 0.3 }, "skin_fore": { "skinColor": 16777215, "side": 1, "opacity": 0.3 }, "skin_behind": { "skinColor": 16777215, "side": 1, "opacity": 0.3 }, "skin_left": { "skinColor": 16777215, "side": 1, "opacity": 0.3 }, "skin_right": { "skinColor": 16777215, "side": 1, "opacity": 0.3 } } }, "showSortNub": 7, "customType1": "", "customType2": "", "animation": null, "dbclickEvents": null, "rotation": [{ "direction": "x", "degree": 0 }, { "direction": "y", "degree": 0 }, { "direction": "z", "degree": 0 }], "thick": null, "scale": { "x": 1, "y": 1, "z": 1 }, "BindDevId": null, "BindDevName": null, "devInfo": null, "BindMeteId": null, "BindMeteName": null }, { "show": true, "uuid": "", "name": "center_air_conditioning_2_3", "objType": "cube2", "length": 78, "width": 78, "height": 40, "x": -80.785, "y": 370.664, "z": 518.684, "style": { "skinColor": 16777215, "skin": { "skin_up": { "skinColor": 16777215, "side": 1, "opacity": 0 }, "skin_down": { "skinColor": 16777215, "side": 1, "opacity": 0.3 }, "skin_fore": { "skinColor": 16777215, "side": 1, "opacity": 0.3 }, "skin_behind": { "skinColor": 16777215, "side": 1, "opacity": 0.3 }, "skin_left": { "skinColor": 16777215, "side": 1, "opacity": 0.3 }, "skin_right": { "skinColor": 16777215, "side": 1, "opacity": 0.3 } } }, "showSortNub": 7, "customType1": "", "customType2": "", "animation": null, "dbclickEvents": null, "rotation": [{ "direction": "x", "degree": 0 }, { "direction": "y", "degree": 0 }, { "direction": "z", "degree": 0 }], "thick": null, "scale": { "x": 1, "y": 1, "z": 1 }, "BindDevId": null, "BindDevName": null, "devInfo": null, "BindMeteId": null, "BindMeteName": null }, { "show": true, "uuid": "", "name": "center_air_conditioning_2_1", "objType": "cube2", "length": 78, "width": 78, "height": 40, "x": -80.785, "y": 370.664, "z": 48.478, "style": { "skinColor": 16777215, "skin": { "skin_up": { "skinColor": 16777215, "side": 1, "opacity": 0 }, "skin_down": { "skinColor": 16777215, "side": 1, "opacity": 0.3 }, "skin_fore": { "skinColor": 16777215, "side": 1, "opacity": 0.3 }, "skin_behind": { "skinColor": 16777215, "side": 1, "opacity": 0.3 }, "skin_left": { "skinColor": 16777215, "side": 1, "opacity": 0.3 }, "skin_right": { "skinColor": 16777215, "side": 1, "opacity": 0.3 } } }, "showSortNub": 7, "customType1": "", "customType2": "", "animation": null, "dbclickEvents": null, "rotation": [{ "direction": "x", "degree": 0 }, { "direction": "y", "degree": 0 }, { "direction": "z", "degree": 0 }], "thick": null, "scale": { "x": 1, "y": 1, "z": 1 }, "BindDevId": null, "BindDevName": null, "devInfo": null, "BindMeteId": null, "BindMeteName": null }, { "show": true, "uuid": "", "name": "center_air_conditioning_1_1", "objType": "cube2", "length": 78, "width": 78, "height": 40, "x": -605.659, "y": 370.664, "z": 48.478, "style": { "skinColor": 16777215, "skin": { "skin_up": { "skinColor": 16777215, "side": 1, "opacity": 0 }, "skin_down": { "skinColor": 16777215, "side": 1, "opacity": 0.3 }, "skin_fore": { "skinColor": 16777215, "side": 1, "opacity": 0.3 }, "skin_behind": { "skinColor": 16777215, "side": 1, "opacity": 0.3 }, "skin_left": { "skinColor": 16777215, "side": 1, "opacity": 0.3 }, "skin_right": { "skinColor": 16777215, "side": 1, "opacity": 0.3 } } }, "showSortNub": 7, "customType1": "", "customType2": "", "animation": null, "dbclickEvents": null, "rotation": [{ "direction": "x", "degree": 0 }, { "direction": "y", "degree": 0 }, { "direction": "z", "degree": 0 }], "thick": null, "scale": { "x": 1, "y": 1, "z": 1 }, "BindDevId": null, "BindDevName": null, "devInfo": null, "BindMeteId": null, "BindMeteName": null }, { "show": true, "uuid": "", "name": "center_air_conditioning_1_2", "objType": "cube2", "length": 78, "width": 78, "height": 40, "x": -605.659, "y": 370.664, "z": -467.654, "style": { "skinColor": 16777215, "skin": { "skin_up": { "skinColor": 16777215, "side": 1, "opacity": 0 }, "skin_down": { "skinColor": 16777215, "side": 1, "opacity": 0.3 }, "skin_fore": { "skinColor": 16777215, "side": 1, "opacity": 0.3 }, "skin_behind": { "skinColor": 16777215, "side": 1, "opacity": 0.3 }, "skin_left": { "skinColor": 16777215, "side": 1, "opacity": 0.3 }, "skin_right": { "skinColor": 16777215, "side": 1, "opacity": 0.3 } } }, "showSortNub": 7, "customType1": "", "customType2": "", "animation": null, "dbclickEvents": null, "rotation": [{ "direction": "x", "degree": 0 }, { "direction": "y", "degree": 0 }, { "direction": "z", "degree": 0 }], "thick": null, "scale": { "x": 1, "y": 1, "z": 1 }, "BindDevId": null, "BindDevName": null, "devInfo": null, "BindMeteId": null, "BindMeteName": null }, { "show": true, "uuid": "", "name": "center_air_conditioning_1_3", "objType": "cube2", "length": 78, "width": 78, "height": 40, "x": -605.659, "y": 370.664, "z": 553.501, "style": { "skinColor": 16777215, "skin": { "skin_up": { "skinColor": 16777215, "side": 1, "opacity": 0 }, "skin_down": { "skinColor": 16777215, "side": 1, "opacity": 0.3 }, "skin_fore": { "skinColor": 16777215, "side": 1, "opacity": 0.3 }, "skin_behind": { "skinColor": 16777215, "side": 1, "opacity": 0.3 }, "skin_left": { "skinColor": 16777215, "side": 1, "opacity": 0.3 }, "skin_right": { "skinColor": 16777215, "side": 1, "opacity": 0.3 } } }, "showSortNub": 7, "customType1": "", "customType2": "", "animation": null, "dbclickEvents": null, "rotation": [{ "direction": "x", "degree": 0 }, { "direction": "y", "degree": 0 }, { "direction": "z", "degree": 0 }], "thick": null, "scale": { "x": 1, "y": 1, "z": 1 }, "BindDevId": null, "BindDevName": null, "devInfo": null, "BindMeteId": null, "BindMeteName": null }, { "show": true, "uuid": "", "name": "center_air_conditioning_3_1", "objType": "cube2", "length": 78, "width": 78, "height": 40, "x": 442.379, "y": 370.664, "z": 48.478, "style": { "skinColor": 16777215, "skin": { "skin_up": { "skinColor": 16777215, "side": 1, "opacity": 0 }, "skin_down": { "skinColor": 16777215, "side": 1, "opacity": 0.3 }, "skin_fore": { "skinColor": 16777215, "side": 1, "opacity": 0.3 }, "skin_behind": { "skinColor": 16777215, "side": 1, "opacity": 0.3 }, "skin_left": { "skinColor": 16777215, "side": 1, "opacity": 0.3 }, "skin_right": { "skinColor": 16777215, "side": 1, "opacity": 0.3 } } }, "showSortNub": 7, "customType1": "", "customType2": "", "animation": null, "dbclickEvents": null, "rotation": [{ "direction": "x", "degree": 0 }, { "direction": "y", "degree": 0 }, { "direction": "z", "degree": 0 }], "thick": null, "scale": { "x": 1, "y": 1, "z": 1 }, "BindDevId": null, "BindDevName": null, "devInfo": null, "BindMeteId": null, "BindMeteName": null }, { "show": true, "uuid": "", "name": "center_air_conditioning_3_2", "objType": "cube2", "length": 78, "width": 78, "height": 40, "x": 442.379, "y": 370.664, "z": -461.396, "style": { "skinColor": 16777215, "skin": { "skin_up": { "skinColor": 16777215, "side": 1, "opacity": 0 }, "skin_down": { "skinColor": 16777215, "side": 1, "opacity": 0.3 }, "skin_fore": { "skinColor": 16777215, "side": 1, "opacity": 0.3 }, "skin_behind": { "skinColor": 16777215, "side": 1, "opacity": 0.3 }, "skin_left": { "skinColor": 16777215, "side": 1, "opacity": 0.3 }, "skin_right": { "skinColor": 16777215, "side": 1, "opacity": 0.3 } } }, "showSortNub": 7, "customType1": "", "customType2": "", "animation": null, "dbclickEvents": null, "rotation": [{ "direction": "x", "degree": 0 }, { "direction": "y", "degree": 0 }, { "direction": "z", "degree": 0 }], "thick": null, "scale": { "x": 1, "y": 1, "z": 1 }, "BindDevId": null, "BindDevName": null, "devInfo": null, "BindMeteId": null, "BindMeteName": null }, { "show": true, "uuid": "", "name": "center_air_conditioning_3_3", "objType": "cube2", "length": 78, "width": 78, "height": 40, "x": 442.379, "y": 370.664, "z": 526.744, "style": { "skinColor": 16777215, "skin": { "skin_up": { "skinColor": 16777215, "side": 1, "opacity": 0 }, "skin_down": { "skinColor": 16777215, "side": 1, "opacity": 0.3 }, "skin_fore": { "skinColor": 16777215, "side": 1, "opacity": 0.3 }, "skin_behind": { "skinColor": 16777215, "side": 1, "opacity": 0.3 }, "skin_left": { "skinColor": 16777215, "side": 1, "opacity": 0.3 }, "skin_right": { "skinColor": 16777215, "side": 1, "opacity": 0.3 } } }, "showSortNub": 7, "customType1": "", "customType2": "", "animation": null, "dbclickEvents": null, "rotation": [{ "direction": "x", "degree": 0 }, { "direction": "y", "degree": 0 }, { "direction": "z", "degree": 0 }], "thick": null, "scale": { "x": 1, "y": 1, "z": 1 }, "BindDevId": null, "BindDevName": null, "devInfo": null, "BindMeteId": null, "BindMeteName": null }, { "show": true, "uuid": "", "name": "cacWind_1", "objType": "flowTube", "points": [{ "x": 0, "y": 0, "z": 1500 }, { "x": 0, "y": 0, "z": 0 }], "position": { "x": -70.779, "y": 419.052, "z": -751.968 }, "scale": { "x": 1, "y": 1, "z": 1 }, "rotation": [{ "direction": "x", "degree": 0 }, { "direction": "y", "degree": 0 }, { "direction": "z", "degree": 0 }], "style": { "skinColor": 16772846, "imgurl": "../../img/3dImg/right2wind.png", "opacity": 1, "canvasSkin": { "cwidth": 1024, "cheight": 128, "cwNub": 32, "chNub": 8, "cMarginW": 0.2, "cMarginH": 0.2, "speed": 3, "fps": 40, "direction": "w", "forward": "f", "side": 2, "run": true, "bgcolor": "rgba(4, 4, 4, 0.098)" } }, "segments": 4, "radialSegments": 4, "closed": false, "radius": 40, "showSortNub": 16, "customType1": "", "customType2": "", "animation": null, "dbclickEvents": null, "BindDevId": null, "BindDevName": null, "devInfo": null, "BindMeteId": null, "BindMeteName": null }, { "show": true, "uuid": "", "name": "cacWind_3", "objType": "flowTube", "points": [{ "x": 0, "y": 0, "z": 1500 }, { "x": 0, "y": 0, "z": 0 }], "position": { "x": 443.302, "y": 419.052, "z": -751.968 }, "scale": { "x": 1, "y": 1, "z": 1 }, "rotation": [{ "direction": "x", "degree": 0 }, { "direction": "y", "degree": 0 }, { "direction": "z", "degree": 0 }], "style": { "skinColor": 16772846, "imgurl": "../../img/3dImg/right2wind.png", "opacity": 1, "canvasSkin": { "cwidth": 1024, "cheight": 128, "cwNub": 32, "chNub": 8, "cMarginW": 0.2, "cMarginH": 0.2, "speed": 3, "fps": 40, "direction": "w", "forward": "f", "side": 2, "run": true, "bgcolor": "rgba(4, 4, 4, 0.098)" } }, "segments": 4, "radialSegments": 4, "closed": false, "radius": 40, "showSortNub": 16, "customType1": "", "customType2": "", "animation": null, "dbclickEvents": null, "BindDevId": null, "BindDevName": null, "devInfo": null, "BindMeteId": null, "BindMeteName": null }, { "show": true, "uuid": "", "name": "cacWind_2", "objType": "flowTube", "points": [{ "x": 0, "y": 0, "z": 1500 }, { "x": 0, "y": 0, "z": 0 }], "position": { "x": -604.569, "y": 419.052, "z": -751.968 }, "scale": { "x": 1, "y": 1, "z": 1 }, "rotation": [{ "direction": "x", "degree": 0 }, { "direction": "y", "degree": 0 }, { "direction": "z", "degree": 0 }], "style": { "skinColor": 16772846, "imgurl": "../../img/3dImg/right2wind.png", "opacity": 1, "canvasSkin": { "cwidth": 1024, "cheight": 128, "cwNub": 32, "chNub": 8, "cMarginW": 0.2, "cMarginH": 0.2, "speed": 3, "fps": 40, "direction": "w", "forward": "f", "side": 2, "run": true, "bgcolor": "rgba(4, 4, 4, 0.098)" } }, "segments": 4, "radialSegments": 4, "closed": false, "radius": 40, "showSortNub": 16, "customType1": "", "customType2": "", "animation": null, "dbclickEvents": null, "BindDevId": null, "BindDevName": null, "devInfo": null, "BindMeteId": null, "BindMeteName": null }, { "show": true, "uuid": "", "name": "center_air_conditioning_1", "objType": "cube2", "length": 80, "width": 1500, "height": 80, "x": 444.17, "y": 426.022, "z": 0, "style": { "skinColor": 16777215, "skin": { "skin_up": { "skinColor": 7895160, "side": 0, "opacity": 0.4 }, "skin_down": { "skinColor": 7895160, "side": 0, "opacity": 0.3 }, "skin_fore": { "skinColor": 16777215, "side": 0, "opacity": 0.3 }, "skin_behind": { "skinColor": 16777215, "side": 0, "opacity": 0.3 }, "skin_left": { "skinColor": 16777215, "side": 0, "opacity": 0 }, "skin_right": { "skinColor": 16777215, "side": 0, "opacity": 0 } } }, "showSortNub": 196, "customType1": "", "customType2": "", "animation": null, "dbclickEvents": null, "rotation": [{ "direction": "x", "degree": 0 }, { "direction": "y", "degree": 0 }, { "direction": "z", "degree": 0 }], "thick": null, "scale": { "x": 1, "y": 1, "z": 1 }, "BindDevId": null, "BindDevName": null, "devInfo": null, "BindMeteId": null, "BindMeteName": null }, { "show": true, "uuid": "", "name": "center_air_conditioning_2", "objType": "cube2", "length": 80, "width": 1500, "height": 80, "x": -76.111, "y": 419.507, "z": 0, "style": { "skinColor": 16777215, "skin": { "skin_up": { "skinColor": 7895160, "side": 0, "opacity": 0.4 }, "skin_down": { "skinColor": 7895160, "side": 0, "opacity": 0.3 }, "skin_fore": { "skinColor": 16777215, "side": 0, "opacity": 0.3 }, "skin_behind": { "skinColor": 16777215, "side": 0, "opacity": 0.3 }, "skin_left": { "skinColor": 16777215, "side": 0, "opacity": 0 }, "skin_right": { "skinColor": 16777215, "side": 0, "opacity": 0 } } }, "showSortNub": 196, "customType1": "", "customType2": "", "animation": null, "dbclickEvents": null, "rotation": [{ "direction": "x", "degree": 0 }, { "direction": "y", "degree": 0 }, { "direction": "z", "degree": 0 }], "thick": null, "scale": { "x": 1, "y": 1, "z": 1 }, "BindDevId": null, "BindDevName": null, "devInfo": null, "BindMeteId": null, "BindMeteName": null }, { "show": true, "uuid": "", "name": "center_air_conditioning_3", "objType": "cube2", "length": 80, "width": 1500, "height": 80, "x": -604.307, "y": 426.022, "z": 0, "style": { "skinColor": 16777215, "skin": { "skin_up": { "skinColor": 7895160, "side": 0, "opacity": 0.4 }, "skin_down": { "skinColor": 7895160, "side": 0, "opacity": 0.3 }, "skin_fore": { "skinColor": 16777215, "side": 0, "opacity": 0.3 }, "skin_behind": { "skinColor": 16777215, "side": 0, "opacity": 0.3 }, "skin_left": { "skinColor": 16777215, "side": 0, "opacity": 0 }, "skin_right": { "skinColor": 16777215, "side": 0, "opacity": 0 } } }, "showSortNub": 196, "customType1": "", "customType2": "", "animation": null, "dbclickEvents": null, "rotation": [{ "direction": "x", "degree": 0 }, { "direction": "y", "degree": 0 }, { "direction": "z", "degree": 0 }], "thick": null, "scale": { "x": 1, "y": 1, "z": 1 }, "BindDevId": null, "BindDevName": null, "devInfo": null, "BindMeteId": null, "BindMeteName": null }, { "show": true, "uuid": "", "name": "cacWind_1_1", "objType": "flowTube", "points": [{ "x": 0, "y": 200, "z": 0 }, { "x": 50, "y": 50, "z": 0 }, { "x": 150, "y": -50, "z": null }], "position": { "x": -51.031, "y": 182.086, "z": -450.709 }, "scale": { "x": 1, "y": 1, "z": 1 }, "rotation": [{ "direction": "x", "degree": 0 }, { "direction": "y", "degree": 0 }, { "direction": "z", "degree": 0 }], "style": { "skinColor": 16772846, "imgurl": "../../img/3dImg/right2wind.png", "opacity": 1, "canvasSkin": { "cwidth": 1024, "cheight": 128, "cwNub": 8, "chNub": 2, "cMarginW": 0.2, "cMarginH": 0.2, "speed": 8, "fps": 40, "direction": "w", "forward": "f", "side": 1, "run": true, "bgcolor": "rgba(4, 4, 4, 0.098)" } }, "segments": 6, "radialSegments": 2, "closed": false, "radius": 20, "showSortNub": 16, "customType1": "", "customType2": "", "animation": null, "dbclickEvents": null, "BindDevId": null, "BindDevName": null, "devInfo": null, "BindMeteId": null, "BindMeteName": null }, { "show": true, "uuid": "", "name": "cacWind_1_3", "objType": "flowTube", "points": [{ "x": 0, "y": 200, "z": 0 }, { "x": 50, "y": 50, "z": 0 }, { "x": 150, "y": -50, "z": null }], "position": { "x": -51.031, "y": 182.086, "z": 518.391 }, "scale": { "x": 1, "y": 1, "z": 1 }, "rotation": [{ "direction": "x", "degree": 0 }, { "direction": "y", "degree": 0 }, { "direction": "z", "degree": 0 }], "style": { "skinColor": 16772846, "imgurl": "../../img/3dImg/right2wind.png", "opacity": 1, "canvasSkin": { "cwidth": 1024, "cheight": 128, "cwNub": 8, "chNub": 2, "cMarginW": 0.2, "cMarginH": 0.2, "speed": 8, "fps": 40, "direction": "w", "forward": "f", "side": 1, "run": true, "bgcolor": "rgba(4, 4, 4, 0.098)" } }, "segments": 6, "radialSegments": 2, "closed": false, "radius": 20, "showSortNub": 16, "customType1": "", "customType2": "", "animation": null, "dbclickEvents": null, "BindDevId": null, "BindDevName": null, "devInfo": null, "BindMeteId": null, "BindMeteName": null }, { "show": true, "uuid": "", "name": "cacWind_1_2", "objType": "flowTube", "points": [{ "x": 0, "y": 200, "z": 0 }, { "x": 50, "y": 50, "z": 0 }, { "x": 150, "y": -50, "z": null }], "position": { "x": -51.031, "y": 182.086, "z": 56.652 }, "scale": { "x": 1, "y": 1, "z": 1 }, "rotation": [{ "direction": "x", "degree": 0 }, { "direction": "y", "degree": 0 }, { "direction": "z", "degree": 0 }], "style": { "skinColor": 16772846, "imgurl": "../../img/3dImg/right2wind.png", "opacity": 1, "canvasSkin": { "cwidth": 1024, "cheight": 128, "cwNub": 8, "chNub": 2, "cMarginW": 0.2, "cMarginH": 0.2, "speed": 8, "fps": 40, "direction": "w", "forward": "f", "side": 1, "run": true, "bgcolor": "rgba(4, 4, 4, 0.098)" } }, "segments": 6, "radialSegments": 2, "closed": false, "radius": 20, "showSortNub": 16, "customType1": "", "customType2": "", "animation": null, "dbclickEvents": null, "BindDevId": null, "BindDevName": null, "devInfo": null, "BindMeteId": null, "BindMeteName": null }, { "show": true, "uuid": "", "name": "cacWind_3_1", "objType": "flowTube", "points": [{ "x": 0, "y": 200, "z": 0 }, { "x": 50, "y": 50, "z": 0 }, { "x": 150, "y": -50, "z": null }], "position": { "x": -596.596, "y": 182.086, "z": -450.709 }, "scale": { "x": 1, "y": 1, "z": 1 }, "rotation": [{ "direction": "x", "degree": 0 }, { "direction": "y", "degree": 0 }, { "direction": "z", "degree": 0 }], "style": { "skinColor": 16772846, "imgurl": "../../img/3dImg/right2wind.png", "opacity": 1, "canvasSkin": { "cwidth": 1024, "cheight": 128, "cwNub": 8, "chNub": 2, "cMarginW": 0.2, "cMarginH": 0.2, "speed": 8, "fps": 40, "direction": "w", "forward": "f", "side": 1, "run": true, "bgcolor": "rgba(4, 4, 4, 0.098)" } }, "segments": 6, "radialSegments": 2, "closed": false, "radius": 20, "showSortNub": 16, "customType1": "", "customType2": "", "animation": null, "dbclickEvents": null, "BindDevId": null, "BindDevName": null, "devInfo": null, "BindMeteId": null, "BindMeteName": null }, { "show": true, "uuid": "", "name": "cacWind_3_2", "objType": "flowTube", "points": [{ "x": 0, "y": 200, "z": 0 }, { "x": 50, "y": 50, "z": 0 }, { "x": 150, "y": -50, "z": null }], "position": { "x": -596.596, "y": 182.086, "z": 69.057 }, "scale": { "x": 1, "y": 1, "z": 1 }, "rotation": [{ "direction": "x", "degree": 0 }, { "direction": "y", "degree": 0 }, { "direction": "z", "degree": 0 }], "style": { "skinColor": 16772846, "imgurl": "../../img/3dImg/right2wind.png", "opacity": 1, "canvasSkin": { "cwidth": 1024, "cheight": 128, "cwNub": 8, "chNub": 2, "cMarginW": 0.2, "cMarginH": 0.2, "speed": 8, "fps": 40, "direction": "w", "forward": "f", "side": 1, "run": true, "bgcolor": "rgba(4, 4, 4, 0.098)" } }, "segments": 6, "radialSegments": 2, "closed": false, "radius": 20, "showSortNub": 16, "customType1": "", "customType2": "", "animation": null, "dbclickEvents": null, "BindDevId": null, "BindDevName": null, "devInfo": null, "BindMeteId": null, "BindMeteName": null }, { "show": true, "uuid": "", "name": "cacWind_3_3", "objType": "flowTube", "points": [{ "x": 0, "y": 200, "z": 0 }, { "x": 50, "y": 50, "z": 0 }, { "x": 150, "y": -50, "z": null }], "position": { "x": -596.596, "y": 182.086, "z": 571.083 }, "scale": { "x": 1, "y": 1, "z": 1 }, "rotation": [{ "direction": "x", "degree": 0 }, { "direction": "y", "degree": 0 }, { "direction": "z", "degree": 0 }], "style": { "skinColor": 16772846, "imgurl": "../../img/3dImg/right2wind.png", "opacity": 1, "canvasSkin": { "cwidth": 1024, "cheight": 128, "cwNub": 8, "chNub": 2, "cMarginW": 0.2, "cMarginH": 0.2, "speed": 8, "fps": 40, "direction": "w", "forward": "f", "side": 1, "run": true, "bgcolor": "rgba(4, 4, 4, 0.098)" } }, "segments": 6, "radialSegments": 2, "closed": false, "radius": 20, "showSortNub": 16, "customType1": "", "customType2": "", "animation": null, "dbclickEvents": null, "BindDevId": null, "BindDevName": null, "devInfo": null, "BindMeteId": null, "BindMeteName": null }, { "show": true, "uuid": "", "name": "cacWind_2_1", "objType": "flowTube", "points": [{ "x": 0, "y": 200, "z": 0 }, { "x": 50, "y": 50, "z": 0 }, { "x": 150, "y": -50, "z": null }], "position": { "x": 449.11, "y": 182.086, "z": -450.709 }, "scale": { "x": 1, "y": 1, "z": 1 }, "rotation": [{ "direction": "x", "degree": 0 }, { "direction": "y", "degree": 0 }, { "direction": "z", "degree": 0 }], "style": { "skinColor": 16772846, "imgurl": "../../img/3dImg/right2wind.png", "opacity": 1, "canvasSkin": { "cwidth": 1024, "cheight": 128, "cwNub": 8, "chNub": 2, "cMarginW": 0.2, "cMarginH": 0.2, "speed": 8, "fps": 40, "direction": "w", "forward": "f", "side": 1, "run": true, "bgcolor": "rgba(4, 4, 4, 0.098)" } }, "segments": 6, "radialSegments": 2, "closed": false, "radius": 20, "showSortNub": 16, "customType1": "", "customType2": "", "animation": null, "dbclickEvents": null, "BindDevId": null, "BindDevName": null, "devInfo": null, "BindMeteId": null, "BindMeteName": null }, { "show": true, "uuid": "", "name": "cacWind_2_2", "objType": "flowTube", "points": [{ "x": 0, "y": 200, "z": 0 }, { "x": 50, "y": 50, "z": 0 }, { "x": 150, "y": -50, "z": null }], "position": { "x": 449.11, "y": 182.086, "z": 58.707 }, "scale": { "x": 1, "y": 1, "z": 1 }, "rotation": [{ "direction": "x", "degree": 0 }, { "direction": "y", "degree": 0 }, { "direction": "z", "degree": 0 }], "style": { "skinColor": 16772846, "imgurl": "../../img/3dImg/right2wind.png", "opacity": 1, "canvasSkin": { "cwidth": 1024, "cheight": 128, "cwNub": 8, "chNub": 2, "cMarginW": 0.2, "cMarginH": 0.2, "speed": 8, "fps": 40, "direction": "w", "forward": "f", "side": 1, "run": true, "bgcolor": "rgba(4, 4, 4, 0.098)" } }, "segments": 6, "radialSegments": 2, "closed": false, "radius": 20, "showSortNub": 16, "customType1": "", "customType2": "", "animation": null, "dbclickEvents": null, "BindDevId": null, "BindDevName": null, "devInfo": null, "BindMeteId": null, "BindMeteName": null }, { "show": true, "uuid": "", "name": "cacWind_2_3", "objType": "flowTube", "points": [{ "x": 0, "y": 200, "z": 0 }, { "x": 50, "y": 50, "z": 0 }, { "x": 150, "y": -50, "z": null }], "position": { "x": 449.11, "y": 182.086, "z": 550.649 }, "scale": { "x": 1, "y": 1, "z": 1 }, "rotation": [{ "direction": "x", "degree": 0 }, { "direction": "y", "degree": 0 }, { "direction": "z", "degree": 0 }], "style": { "skinColor": 16772846, "imgurl": "../../img/3dImg/right2wind.png", "opacity": 1, "canvasSkin": { "cwidth": 1024, "cheight": 128, "cwNub": 8, "chNub": 2, "cMarginW": 0.2, "cMarginH": 0.2, "speed": 8, "fps": 40, "direction": "w", "forward": "f", "side": 1, "run": true, "bgcolor": "rgba(4, 4, 4, 0.098)" } }, "segments": 6, "radialSegments": 2, "closed": false, "radius": 20, "showSortNub": 16, "customType1": "", "customType2": "", "animation": null, "dbclickEvents": null, "BindDevId": null, "BindDevName": null, "devInfo": null, "BindMeteId": null, "BindMeteName": null }]
       $.each(centerAirCondition,function(_index,_obj){
           var temObj1 = tl3DCoreObj.createObjByJson(_obj);
           tl3DCoreObj.addObject(temObj1);
           _this.centerAirConditionerDevs.push(temObj1)
       })
       }
       if (_this.centerAirConditionerDevs.length > 0) {
           $.each(_this.centerAirConditionerDevs, function (_index, _obj) {
                   _obj.visible = true;
           })
       }
       //获取中央空调开关状态
       var isopen = true;//此处调用函数 获取中央空调状态
       if (isopen) {
           _this.openCenterAirConditioner();
       } else {
           _this.closeCenterAirConditioner();
       }
   }
   //隐藏中央空调设备
   this.hideCenterAirConditioner = function () {
       var _this = this;
       if (_this.centerAirConditionerDevs.length > 0) {
           $.each(_this.centerAirConditionerDevs, function (_index, _obj) {
               _obj.visible = false;
           })
       }
   }
   //打开中央空调
   this.openCenterAirConditioner = function () {
       var _this = this;
       _this.showCenterAirConditioner();
       if (_this.centerAirConditionerDevs.length > 0) {
           $.each(_this.centerAirConditionerDevs, function (_index, _obj) {
               if (_obj.name.indexOf("cacWind_") >= 0) {
                   _obj.visible = true;
               }
           })
       }
   }
   //关闭中央空调
   this.closeCenterAirConditioner = function () {
       var _this = this;
       $("#centerAC_btn1").attr("disabled", true);
       $("#centerAC_btn2").attr("disabled", true);
       $("#centerAC_btn3").attr("disabled", true);
       if (_this.centerAirConditionerDevs.length > 0) {
           $.each(_this.centerAirConditionerDevs, function (_index, _obj) {
               if (_obj.name.indexOf("cacWind_") >= 0) {
                   _obj.visible = false;
               }
           })
       }
       setTimeout(function () {
           _this.hideCenterAirConditioner();
           $("#centerAC_btn1").attr("disabled", false);
           $("#centerAC_btn2").attr("disabled", false);
           $("#centerAC_btn3").attr("disabled", false);
       }, 2000);
   }

　　

十三、打开3D场景内告警监控，3D实时模拟显示告警情况

 

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
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
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
//告警绑定
   this.alarmIntervals = [];
   //添加3D告警动画
   this.alarmObj = function (alarmObj, AlarmColor, alarmId) {
       var _this = this;
       var _canPush = true;
       if (_this.alarmIntervals.length > 0) {
           $.each(_this.alarmIntervals, function (_index, _obj) {
               if (alarmId == _obj.alarmId) {
                   _canPush = false;
               }
           });
       }
       if (_canPush) {
       var interval = setInterval(function () {
           if (alarmObj && alarmObj.alarmColor && alarmObj.alarmColor == AlarmColor) {
               tl3DCoreObj.commonFunc.setSkinColorByObj(alarmObj, 0x000000);
               alarmObj.alarmColor = 0x000000;
           } else {
               tl3DCoreObj.commonFunc.setSkinColorByObj(alarmObj, AlarmColor);
               alarmObj.alarmColor = AlarmColor;
           }
       }, 400);
       _this.alarmIntervals.push({ alarmobjname: alarmObj.name, alarmInterval: interval, alarmId: alarmId })
       }
   }
   //消除3D告警动画
   this.cleanAlarm = function (alarmObj,alarmId) {
       var _this = this;
       var _alarmIndex = -1;
       if (_this.alarmIntervals.length > 0) {
           $.each(_this.alarmIntervals, function (_index, _obj) {
               if (alarmId == _obj.alarmId) {
                   _alarmIndex = _index;
                   tl3DCoreObj.commonFunc.setSkinColorByObj(alarmObj, 0x000000);
                   alarmObj.alarmColor = 0x000000;
                   clearInterval(_obj.alarmInterval);
               }
           });
       }
       if (_alarmIndex >= 0) {
       _this.alarmIntervals.splice(_alarmIndex, 1);
       }
   }
   this.alarmMonitorIntervals = null;
   this.alarmMonitorBackgroundColorOprity = 0;
   this.alarmMonitorBackgroundColorOprityOP = 1;//1是加 -1是减
   //点击告警监控按钮
   this.alarmMonitorCtrl = function () {
       var _this = this;
       _this.changeCameraPosition({ x: 430, y: 1449, z: -2557 }, { x: 8, y: 234, z: 814 }, 1000);
       $("#btn_alarmCtrl").css("border-radius", "25px 25px 25px 25px");
       if ($("#btn_alarmCtrl").attr("data_state") && $("#btn_alarmCtrl").attr("data_state") == "runing") {
           layer.msg("告警监控已关闭");
           $("#btn_alarmCtrl").attr("data_state", "close");
           $("#btn_alarmCtrl").css("background", "rgba(255, 255, 0, 0)");
           $("#btn_alarmCtrl").attr("title", "启动告警监控");
           if (_this.alarmMonitorIntervals) {
               clearInterval(_this.alarmMonitorIntervals);
           }
           _this.closeAlarmMonitor();
       } else {
           _this.startAlarmMonitor();
           _this.alarmMonitorBackgroundColorOprity = 0;
           $("#btn_alarmCtrl").attr("data_state", "runing");
           $("#btn_alarmCtrl").attr("title", "关闭告警监控");
           layer.msg("告警监控已开启");
           if (_this.alarmMonitorIntervals) {
               clearInterval(_this.alarmMonitorIntervals);
           }
           _this.alarmMonitorIntervals = setInterval(function () {
               if (_this.alarmMonitorBackgroundColorOprityOP == 1) {
                   _this.alarmMonitorBackgroundColorOprity += 0.05
               }else {
                   _this.alarmMonitorBackgroundColorOprity -= 0.05
               }
               if (_this.alarmMonitorBackgroundColorOprity >= 1) {
                   _this.alarmMonitorBackgroundColorOprityOP = -1;
               } else if (_this.alarmMonitorBackgroundColorOprity <=0) {
                   _this.alarmMonitorBackgroundColorOprityOP = 1;
               }
               $("#btn_alarmCtrl").css("background", "rgba(255, 255, 0, " + _this.alarmMonitorBackgroundColorOprity + ")");
           }, 50);
       }
   }
   this.alarmObjList = []; /*{alarmObjName, AlarmColor, alarmId,alarmState:"start"} alarmState：“start” "end" */
   //获取实时告警列表
   this.getAlarmObjList = function () {
 
       var result = [
       {
           alarmObjName: "mjj_3_6",
           AlarmColor: 0xff0000,
           alarmId: "mjj_3_6",
           alarmState: "start"
       },
       {
           alarmObjName: "smokeSensor_1",
           AlarmColor: 0xff0000,
           alarmId: "smokeSensor_1",
           alarmState: "start"
       },
       {
           alarmObjName: "mjj_1_1",
           AlarmColor: 0xff0000,
           alarmId: "mjj_1_1",
           alarmState: "start"
       },
       {
           alarmObjName: "mjj_5_3",
           AlarmColor: 0xff0000,
           alarmId: "mjj_5_3",
           alarmState: "start"
       }];
       return result;
   }
   //开启告警监控 当服务端告警有改变时 可以调用此接口
   this.startAlarmMonitor = function () {
       var _this = this;
       _this.closeAlarmMonitor();
       //获取告警列表
       this.alarmObjList = _this.getAlarmObjList();
       if (_this.alarmObjList && _this.alarmObjList.length > 0) {
           $.each(_this.alarmObjList, function (_index, _obj) {
               var tl3dObj = tl3DCoreObj.commonFunc.findObject(_obj.alarmObjName);
               if (tl3dObj) {
                   _obj.tl3dObj = tl3dObj;
                   if (_obj.alarmState == "start") {
                       if (tl3dObj.name.indexOf("smokeSensor_") >= 0) {//如果是烟感告警 特殊处理
                           _this.alarmSmokeSensor(tl3dObj);
                       }else{
                           _this.alarmObj(tl3dObj, _obj.AlarmColor, _obj.alarmId);
                       }
                   }
               }
           });
       }
   }
   //关闭告警监控
   this.closeAlarmMonitor = function () {
       var _this = this;
       //获取告警列表
       if (_this.alarmObjList && _this.alarmObjList.length > 0) {
           $.each(_this.alarmObjList, function (_index, _obj) {
               if (_obj.tl3dObj.name.indexOf("smokeSensor_") >= 0) {//如果是烟感告警 特殊处理
                   _this.clearSmokeAlarm(_obj.tl3dObj);
               } else {
                   _this.cleanAlarm(_obj.tl3dObj, _obj.alarmId);
               }
           });
       }
   }
   //关闭某个告警
   this.closeAlarm = function (alarmId) {
       var _this = this;
       //获取告警列表
       if (_this.alarmObjList && _this.alarmObjList.length > 0) {
           $.each(_this.alarmObjList, function (_index, _obj) {
               if (_obj.alarmId == alarmId) {
                   _obj.alarmState = "end";
                   if (_obj.tl3dObj.name.indexOf("smokeSensor_") >= 0) {//如果是烟感告警 特殊处理
                       _this.clearSmokeAlarm(_obj.tl3dObj);
                   } else {
                       _this.cleanAlarm(_obj.tl3dObj, _obj.alarmId);
                   }
               }
           });
       }
   }
   //显示告警详情
   this.showAlarmDetail = function (_obj) {
       //如果状态是开始 并且该对象存在告警 那么就显示告警
       if ($("#btn_alarmCtrl").attr("data_state") == "runing") {
           var currentAlarms = this.getAlarmObjList();
           var IsShowAlarmDetail = false;
           $.each(currentAlarms, function (_index, _alarmObj) {
               if (_alarmObj.alarmObjName == _obj.name) {
                   IsShowAlarmDetail = true;
               }
           });
           if (IsShowAlarmDetail) {//如果存在告警 就显示告警详情
               var index = layer.open({
                   type: 1,
                   title:_obj.name + '-告警详情',
                   area: ['500px', '500px'],
                   maxmin: true,
                   content:"此处自定义显示告警详情",
                   
               });
           }
       }
   }

　　

十四、对场景内其它设备进行3D操控 如窗帘 采光控制 灯光控制等等

 

?
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
//窗帘
   this._CurtainArray = null;
   this._CurtainState = "";
   this.changeCurtainsState = function () {
       var _this = this;
       _this.changeCameraPosition({ x: -620, y: 903, z: 105 }, { x: -184, y: -67, z: -560 }, 1000,
           function () {
               if (_this._CurtainArray == null) {
                   _this._CurtainArray = [tl3DCoreObj.commonFunc.findObject("curtains4"),
                   tl3DCoreObj.commonFunc.findObject("curtains3"),
                   tl3DCoreObj.commonFunc.findObject("curtains2"),
                   tl3DCoreObj.commonFunc.findObject("curtains1")]
               }
               if (_this._CurtainState != "running") {
                   _this._CurtainState = "running";
                   if ($("#btn_windowsCtrl").attr("data_state")) {
                   } else {
                       $("#btn_windowsCtrl").attr("data_state", "close")
                   }
                   if ($("#btn_windowsCtrl").attr("data_state") == "close") {
                       $.each(_this._CurtainArray, function (_index, _obj) {
                           _this.changeCurtainState(_obj, "open");
                       });
                       $("#btn_windowsCtrl").attr("data_state", "open");
                       $("#btn_windowsCtrl").attr("src", "../../img/3dImg/winOpen.png");
                   } else {
                       $.each(_this._CurtainArray, function (_index, _obj) {
                           _this.changeCurtainState(_obj, "close");
                       });
                       $("#btn_windowsCtrl").attr("data_state", "close");
                       $("#btn_windowsCtrl").attr("src", "../../img/3dImg/winClose.png");
                   }
                   setTimeout(function () {
                       _this._CurtainState = "";
                   }, 1500);
               }
 
 
       });
      
   }
   //改变窗帘状态
   this.changeCurtainState=function (curtain,_cmd) {
       var state = "close"
       if (curtain.curtainRunState && curtain.curtainRunState == "running") {
           return;
       } else  {
           curtain.curtainRunState = "running";
       }
       if (curtain.curtainState) {
           state = curtain.curtainState;
       } else {
           curtain.curtainState = state;
       }
       if (_cmd) {
           if (_cmd == state) {
               curtain.curtainRunState = "";
               return;
           }
       }
       var curtain_0 = curtain.children[6];//滚轴
       var curtain_1 = curtain.children[5];//窗帘布
       var curtain_2 = curtain.children[7];//吊缀
       curtain_0.matrixAutoUpdate = true;
       curtain_1.matrixAutoUpdate = true;
       curtain_2.matrixAutoUpdate = true;
 
       new TWEEN.Tween(curtain_0.rotation).to({
           x: (state == "close" ? Math.PI * 10 : 0)
       }, 1000).onComplete(function () {
       }).start();
       new TWEEN.Tween(curtain_0.scale).to({
           x: state == "close" ? 2 : 1,
           z: state == "close" ? 2 : 1
       }, 1000).onComplete(function () {
           curtain_0.matrixAutoUpdate = false;
       }).start();
 
       new TWEEN.Tween(curtain_1.scale).to({
           y: state == "close" ? 0.1 : 1
       }, 1000).onComplete(function () {
       }).start();
       var yy = curtain_1.position.y;
       new TWEEN.Tween(curtain_1.position).to({
           y: state == "close" ? yy + 58.5 : yy - 58.5
       }, 1000).onComplete(function () {
           curtain_1.matrixAutoUpdate = false;
       }).start();
       var yy2 = curtain_2.position.y;
       new TWEEN.Tween(curtain_2.position).to({
           y: state == "close" ? yy2 + 117 : yy2 - 117
       }, 1000).onComplete(function () {
           curtain_2.matrixAutoUpdate = false;
           state == "close" ? curtain.curtainState = "open" : curtain.curtainState = "close";
           curtain.curtainRunState = "";
       }).start();
 
   }

　　

 

好了 这一课基本情况就先介绍到这里 

下一课我们继续讲解这一课的代码详情 以及讨论给这个场景加上一些新的功能 或者建立其他3D场景

用webgl 建立 3D机房 3D园区 3D智慧小区 3D工程等等

技术交流 1203193731@qq.com

 

交流微信：

　　　　

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

posted @   魂断蓝桥666  阅读(32736)  评论(17)  编辑  收藏  举报
编辑推荐：
· Linux系列：如何用 C#调用 C方法造成内存泄露
· AI与.NET技术实操系列（二）：开始使用ML.NET
· 记一次.NET内存居高不下排查解决与启示
· 探究高空视频全景AR技术的实现原理
· 理解Rust引用及其生命周期标识（上）
阅读排行：
· 阿里最新开源QwQ-32B，效果媲美deepseek-r1满血版，部署成本又又又降低了！
· 单线程的Redis速度为什么快？
· SQL Server 2025 AI相关能力初探
· AI编程工具终极对决：字节Trae VS Cursor，谁才是开发者新宠？
· 展开说说关于C#中ORM框架的用法！
点击右上角即可分享
微信分享提示