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

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

/*温度部分*********************************************************************/
//温度调节模拟+云图
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 = [];

　　

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

    /*大屏部分*********************************************************************/
    //获取大屏
    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操作 并且有过度动画

/*风控部分***********************************************************************/
//风控按钮
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操作 并且有过度动画

//空调
   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实时模拟显示告警情况

//告警绑定
   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操控 如窗帘 采光控制 灯光控制等等

//窗帘
   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工程等等