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

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

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

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

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

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

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

代码实现

  1. //应用切换库
  2. <script src="js/pagetransitions.js"></script>
  3. var PageTransitions = (function() {
  4.  
  5. 	var $main = $( '#pt-main' ),
  6. 		$pages = $main.children( 'div.pt-page' ),
  7.         $iterate = $( '.pt-touch-button' ),
  8. 		animcursor = 1,
  9. 		pagesCount = $pages.length,
  10.         current = 1,
  11.         precurrent=1,
  12. 		isAnimating = false,
  13. 		endCurrPage = false,
  14. 		endNextPage = false,
  15. 		animEndEventNames = {
  16. 			'WebkitAnimation' : 'webkitAnimationEnd',
  17. 			'OAnimation' : 'oAnimationEnd',
  18. 			'msAnimation' : 'MSAnimationEnd',
  19. 			'animation' : 'animationend'
  20. 		},
  21. 		// animation end event name
  22. 		animEndEventName = animEndEventNames[ Modernizr.prefixed( 'animation' ) ],
  23. 		// support css animations
  24. 		support = Modernizr.cssanimations;
  25.  
  26. 	function init() {
  27.  
  28. 		$pages.each( function() {
  29. 			var $page = $( this );
  30. 			$page.data( 'originalClassList', $page.attr( 'class' ) );
  31. 		} );
  32.  
  33.         $($(".pt-page.pt-page-1")[0]).addClass( 'pt-page-current' );
  34.         precurrent = 1;
  35.  
  36.         $iterate.on('click', function () {
  37.             var frameindex = $(this).attr("data-frameindex");
  38.             current = frameindex;
  39.             console.log(frameindex);
  40.             var _this = this;
  41.             if (isAnimating || current == precurrent ) {
  42. 				return false;
  43. 			}
  44. 			if( animcursor > 5 ) {
  45. 				animcursor = 1;
  46. 			}
  47. 			nextPage( animcursor );
  48.             ++animcursor;
  49.             //setTimeout(function () {
  50.             //    $("#frame" + $(_this).attr("data-frameindex")).attr("src", $(_this).attr("data-src"));
  51.             //}, 500);
  52. 		} );
  53.  
  54. 	}
  55.  
  56. 	function nextPage( animation ) {
  57.  
  58.         if (isAnimating) {
  59. 			return false;
  60. 		}
  61.  
  62. 		isAnimating = true;
  63.  
  64.         var $currPage = $($(".pt-page.pt-page-" + precurrent)[0]);
  65.  
  66.         var $nextPage = $($(".pt-page.pt-page-" +  current)[0]).addClass( 'pt-page-current' ),
  67. 			outClass = '', inClass = '';
  68.         precurrent = current;
  69. 		switch( animation ) {
  70.  
  71. 			case 1:
  72. 				outClass = 'pt-page-rotateCubeLeftOut pt-page-ontop';
  73. 				inClass = 'pt-page-rotateCubeLeftIn';
  74. 				break;
  75. 			case 2:
  76. 				outClass = 'pt-page-rotateCubeRightOut pt-page-ontop';
  77. 				inClass = 'pt-page-rotateCubeRightIn';
  78. 				break;
  79. 			case 3:
  80. 				outClass = 'pt-page-rotateCubeTopOut pt-page-ontop';
  81. 				inClass = 'pt-page-rotateCubeTopIn';
  82. 				break;
  83. 			case 4:
  84. 				outClass = 'pt-page-rotateCubeBottomOut pt-page-ontop';
  85. 				inClass = 'pt-page-rotateCubeBottomIn';
  86. 				break;
  87. 			case 5:
  88. 				outClass = 'pt-page-rotateSlideOut';
  89. 				inClass = 'pt-page-rotateSlideIn';
  90. 				break;
  91.  
  92. 		}
  93.  
  94. 		$currPage.addClass( outClass ).on( animEndEventName, function() {
  95. 			$currPage.off( animEndEventName );
  96. 			endCurrPage = true;
  97. 			if( endNextPage ) {
  98. 				onEndAnimation( $currPage, $nextPage );
  99. 			}
  100. 		} );
  101.  
  102. 		$nextPage.addClass( inClass ).on( animEndEventName, function() {
  103. 			$nextPage.off( animEndEventName );
  104. 			endNextPage = true;
  105. 			if( endCurrPage ) {
  106. 				onEndAnimation( $currPage, $nextPage );
  107. 			}
  108. 		} );
  109.  
  110. 		if( !support ) {
  111. 			onEndAnimation( $currPage, $nextPage );
  112. 		}
  113.  
  114. 	}
  115.  
  116. 	function onEndAnimation( $outpage, $inpage ) {
  117. 		endCurrPage = false;
  118. 		endNextPage = false;
  119. 		resetPage( $outpage, $inpage );
  120. 		isAnimating = false;
  121. 	}
  122.  
  123. 	function resetPage( $outpage, $inpage ) {
  124. 		$outpage.attr( 'class', $outpage.data( 'originalClassList' ) );
  125. 		$inpage.attr( 'class', $inpage.data( 'originalClassList' ) + ' pt-page-current' );
  126. 	}
  127.  
  128. 	init();
  129.  
  130. 	return { init : init };
  131.  
  132. })();

　　

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

代码实现

  1.   this.loadMjjFace = function (mjjObj) {
  2.         $.each(mjjObj.material.materials, function (_index, _obj) {
  3.             if (_obj.opacity > 0.1) {
  4.                 _obj.opacity = 0.1;
  5.             }
  6.         });
  7.         var cube = {
  8.             "show": true,
  9.             "uuid": "",
  10.             "name": mjjObj.name + "_animationCube",
  11.             "objType": "cube2",
  12.             "length": 78,
  13.             "width": 319,
  14.             "height": 1,
  15.             "x": mjjObj.position.x,
  16.             "y": mjjObj.position.y - 99,
  17.             "z": mjjObj.position.z,
  18.             "style": {
  19.                 "skinColor": 16777215, "skin":
  20.                     {
  21.                         "skin_up": { "skinColor": 7219463, "opacity": 0.9, },
  22.                         "skin_down": { "skinColor": 7219463, "opacity": 0.9, },
  23.                         "skin_fore": { "skinColor": 7219463, "opacity": 0.9, },
  24.                         "skin_behind": { "skinColor": 7219463, "opacity": 0.9, },
  25.                         "skin_left": { "skinColor": 7219463, "opacity": 0.9, },
  26.                         "skin_right": { "skinColor": 7219463, "opacity": 0.9, }
  27.                     }
  28.             }, "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
  29.         }
  30.         var temObj = tl3DCoreObj.createObjByJson(cube);
  31.         tl3DCoreObj.addObject(temObj);
  32.         new TWEEN.Tween(temObj.position).to({
  33.             y: mjjObj.position.y
  34.         }, 2000).start();
  35.         new TWEEN.Tween(temObj.scale).to({
  36.             y: 199
  37.         }, 2000).onComplete(function () {
  38.             $.each(mjjObj.material.materials, function (_index, _obj) {
  39.                 if (_obj.opacity == 0.1) {
  40.                     _obj.opacity = 1;
  41.                 }
  42.             });
  43.             tl3DCoreObj.destoryObj(mjjObj.name + "_animationCube");
  44.         }).start();
  45.         this.createMjjDetail(mjjObj);
  46.     }

　　

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

代码实现

  1. //创建密集架详情
  2.     this.createMjjDetail = function (mjjObj) {
  3.         var _this = this;
  4.         var detailGroup = null;
  5.         //获取密集架序号
  6.         var _groupNub = parseInt(mjjObj.name.split('_')[1]);//组序号
  7.         var _colomnNub = parseInt(mjjObj.name.split('_')[2])//列序号
  8.         //此处表示密集架行数 列数
  9.         var mjjparam = null;
  10.         var rowHeigtht = null;//每隔高度 此处200表示密集架高度
  11.         var columlength = null;//此处320表示宽度
  12.  
  13.         if (_this.mjjDetails[_groupNub - 1] && _this.mjjDetails[_groupNub - 1][_colomnNub - 1]) {
  14.             detailGroup = _this.mjjDetails[_groupNub - 1][_colomnNub - 1];
  15.         } else {
  16.              mjjparam = {
  17.                 rows: 12,
  18.                 colums: 4,
  19.             }
  20.              rowHeigtht = 200 / mjjparam.rows;//每隔高度 此处200表示密集架高度
  21.              columlength = 320 / mjjparam.colums;//此处320表示宽度
  22.             var mjjdetailGroup = {
  23.                 show: true,
  24.                 uuid: "",
  25.                 name: "mjjdetailGroup1",
  26.                 objType: "GroupObj",
  27.                 scale: { x: 1, y: 1, z: 1 },
  28.                 position: {
  29.                     x: mjjObj.position.x,
  30.                     y: mjjObj.position.y,
  31.                     z: mjjObj.position.z
  32.                 },
  33.                 rotation: [{ direction: 'x', degree: 0 }],//旋转 表示x方向0度  arb表示
  34.                 childrens: [
  35.                 ]
  36.             }
  37.             //创建横向隔板
  38.             for (var i = 0; i < mjjparam.rows - 1; i++) {
  39.                 var gb1 = {
  40.                     "show": true,
  41.                     "uuid": "",
  42.                     "name": "mjjdetail_r" + (i + 1),
  43.                     "objType": "cube2",
  44.                     "length": 79,
  45.                     "width": 319,
  46.                     "height": 1,
  47.                     "x": 0,
  48.                     "y": 100 - (i + 1) * rowHeigtht,
  49.                     "z": 0,
  50.                     "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
  51.                 };
  52.                 mjjdetailGroup.childrens.push(gb1);
  53.  
  54.             }
  55.             //创建竖向隔板
  56.             for (var i = 0; i < mjjparam.colums - 1; i++) {
  57.                 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 };
  58.  
  59.                 mjjdetailGroup.childrens.push(gb2);
  60.  
  61.                 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 });
  62.                 mjjdetailGroup.childrens.push(gb3);
  63.  
  64.             }
  65.             detailGroup = tl3DCoreObj.createObjByJson(mjjdetailGroup);
  66.             if (_this.mjjDetails[_groupNub - 1] == undefined) {
  67.                 _this.mjjDetails[_groupNub - 1] = [];
  68.             }
  69.             _this.mjjDetails[_groupNub - 1][_colomnNub - 1] = detailGroup;
  70.             tl3DCoreObj.addObject(detailGroup);
  71.         }
  72.         //获取内部实时数据
  73.         /*
  74.         数据格式 将有文件的格子信息 以如下形式输出
  75.             [
  76.                 {
  77.                 rowNo_:1,//行数
  78.                 colNo_:1,//列数
  79.                 filesNub:5//文件个数
  80.                 },
  81.  
  82.             ]
  83.         */
  84.  
  85.         var _files = [];
  86.  
  87.         {//演示数据 获取真实数据后可替换
  88.             for (var i = 1; i <= mjjparam.rows;i++){
  89.                 for (var j= 1; j <= mjjparam.colums;j++) {
  90.                     _files.push({
  91.                         rowNo_: i,//行数
  92.                         colNo_: j,//列数
  93.                         filesNub:Math.floor(Math.random()*10)%5 //随机生成演示文件个数
  94.                     });
  95.                 }
  96.             }
  97.         }
  98.  
  99.         //刷新文件排布
  100.         detailGroup.children.length = mjjparam.rows + mjjparam.colums*2-3;
  101.         $.each(_files, function (_index,_obj) {
  102.             if (_obj.filesNub > 0) {
  103.                 for (var w = 0; w < parseInt(Math.random() * parseInt((columlength - 2) / 22)) + 1 ; w++) {
  104.                     var _tmfile = {
  105.                         "show": true, "uuid": "", "name": "filebox_" + _obj.rowNo_ + "_" + _obj.colNo_ + "_w" + w, "objType": "cube", "length":70, "width": 20, "height": (rowHeigtht - 5),
  106.                         "x": mjjObj.position.x,
  107.                         "y": ( (_obj.rowNo_-1) * rowHeigtht + (rowHeigtht - 5) / 2 + 5),
  108.                         "z": mjjObj.position.z + (-160 + ((_obj.colNo_ - 1) * columlength) + 22* (1 + w)),
  109.  
  110.                         "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
  111.                     };
  112.                     var _tmfileObj = tl3DCoreObj.createObjByJson(_tmfile);
  113.                     detailGroup.children.push(_tmfileObj);
  114.                 }
  115.  
  116.             }
  117.         });
  118.  
  119.         detailGroup.visible = false;
  120.         detailGroup.position.x = mjjObj.position.x;
  121.         detailGroup.position.y = mjjObj.position.y;
  122.         detailGroup.position.z = mjjObj.position.z;
  123.         setTimeout(function () {
  124.             detailGroup.visible = true;
  125.         }, 2000);
  126.  
  127.     }

　　

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

代码实现

  1.    //查找文件 此处查找条件可以自定义
  2.     this.searchFile = function () {
  3.         var _this = this;
  4.         $("#toolbar").hide();
  5.         //获取到文件位置信息
  6.         //返回类型 searchFileObj={fileName:'',mjjName:'',mjjGroup:'3',mjjnub:'2',face:'',row:'',color:'',nub:''}\
  7.         //边缘弹出
  8.         layer.open({
  9.             title: "文件查找",
  10.             type: 1,
  11.             offset: 'lt' //具体配置参考：offset参数项
  12.             , content: '<div style="padding: 10px;width:250px;min-height:150px;background-color:rgba(255,255,255,0.4);">\
  13. 	<table class="table">\
  14. 	<tr><td style="text-align:right;width:80px;">类型：</td><td><input id="fsfileType" value="" /></td></tr>\
  15. 	<tr><td style="text-align:right;width:80px;">关键字：</td><td><input id="fskeyWord" value="" /></td></tr>\
  16. 	<tr><td style="text-align:right;width:80px;">结果：</td><td colspan=2 id="searchResuleTd"></td></tr>\
  17. 	</table></div>'
  18.             , btn: '确认查找'
  19.             , btnAlign: 'c' //按钮居中
  20.             , shade: 0 //不显示遮罩
  21.             , yes: function () {
  22.                 var searchFileObj = {
  23.                     mjjGroup: Math.floor(Math.random() * 12) % 6 + 1,
  24.                     mjjnub: Math.floor(Math.random() * 14) % 7 + 1,
  25.                     face: Math.random()>0.5? "A":"B",
  26.                     row: Math.floor(Math.random() * 20) % 10+1,
  27.                     column: Math.floor(Math.random() * 20) % 8+1,
  28.                     nub: Math.floor(Math.random() * 40) % 20 + 1
  29.                 };
  30.                 $("#searchResuleTd").html("密集架组：" + searchFileObj.mjjGroup + "组</br>"
  31.                                         + "密集架号：" + searchFileObj.mjjnub + "号</br>"
  32.                                         + "密集架面：" + searchFileObj.face + "面</br>"
  33.                                         + "所在行数：" + searchFileObj.row + "行</br>"
  34.                                         + "所在列数：" + searchFileObj.column + "列</br>"
  35.                                         + "文档序号：" + searchFileObj.nub + "</br>"
  36.                                             );
  37.                 var _mjjObj = tl3DCoreObj.commonFunc.findObject("mjj_" + searchFileObj.mjjGroup + "_" + searchFileObj.mjjnub);
  38.                 _this.selectObj(_mjjObj);
  39.  
  40.                 var newposition = {
  41.                     x: (tl3DCoreObj.camera.position.x + _mjjObj.position.x)/2,
  42.                     y: 600,
  43.                     z: (tl3DCoreObj.camera.position.z+ _mjjObj.position.z) / 2
  44.                 }
  45.                 if ((tl3DCoreObj.camera.position.x - _mjjObj.position.x) * (tl3DCoreObj.camera.position.x - _mjjObj.position.x)
  46.                     + (600 - _mjjObj.position.y) * (600 - _mjjObj.position.y)
  47.                     + (tl3DCoreObj.camera.position.z - _mjjObj.position.z) * (tl3DCoreObj.camera.position.z - _mjjObj.position.z)
  48.                     < 150 * 150 * 150) {
  49.                     newposition = {
  50.                         x: (tl3DCoreObj.camera.position.x),
  51.                         y: 600,
  52.                         z: (tl3DCoreObj.camera.position.z )
  53.                     }
  54.                 }
  55.                 _this.changeCameraPosition(newposition, _mjjObj.position, 500)
  56.             },
  57.             end: function () {
  58.                 $("#toolbar").show();
  59.                 _this.unselectObj();
  60.             }
  61.         });
  62.         $("#fsfileType").click(function () {
  63.             $("#fsfileType").focus();
  64.         })
  65.         $("#fskeyWord").click(function () {
  66.             $("#fskeyWord").focus();
  67.         })
  68.     }
  69.     this.selectedObjs = null;
  70.     this.selectObj=function (_obj) {
  71.         var _this = this;
  72.         if (_this.selectedObjs) {
  73.             _this.unselectObj();
  74.         }
  75.         var outlineMaterial2 = new THREE.MeshBasicMaterial({ color: 0x00ff00, side: THREE.BackSide });
  76.         var outlineMesh2 = new THREE.Mesh(_obj.geometry.clone(), outlineMaterial2);
  77.         outlineMesh2.scale.multiplyScalar(1.05);
  78.         outlineMesh2.position.x = _obj.position.x;
  79.         outlineMesh2.position.y = _obj.position.y;
  80.         outlineMesh2.position.z = _obj.position.z;
  81.         tl3DCoreObj.scene.add(outlineMesh2);
  82.         _this.selectedObjs = outlineMesh2;
  83.         _this.flashObj(_obj);
  84.     }
  85.     this.unselectObj=function () {
  86.         var _this = this;
  87.         if (_this.selectedObjs) {
  88.             tl3DCoreObj.scene.remove(_this.selectedObjs);
  89.             _this.selectedObjs = null;
  90.         }
  91.     }

　　

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

  1.  /*摄像头部分*********************************************************************/
  2.     this.cameraRange = [];
  3.     //摄像头按钮
  4.     this.showCamera = function () {
  5.         var _this = this;
  6.         if (_this.cameraRange.length <= 0) {
  7.             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 };
  8.             var temObj1 = tl3DCoreObj.createObjByJson(jsonobj1);
  9.             tl3DCoreObj.addObject(temObj1);
  10.             _this.cameraRange.push(temObj1);
  11.  
  12.             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": {
  13.                         "skin_up": { "skinColor": 16777215, "side": 0, "opacity": 0 }, "skin_down":{ "skinColor": 6881093, "side": 1, "opacity": 0 },
  14.                         "skin_side": { "skinColor": 2746367, "side": 2, "opacity": 0.3, "imgurl": "../../img/3dImg/camarerange.png" }
  15.                     }
  16.                 }, "position": { "x": 45.312, "y": 247.096, "z": 534.465 }, "objType": "cylinder",
  17.                 "height": 500, "customType1": "", "customType2": "", "animation": null, "dbclickEvents": null, "BindDevId": null, "BindDevName": null, "devInfo": null, "BindMeteId": null, "BindMeteName": null
  18.             };
  19.             var temObj2 = tl3DCoreObj.createObjByJson(jsonobj2);
  20.             tl3DCoreObj.addObject(temObj2);
  21.             _this.cameraRange.push(temObj2);
  22.  
  23.         }
  24.         if (_this.cameraRange.length > 0) {
  25.             $.each(_this.cameraRange, function (_index, _obj) {
  26.                 _obj.visible = true;
  27.                 _this.flashObj(_obj, 0xb2fb07);
  28.             });
  29.         }
  30.         _this.changeCameraPosition({ x: -1284, y: 1787, z: -378 }, { x: -237, y: 308, z: 145 }, 1000)
  31.     }
  32.     //隐藏摄像头范围
  33.     this.hideCamera = function () {
  34.         var _this = this;
  35.         if (_this.cameraRange.length > 0) {
  36.             $.each(_this.cameraRange, function (_index, _obj) {
  37.                 _obj.visible = false;
  38.             });
  39.         }
  40.     }
  41.     //打开视屏
  42.     this.showVideo = function (_obj) {
  43.         var _this = this;
  44.         layer.closeAll();
  45.         var videoUrl = "";
  46.         layer.open({
  47.             title: "视频",
  48.             area:["555px","280px"],
  49.             type: 1,
  50.             content: '<video id="video" autoplay loop webkit-playsinline style="width:100%;" >\
  51.                         <source src="../../img/3dImg/video.mp4">\
  52.                     </video>'
  53.         , btn: false
  54.         , shade: 0 //不显示遮罩
  55.         , yes: function () {
  56.  
  57.             },
  58.         end: function () {
  59.             _this.hideCamera();
  60.          }
  61.         });
  62.     }

　　

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

  1. /*消防按钮部分*********************************************************************/
  2.     //消防按钮--灭火器定位
  3.     this.FireControl = function () {
  4.         var _this = this;
  5.         _this.VirtualWalls();
  6.         _this.hideAllMjj();
  7.         _this.hideCamera();
  8.         _this.removeMark();
  9.         _this.addMark({ "x": 940, "y":200, "z": -660 });
  10.         _this.addMark({ "x": 660, "y": 200, "z": -70 });
  11.         _this.addMark({ "x": 660, "y": 200, "z": 400 });
  12.         _this.addMark({ "x": -960, "y": 200, "z": -70 });
  13.         _this.addMark({ "x": -960, "y": 200, "z": 400 });
  14.         function markmoveUP(){
  15.             new TWEEN.Tween(_this.marks[0].position).to({
  16.                 y:230
  17.             }, 700).onUpdate(function () {
  18.                 var _marktPosition=this;
  19.                 $.each(_this.marks, function (_index, _obj) {
  20.                     if (_index != 0) {
  21.                         _obj.position.y = _marktPosition.y
  22.                     }
  23.                 });
  24.             }).onComplete(function () {
  25.                 if (_this.marks.length > 0) {
  26.                     markmoveDown();
  27.                 }
  28.             }).start();
  29.         }
  30.         function markmoveDown() {
  31.             new TWEEN.Tween(_this.marks[0].position).to({
  32.                 y: 200
  33.             }, 700).onUpdate(function () {
  34.                 var _marktPosition = this;
  35.                 $.each(_this.marks, function (_index, _obj) {
  36.                     if (_index != 0) {
  37.                         _obj.position.y = _marktPosition.y
  38.                     }
  39.                 });
  40.             }).onComplete(function () {
  41.                 if (_this.marks.length > 0) {
  42.                     markmoveUP();
  43.                 }
  44.             }).start();
  45.         }
  46.         function moveCameras() {
  47.             _this.changeCameraPosition(
  48.                     { "x": -270, "y": 1274, "z": -714 },
  49.                     { "x": 209, "y": 705, "z": -750 },
  50.                     1000,
  51.                    function () {
  52.                      _this.changeCameraPosition(
  53.                            { "x": -574, "y": 1430, "z":-161 },
  54.                            { "x": 486, "y": 134, "z": -90 },
  55.                            2000,
  56.                            function () {
  57.                                _this.changeCameraPosition(
  58.                               { "x": 196, "y": 1262, "z":340},
  59.                               { "x": -639, "y": 277, "z":216},
  60.                               4000,
  61.                               function () {
  62.                                   _this.changeCameraPosition(
  63.                                   { "x":12, "y": 1749, "z": -2468 },
  64.                                   { "x":61, "y": 156, "z":194 }, 1000, function () { });
  65.                               }
  66.                           );
  67.                        }
  68.                    );
  69.                  }
  70.                 );
  71.         }
  72.         markmoveUP();
  73.         moveCameras();
  74.         $("#toolbar").hide();
  75.         layer.open({
  76.             title: "消防-灭火器定位",
  77.             type: 1,
  78.             offset: 'lt' //具体配置参考：offset参数项
  79.        , content: '<div style="padding: 10px;width:300px;min-height:200px;background-color:rgba(255,255,255,0.4);">\
  80. 	        <table class="table">\
  81. 	        <tr><td style="text-align:right;width:80px;">序号</td><td>位置</td><td>定位</td></tr>\
  82. 	        <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>\
  83. 	        <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>\
  84. 	        <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>\
  85. 	        <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>\
  86. 	        <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>\
  87. 	        </table></div>'
  88.        , btn:false
  89.        , btnAlign: 'c' //按钮居中
  90.        , shade: 0 //不显示遮罩
  91.        , end: function () {
  92.                 _this.hideFireControls();
  93.             }
  94.         });
  95.     }
  96.     this.hideFireControls = function () {
  97.         var _this = this;
  98.         $("#toolbar").show();
  99.         _this.EntityWalls();
  100.         _this.showAllMjj();
  101.         _this.removeMark();
  102.     }

　　

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

  1.     /*烟感模拟部分*********************************************************************/
  2.     //烟感模拟
  3.     this.smokeSensors = [];//烟感
  4.     this.getSmokeSensors = function () {
  5.         var _this = this;
  6.         if (_this.smokeSensors&&_this.smokeSensors.length == 0) {
  7.             $.each(tl3DCoreObj.objects, function (_index, _obj) {
  8.                 if (_obj.name.indexOf("smokeSensor_") >= 0) {
  9.                     _this.smokeSensors.push(_obj);
  10.                 }
  11.             });
  12.         }
  13.     }

　　

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

  1.     /*温度部分*********************************************************************/
  2.     //温度调节模拟+云图
  3.     this.changeTemplate = function () {
  4.         var _this = this;
  5.         $("#toolbar").hide();
  6.         _this.hideCamera();
  7.         _this.changeCameraPosition({ x: 540, y: 388, z: -524 }, { x: 0, y: 260, z: 130 }, 1000);
  8.         //获取当前湿度值
  9.         var hvalue = 28.5;
  10.         //隐藏所有密集架
  11.         this.hideAllMjj();
  12.         if (this.templates.length == 0) {
  13.             var tps = [300, -100, 300, 500, -500, -100, -500, 500]
  14.             for (var i = 0; i < 4; i++) {
  15.                 var _obj1 = {
  16.                     show: true,
  17.                     name: "thermometer",
  18.                     objType: "Thermometer3D",
  19.                     position: { x: tps[2 * i], y: 400, z: tps[2 * i + 1] },
  20.                     rotation: [{ "direction": "x", "degree": 0 }],
  21.                     scale: { "x": 2, "y": 1.5, "z": 2},
  22.                     value: hvalue,
  23.                 }
  24.                 var temObj1 = tl3DCoreObj.createObjByJson(_obj1);
  25.                 tl3DCoreObj.addObject(temObj1);
  26.                 _this.templates.push(temObj1)
  27.             }
  28.         }
  29.         for (var i = 0; i < _this.templates.length; i++) {
  30.             _this.templates[i].position.y = 400;
  31.             _this.templates[i].visible = true;
  32.         }
  33.         new TWEEN.Tween(_this.templates[0].position).to({
  34.             y: 200
  35.         }, 2000).onUpdate(function () {
  36.             for (var i = 1; i < _this.templates.length; i++) {
  37.                 _this.templates[i].position.y = this.y;
  38.             }
  39.         }).easing(TWEEN.Easing.Elastic.Out).start();
  40.         layer.closeAll();
  41.         var videoUrl = "";
  42.         layer.open({
  43.             title: "调节温度",
  44.             type: 1,
  45.             anim: 2,
  46.             content: '<div style="padding: 10px;width:240px;height:80px;background-color:rgba(255,255,255,0.71);text-align:center;">\
  47.                 温度:<input type="text" style="width:100px" id="template_input" value="' + hvalue + '" />%\
  48.                 </div>'
  49.         , btn: ["调节", "关闭"]
  50.         , shade: 0 //不显示遮罩
  51.         , yes: function () {
  52.             var t = parseFloat($("#template_input").val());
  53.             for (var i = 0; i < _this.templates.length; i++) {
  54.                 _this.templates[i].changeThermoneter(t);
  55.             }
  56.         },
  57.             end: function () {
  58.                 _this.hideTemplate();
  59.             }
  60.         });
  61.         var t = $("#template_input").val();
  62.         $("#template_input").val("").focus().val(t)
  63.     }
  64.     this.hideTemplate = function () {
  65.         var _this = this;
  66.         $("#toolbar").show();
  67.         _this.hideCamera();
  68.         var _this = this;
  69.         if (this.templates.length > 0) {
  70.             for (var i = 0; i < _this.templates.length; i++) {
  71.                 _this.templates[i].position.y = 400;
  72.                 _this.templates[i].visible = false;
  73.             }
  74.         }
  75.         _this.showAllMjj();
  76.     }

　　

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

  1.     //湿度调节模拟+云图
  2.     this.humiditys = [];
  3.     this.changehumidity = function () {
  4.         var _this = this;
  5.         $("#toolbar").hide();
  6.         _this.hideCamera();
  7.         _this.changeCameraPosition({ x: -35, y: 647, z: -1190 }, { x: -37, y: 190, z: 95 }, 1000);
  8.         //获取当前湿度值
  9.         var hvalue = 28.5;
  10.         //隐藏所有密集架
  11.         this.hideAllMjj();
  12.         if (this.humiditys.length == 0) {
  13.             var humiditys = [300, -100, 300, 500, -500, -100, -500, 500]
  14.             for (var i = 0; i < 4;i++){
  15.                 var humidity1 = {
  16.                     show: true,
  17.                     name: "humidity",
  18.                     objType: "Humidity",
  19.                     position: { x: humiditys[2 * i], y: 400, z: humiditys[2 * i+1] },
  20.                     rotation: [{ "direction": "x", "degree": 0 }],
  21.                     scale: { "x": 1, "y": 1, "z": 1 },
  22.                     value: hvalue,
  23.                 }
  24.                 var temObj1 = tl3DCoreObj.createObjByJson(humidity1);
  25.                 tl3DCoreObj.addObject(temObj1);
  26.                 _this.humiditys.push(temObj1)
  27.             }
  28.         }
  29.         for (var i = 0; i < _this.humiditys.length;i++){
  30.             _this.humiditys[i].position.y = 400;
  31.             _this.humiditys[i].visible = true;
  32.         }
  33.         new TWEEN.Tween(_this.humiditys[0].position).to({
  34.             y: 200
  35.         }, 2000).onUpdate(function () {
  36.             for (var i = 1; i < _this.humiditys.length; i++) {
  37.                 _this.humiditys[i].position.y = this.y;
  38.             }
  39.         }).easing(TWEEN.Easing.Elastic.Out).start();
  40.         layer.closeAll();
  41.         var videoUrl = "";
  42.         layer.open({
  43.             title: "调节湿度",
  44.             type: 1,
  45.             anim: 2,
  46.             content: '<div style="padding: 10px;width:240px;height:80px;background-color:rgba(255,255,255,0.71);text-align:center;">\
  47.                 湿度:<input type="text" style="width:100px" id="humidity_input" value="' + hvalue + '" />%\
  48.                 </div>'
  49.         , btn: ["调节","关闭"]
  50.         , shade: 0 //不显示遮罩
  51.         , yes: function () {
  52.             var t = parseFloat($("#humidity_input").val());
  53.             for (var i = 0; i < _this.humiditys.length; i++) {
  54.                 _this.humiditys[i].changeThermoneter(t);
  55.             }
  56.         },
  57.             end: function () {
  58.                 _this.hideHumidity();
  59.             }
  60.         });
  61.         var t = $("#humidity_input").val();
  62.         $("#humidity_input").val("").focus().val(t)
  63.     }
  64.     this.hideHumidity = function () {
  65.         var _this = this;
  66.         $("#toolbar").show();
  67.         _this.hideCamera();
  68.         var _this = this;
  69.         if (this.humiditys.length > 0) {
  70.             for (var i = 0; i < _this.humiditys.length;i++){
  71.                 _this.humiditys[i].position.y = 400;
  72.                 _this.humiditys[i].visible = false;
  73.             }
  74.         }
  75.         _this.showAllMjj();
  76.     }
  77.     this.templates = [];

　　

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

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

　　

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

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

　　

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

  1.  //空调
  2.     this.airConditionerCtls = function () {
  3.         var _this = this;
  4.         $("#toolbar").hide();
  5.         //获取到文件位置信息
  6.         //边缘弹出
  7.         layer.open({
  8.             title: "空调控制",
  9.             type: 1,
  10.             offset: 'lt' //具体配置参考：offset参数项
  11.             , content: '<div style="padding: 10px;width:300px;min-height:120px;background-color:rgba(255,255,255,0.4);">\
  12. 	<table class="table">\
  13. 	<tr><td style="text-align:center;width:80px;">空调</td><td style="text-align:center;width:200px;">操作</td></tr>\
  14. 	<tr><td style="text-align:left;width:80px;">立柜空调</td><td style="text-align:center;">\
  15.         <button id="LGAC_btn1" onclick="tl3dCoreBusiness.changeCameraPosition({x: -98, y: 356, z: 407},{x: -75, y: 121, z: 762},1000)">定位</button>\
  16.         <button id="LGAC_btn2" onclick="tl3dCoreBusiness.openLSAirconditioner(\'aircondition_57\')">开启</button>\
  17.         <button id="LGAC_btn3" onclick="tl3dCoreBusiness.closeLSAirconditioner(\'aircondition_57\')">关闭</button>\
  18.     </td></tr>\
  19. 	<tr><td style="text-align:left;width:80px;">中央空调</td><td style="text-align:center;">\
  20.         <button onclick="tl3dCoreBusiness.showCenterAirConditioner()" id="centerAC_btn1">定位</button>\
  21.         <button onclick="tl3dCoreBusiness.openCenterAirConditioner()" id="centerAC_btn2">开启</button>\
  22.         <button onclick="tl3dCoreBusiness.closeCenterAirConditioner()" id="centerAC_btn3">关闭</button>\
  23.     </td></tr>\
  24. 	</table></div>'
  25.             , btn: false
  26.             , btnAlign: 'c' //按钮居中
  27.             , shade: 0 //不显示遮罩
  28.             , end: function () {
  29.                 $("#toolbar").show();
  30.                 _this.hideCenterAirConditioner();
  31.                 _this.hideLSAirconditioner();
  32.             }
  33.         });
  34.  
  35.     }
  36.     this.LGAirConditions = [];
  37.     //开启立式空调
  38.     this.openLSAirconditioner = function (airConName) {
  39.         var tempAirWind=null;
  40.         var _this = this;
  41.         var aircondition = tl3DCoreObj.commonFunc.findObject(airConName);
  42.         if (this.LGAirConditions && this.LGAirConditions.length > 0) {
  43.             $.each(this.LGAirConditions, function (_index, _obj) {
  44.                 if (_obj.name == airConName + "_wind_1") {
  45.                     tempAirWind = _obj;
  46.                 }
  47.             });
  48.         }
  49.         //{x: -82.581, y: 92.342, z: 743.966}
  50.         if (tempAirWind == null) {
  51.         var lgairwin = {
  52.             "show": true, "uuid": "",
  53.             "name":airConName+"_wind_1",// "lgAirC_wind_1",
  54.             "objType": "flowTube",
  55.             "points": [{ "x": 0, "y": 200, "z": 0 }, { "x": 0, "y": 150, "z": -60 }, { "x": 0, "y": 150, "z": -200 }],
  56.             "position": { "x": aircondition.position.x, "y": aircondition.position.y - 122, "z": aircondition.position.z - 13 },
  57.             "scale": { "x": 1, "y": 1, "z": 1 },
  58.             "rotation": [{ "direction": "x", "degree": 0 }, { "direction": "y", "degree": 0 }, { "direction": "z", "degree": 0 }],
  59.             "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
  60.         }
  61.         var temObj1 = tl3DCoreObj.createObjByJson(lgairwin);
  62.         tl3DCoreObj.addObject(temObj1);
  63.         _this.LGAirConditions.push(temObj1);
  64.         tempAirWind = temObj1;
  65.         }
  66.         if (tempAirWind) {
  67.             tempAirWind.visible = true;
  68.         }
  69.     }
  70.     //关闭立式空调
  71.     this.closeLSAirconditioner = function (airConName,isCloseAll) {
  72.         var _this = this;
  73.         if (this.LGAirConditions && this.LGAirConditions.length > 0) {
  74.             $.each(this.LGAirConditions, function (_index, _obj) {
  75.                 if (_obj.name == airConName + "_wind_1") {
  76.                     _obj.visible = false;
  77.                 }
  78.                 if (isCloseAll) {
  79.                     _obj.visible = false;
  80.                 }
  81.             });
  82.         }
  83.     }
  84.     //隐藏立式空调风口动画
  85.     this.hideLSAirconditioner = function () {
  86.         var _this = this;
  87.         if (this.LGAirConditions && this.LGAirConditions.length > 0) {
  88.             $.each(this.LGAirConditions, function (_index, _obj) {
  89.                     _obj.visible = false;
  90.             });
  91.         }
  92.     }
  93.     //开启中央空调
  94.     this.centerAirConditionerDevs = [];
  95.     //显示中央空调设备
  96.     this.showCenterAirConditioner = function () {
  97.         var _this = this;
  98.         if (_this.centerAirConditionerDevs.length <= 0) {
  99.         var centerAirCondition = [
  100.             { "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 }]
  101.         $.each(centerAirCondition,function(_index,_obj){
  102.             var temObj1 = tl3DCoreObj.createObjByJson(_obj);
  103.             tl3DCoreObj.addObject(temObj1);
  104.             _this.centerAirConditionerDevs.push(temObj1)
  105.         })
  106.         }
  107.         if (_this.centerAirConditionerDevs.length > 0) {
  108.             $.each(_this.centerAirConditionerDevs, function (_index, _obj) {
  109.                     _obj.visible = true;
  110.             })
  111.         }
  112.         //获取中央空调开关状态
  113.         var isopen = true;//此处调用函数 获取中央空调状态
  114.         if (isopen) {
  115.             _this.openCenterAirConditioner();
  116.         } else {
  117.             _this.closeCenterAirConditioner();
  118.         }
  119.     }
  120.     //隐藏中央空调设备
  121.     this.hideCenterAirConditioner = function () {
  122.         var _this = this;
  123.         if (_this.centerAirConditionerDevs.length > 0) {
  124.             $.each(_this.centerAirConditionerDevs, function (_index, _obj) {
  125.                 _obj.visible = false;
  126.             })
  127.         }
  128.     }
  129.     //打开中央空调
  130.     this.openCenterAirConditioner = function () {
  131.         var _this = this;
  132.         _this.showCenterAirConditioner();
  133.         if (_this.centerAirConditionerDevs.length > 0) {
  134.             $.each(_this.centerAirConditionerDevs, function (_index, _obj) {
  135.                 if (_obj.name.indexOf("cacWind_") >= 0) {
  136.                     _obj.visible = true;
  137.                 }
  138.             })
  139.         }
  140.     }
  141.     //关闭中央空调
  142.     this.closeCenterAirConditioner = function () {
  143.         var _this = this;
  144.         $("#centerAC_btn1").attr("disabled", true);
  145.         $("#centerAC_btn2").attr("disabled", true);
  146.         $("#centerAC_btn3").attr("disabled", true);
  147.         if (_this.centerAirConditionerDevs.length > 0) {
  148.             $.each(_this.centerAirConditionerDevs, function (_index, _obj) {
  149.                 if (_obj.name.indexOf("cacWind_") >= 0) {
  150.                     _obj.visible = false;
  151.                 }
  152.             })
  153.         }
  154.         setTimeout(function () {
  155.             _this.hideCenterAirConditioner();
  156.             $("#centerAC_btn1").attr("disabled", false);
  157.             $("#centerAC_btn2").attr("disabled", false);
  158.             $("#centerAC_btn3").attr("disabled", false);
  159.         }, 2000);
  160.     }

　　

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

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

　　

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

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

　　

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

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

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

技术交流 1203193731@qq.com

交流微信：

　　　　

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

如何用webgl(three.js)搭建一个3D库房-第二课的更多相关文章

  1. 如何用webgl(three.js)搭建一个3D库房-第一课

    今天我们来讨论一下如何使用当前流行的WebGL技术搭建一个库房并且实现实时有效交互 第一步.搭建一个3D库房首先你得知道库房长啥样,我们先来瞅瞅库房长啥样(这是我在网上找的一个库房图片,百度了“库房” ...

  2. 如何用webgl(three.js)搭建一个3D库房,3D密集架,3D档案室（升级版）

    很长一段时间没有写3D库房,3D密集架相关的效果文章了,刚好最近有相关项目落地,索性总结一下 与之前我写的3D库房密集架文章<如何用webgl(three.js)搭建一个3D库房,3D密集架,3 ...

  3. 如何用webgl(three.js)搭建一个3D库房,3D仓库,3D码头,3D集装箱可视化孪生系统——第十五课

    序 又是快两个月没写随笔了,长时间不总结项目,不锻炼文笔,一开篇,多少都会有些生疏,不知道如何开篇,如何写下去.有点江郎才尽,黔驴技穷的感觉. 写随笔,通常三步走,第一步,搭建框架,先把你要写的内容框 ...

  4. 如何用webgl(three.js)搭建一个3D库房,3D仓库3D码头,3D集装箱,车辆定位,叉车定位可视化孪生系统——第十五课

    序 又是快两个月没写随笔了,长时间不总结项目,不锻炼文笔,一开篇,多少都会有些生疏,不知道如何开篇,如何写下去.有点江郎才尽,黔驴技穷的感觉. 写随笔,通常三步走,第一步,搭建框架,先把你要写的内容框 ...

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

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

  6. 如何用webgl(three.js)搭建处理3D园区、3D楼层、3D机房管线问题（机房升级版）-第九课（一）

    写在前面的话: 说点啥好呢?就讲讲前两天的小故事吧,让我确实好好反省了一下. 前两天跟朋友一次技术对话,对方问了一下Geometry与BufferGeometry的具体不同,我一下子脑袋短路,没点到重 ...

  7. 如何用webgl(three.js)搭建处理3D隧道、3D桥梁、3D物联网设备、3D高速公路、三维隧道桥梁设备监控-第十一课

    开篇废话: 跟之前的文章一样,开篇之前,总要写几句废话,大抵也是没啥人看仔细文字,索性我也想到啥就聊啥吧. 这次聊聊疫情,这次全国多地的疫情挺严重的,本人身处深圳,深圳这几日报导都是几十几十的新增病例 ...

  8. 使用webgl(three.js)搭建一个3D智慧园区、3D建筑，3D消防模拟，web版3D,bim管理系统——第四课

    序:这段时间忙于奔波,好久没有更新了,今天更新一下,继续上节课的完善讲解,算是对前段时间的一个总结吧.披星戴月的时光也算有点应用效果了. 对于webgl(three.js)性能这一块我在上节课< ...

  9. 使用webgl(three.js)搭建一个3D建筑，3D消防模拟——第三课

    项目背景 消防安全一直是各大都市关注的重要课题,在消防体系中,特别是高楼消防体系中,消防系统整体布控与监控,火情有效准确定位,防火器材定位,人员逃生路径规划,火情预警,消防演习都是特别重要的环节.所以 ...

随机推荐

  1. Vue之七导航守卫

    { path:'/',component:Recommend,beforeEnter: (to, from, next) => { console.log(to); ajax('get','/a ...

  2. 【Python】 http客户端库requests & urllib2 以及ip地址处理IPy

    requests requests是个HTTPClient库,相比于urllib,urllib2等模块比更加简洁易用 ■ get请求 作为示例,讲一下关于requests如何发起并处理一个get请求 ...

  3. mysql错误集锦

    1.使用myqldump备份出错:(--opt快速导出) mysqldump -u root -p --database mysql --opt -h127.0.0.1 > mysql.sqlE ...

  4. Algorithm --> DFS和BFS

    定义结点 struct MGraph { int vexs[MAXVEX]; //顶点数组 int arc[MAXVEX][MAXVEX]; //邻接矩阵 int numVertex, numEdge ...

  5. JWT 简介

    JWT是一种用于双方之间传递安全信息的简洁的.URL安全的表述性声明规范.JWT作为一个开放的标准(RFC 7519),定义了一种简洁的,自包含的方法用于通信双方之间以Json对象的形式安全的传递信息 ...

  6. java 打印近似圆

    只要给定不同半径,圆的大小就会随之发生改变近似圆如图 设半径为r,圆心为(r,r). 由勾股定理 易得y = r -√(2*r*x-x*x) 此处注意x+=2.因为打印窗口上一行2个字节的宽度与一列的 ...

  7. [日常] Codeforces Round #441 Div.2 实况

    上次打了一发 Round #440 Div.2 结果被垃圾交互器卡掉 $200$ Rating后心情复杂... 然后立了个 Round #441 要翻上蓝的flag QAQ 晚饭回来就开始搞事情, 大 ...

  8. 浅谈element-ui中的BEM范式实践

    日常的工作中,我们无时无刻不在和样式打交道.没有样式的页面就如同一部电影,被人随意地在不同地方做了截取. BEM规范应该是对于我们现在前端组件开发中我觉得是最合适的一套范式了.所以,我在自己的日常工作 ...

  9. JavaScript(第二十二天)【动态加载js和css】

    学习要点: 1.元素位置 2.动态脚本 3.动态样式 本章主要讲解上一章剩余的获取位置的DOM方法.动态加载脚本和样式.   一．元素位置 上一章已经通过几组属性可以获取元素所需的位置,那么这节课补充 ...

  10. 冲刺NO.8

    Alpha冲刺第八天 站立式会议 项目进展 项目稳步进行,项目的基础部分如基本信息管理,信用信息管理等部分已相对比较完善. 问题困难 技术困难在短期内很难发生质的变化,而本项目由于选择了队员不太熟悉的 ...