如何用webgl(three.js)搭建一个3D库房-第二课
闲话少叙，我们接着第一课继续讲（http://www.cnblogs.com/yeyunfei/p/7899613.html），很久没有做技术分享了。很多人问第二课有没有，我也是抽空写一下第二课。
第一课程提到了在库房的基础上添加上下架 消防 温湿度等等控制
刚好 最近有接到一个客户的需求 是和库房差不多的项目 只是不是库房了 是档案室 但是基本操控还是差不多的 也有文件上下架什么的
那么第二课 我们就按照客户的需求 先做一个概述性的展现
特此说明：为了减少网络传输带宽 我特意用ScreenToGif工具 截了一些gif图 压缩成低帧率
有什么需要交流的 可邮件我 1203193731@qq.com
一、需要场景进行无缝的动画切换
代码实现
//应用切换库
<script src="js/pagetransitions.js"></script>
var PageTransitions = (function() { var $main = $( '#pt-main' ),
$pages = $main.children( 'div.pt-page' ),
$iterate = $( '.pt-touch-button' ),
animcursor = 1,
pagesCount = $pages.length,
current = 1,
precurrent=1,
isAnimating = false,
endCurrPage = false,
endNextPage = false,
animEndEventNames = {
'WebkitAnimation' : 'webkitAnimationEnd',
'OAnimation' : 'oAnimationEnd',
'msAnimation' : 'MSAnimationEnd',
'animation' : 'animationend'
},
// animation end event name
animEndEventName = animEndEventNames[ Modernizr.prefixed( 'animation' ) ],
// support css animations
support = Modernizr.cssanimations; function init() { $pages.each( function() {
var $page = $( this );
$page.data( 'originalClassList', $page.attr( 'class' ) );
} ); $($(".pt-page.pt-page-1")[0]).addClass( 'pt-page-current' );
precurrent = 1; $iterate.on('click', function () {
var frameindex = $(this).attr("data-frameindex");
current = frameindex;
console.log(frameindex);
var _this = this;
if (isAnimating || current == precurrent ) {
return false;
}
if( animcursor > 5 ) {
animcursor = 1;
}
nextPage( animcursor );
++animcursor;
//setTimeout(function () {
// $("#frame" + $(_this).attr("data-frameindex")).attr("src", $(_this).attr("data-src"));
//}, 500);
} ); } function nextPage( animation ) { if (isAnimating) {
return false;
} isAnimating = true; var $currPage = $($(".pt-page.pt-page-" + precurrent)[0]); var $nextPage = $($(".pt-page.pt-page-" + current)[0]).addClass( 'pt-page-current' ),
outClass = '', inClass = '';
precurrent = current;
switch( animation ) { case 1:
outClass = 'pt-page-rotateCubeLeftOut pt-page-ontop';
inClass = 'pt-page-rotateCubeLeftIn';
break;
case 2:
outClass = 'pt-page-rotateCubeRightOut pt-page-ontop';
inClass = 'pt-page-rotateCubeRightIn';
break;
case 3:
outClass = 'pt-page-rotateCubeTopOut pt-page-ontop';
inClass = 'pt-page-rotateCubeTopIn';
break;
case 4:
outClass = 'pt-page-rotateCubeBottomOut pt-page-ontop';
inClass = 'pt-page-rotateCubeBottomIn';
break;
case 5:
outClass = 'pt-page-rotateSlideOut';
inClass = 'pt-page-rotateSlideIn';
break; } $currPage.addClass( outClass ).on( animEndEventName, function() {
$currPage.off( animEndEventName );
endCurrPage = true;
if( endNextPage ) {
onEndAnimation( $currPage, $nextPage );
}
} ); $nextPage.addClass( inClass ).on( animEndEventName, function() {
$nextPage.off( animEndEventName );
endNextPage = true;
if( endCurrPage ) {
onEndAnimation( $currPage, $nextPage );
}
} ); if( !support ) {
onEndAnimation( $currPage, $nextPage );
} } function onEndAnimation( $outpage, $inpage ) {
endCurrPage = false;
endNextPage = false;
resetPage( $outpage, $inpage );
isAnimating = false;
} function resetPage( $outpage, $inpage ) {
$outpage.attr( 'class', $outpage.data( 'originalClassList' ) );
$inpage.attr( 'class', $inpage.data( 'originalClassList' ) + ' pt-page-current' );
} init(); return { init : init }; })();
二、打开密集架 有过度动画
代码实现
this.loadMjjFace = function (mjjObj) {
$.each(mjjObj.material.materials, function (_index, _obj) {
if (_obj.opacity > 0.1) {
_obj.opacity = 0.1;
}
});
var cube = {
"show": true,
"uuid": "",
"name": mjjObj.name + "_animationCube",
"objType": "cube2",
"length": 78,
"width": 319,
"height": 1,
"x": mjjObj.position.x,
"y": mjjObj.position.y - 99,
"z": mjjObj.position.z,
"style": {
"skinColor": 16777215, "skin":
{
"skin_up": { "skinColor": 7219463, "opacity": 0.9, },
"skin_down": { "skinColor": 7219463, "opacity": 0.9, },
"skin_fore": { "skinColor": 7219463, "opacity": 0.9, },
"skin_behind": { "skinColor": 7219463, "opacity": 0.9, },
"skin_left": { "skinColor": 7219463, "opacity": 0.9, },
"skin_right": { "skinColor": 7219463, "opacity": 0.9, }
}
}, "showSortNub": 11, "animation": null, "dbclickEvents": null, "rotation": [{ "direction": "x", "degree": 0 }, { "direction": "y", "degree": 0 }, { "direction": "z", "degree": 0 }], "thick": null, "scale": { "x": 1, "y": 1, "z": 1 }, "BindDevId": null, "BindDevName": null, "devInfo": null, "BindMeteId": null, "BindMeteName": null
}
var temObj = tl3DCoreObj.createObjByJson(cube);
tl3DCoreObj.addObject(temObj);
new TWEEN.Tween(temObj.position).to({
y: mjjObj.position.y
}, 2000).start();
new TWEEN.Tween(temObj.scale).to({
y: 199
}, 2000).onComplete(function () {
$.each(mjjObj.material.materials, function (_index, _obj) {
if (_obj.opacity == 0.1) {
_obj.opacity = 1;
}
});
tl3DCoreObj.destoryObj(mjjObj.name + "_animationCube");
}).start();
this.createMjjDetail(mjjObj);
}
三、对密集架的文件档案进行上下架操作 保留操作接口
代码实现
//创建密集架详情
this.createMjjDetail = function (mjjObj) {
var _this = this;
var detailGroup = null;
//获取密集架序号
var _groupNub = parseInt(mjjObj.name.split('_')[1]);//组序号
var _colomnNub = parseInt(mjjObj.name.split('_')[2])//列序号
//此处表示密集架行数 列数
var mjjparam = null;
var rowHeigtht = null;//每隔高度 此处200表示密集架高度
var columlength = null;//此处320表示宽度 if (_this.mjjDetails[_groupNub - 1] && _this.mjjDetails[_groupNub - 1][_colomnNub - 1]) {
detailGroup = _this.mjjDetails[_groupNub - 1][_colomnNub - 1];
} else {
mjjparam = {
rows: 12,
colums: 4,
}
rowHeigtht = 200 / mjjparam.rows;//每隔高度 此处200表示密集架高度
columlength = 320 / mjjparam.colums;//此处320表示宽度
var mjjdetailGroup = {
show: true,
uuid: "",
name: "mjjdetailGroup1",
objType: "GroupObj",
scale: { x: 1, y: 1, z: 1 },
position: {
x: mjjObj.position.x,
y: mjjObj.position.y,
z: mjjObj.position.z
},
rotation: [{ direction: 'x', degree: 0 }],//旋转 表示x方向0度 arb表示
childrens: [
]
}
//创建横向隔板
for (var i = 0; i < mjjparam.rows - 1; i++) {
var gb1 = {
"show": true,
"uuid": "",
"name": "mjjdetail_r" + (i + 1),
"objType": "cube2",
"length": 79,
"width": 319,
"height": 1,
"x": 0,
"y": 100 - (i + 1) * rowHeigtht,
"z": 0,
"style": { "skinColor": 16777215, "skin": { "skin_up": { "skinColor": 16777215, "imgurl": "../../img/3dImg/outside_lightmap.jpg" }, "skin_down": { "skinColor": 14540253 }, "skin_fore": { "skinColor": 14540253, "imgurl": "../../img/3dImg/card_panel.png" }, "skin_behind": { "skinColor": 14540253, "imgurl": "../../img/3dImg/card_panel.png" }, "skin_left": { "skinColor": 14540253 }, "skin_right": { "skinColor": 14540253 } } }, "showSortNub": 4, "animation": null, "dbclickEvents": null, "rotation": [{ "direction": "x", "degree": 0 }, { "direction": "y", "degree": 0 }, { "direction": "z", "degree": 0 }], "thick": null, "scale": { "x": 1, "y": 1, "z": 1 }, "BindDevId": null, "BindDevName": null, "devInfo": null, "BindMeteId": null, "BindMeteName": null
};
mjjdetailGroup.childrens.push(gb1); }
//创建竖向隔板
for (var i = 0; i < mjjparam.colums - 1; i++) {
var gb2 = { "show": true, "uuid": "", "name": "mjjdetail_c" + (i + 1), "objType": "cube2", "length": 10, "width": 2, "height": 199, "x": 35, "y": 0, "z": 160 - ((i + 1) * columlength), "style": { "skinColor": 16777215, "skin": { "skin_up": { "skinColor": 14540253 }, "skin_down": { "skinColor": 14540253 }, "skin_fore": { "skinColor": 0xaaaaaa }, "skin_behind": { "skinColor": 0xaaaaaa }, "skin_left": { "skinColor": 14540253, "imgurl": "../../img/3dImg/card_panel.png" }, "skin_right": { "skinColor": 14540253, "imgurl": "../../img/3dImg/card_panel.png" } } }, "showSortNub": 4, "animation": null, "dbclickEvents": null, "rotation": [{ "direction": "x", "degree": 0 }, { "direction": "y", "degree": 0 }, { "direction": "z", "degree": 0 }], "thick": null, "scale": { "x": 1, "y": 1, "z": 1 }, "BindDevId": null, "BindDevName": null, "devInfo": null, "BindMeteId": null, "BindMeteName": null }; mjjdetailGroup.childrens.push(gb2); var gb3 = ({ "show": true, "uuid": "", "name": "mjjdetail_c3" + (i + 1), "objType": "cube", "length": 10, "width": 2, "height": 199, "x": 0 - 35, "y": 0, "z": 160 - ((i + 1) * columlength), "style": { "skinColor": 16777215, "skin": { "skin_up": { "skinColor": 14540253 }, "skin_down": { "skinColor": 14540253 }, "skin_fore": { "skinColor": 0xaaaaaa }, "skin_behind": { "skinColor": 0xaaaaaa }, "skin_left": { "skinColor": 14540253, "imgurl": "../../img/3dImg/card_panel.png" }, "skin_right": { "skinColor": 14540253, "imgurl": "../../img/3dImg/card_panel.png" } } }, "showSortNub": 4, "animation": null, "dbclickEvents": null, "rotation": [{ "direction": "x", "degree": 0 }, { "direction": "y", "degree": 0 }, { "direction": "z", "degree": 0 }], "thick": null, "scale": { "x": 1, "y": 1, "z": 1 }, "BindDevId": null, "BindDevName": null, "devInfo": null, "BindMeteId": null, "BindMeteName": null });
mjjdetailGroup.childrens.push(gb3); }
detailGroup = tl3DCoreObj.createObjByJson(mjjdetailGroup);
if (_this.mjjDetails[_groupNub - 1] == undefined) {
_this.mjjDetails[_groupNub - 1] = [];
}
_this.mjjDetails[_groupNub - 1][_colomnNub - 1] = detailGroup;
tl3DCoreObj.addObject(detailGroup);
}
//获取内部实时数据
/*
数据格式 将有文件的格子信息 以如下形式输出
[
{
rowNo_:1,//行数
colNo_:1,//列数
filesNub:5//文件个数
}, ]
*/ var _files = []; {//演示数据 获取真实数据后可替换
for (var i = 1; i <= mjjparam.rows;i++){
for (var j= 1; j <= mjjparam.colums;j++) {
_files.push({
rowNo_: i,//行数
colNo_: j,//列数
filesNub:Math.floor(Math.random()*10)%5 //随机生成演示文件个数
});
}
}
} //刷新文件排布
detailGroup.children.length = mjjparam.rows + mjjparam.colums*2-3;
$.each(_files, function (_index,_obj) {
if (_obj.filesNub > 0) {
for (var w = 0; w < parseInt(Math.random() * parseInt((columlength - 2) / 22)) + 1 ; w++) {
var _tmfile = {
"show": true, "uuid": "", "name": "filebox_" + _obj.rowNo_ + "_" + _obj.colNo_ + "_w" + w, "objType": "cube", "length":70, "width": 20, "height": (rowHeigtht - 5),
"x": mjjObj.position.x,
"y": ( (_obj.rowNo_-1) * rowHeigtht + (rowHeigtht - 5) / 2 + 5),
"z": mjjObj.position.z + (-160 + ((_obj.colNo_ - 1) * columlength) + 22* (1 + w)), "style": { "skinColor": 16777215, "skin": { "skin_up": { "skinColor": 10382134 }, "skin_down": { "skinColor": 10382134 }, "skin_fore": { "skinColor": 9525548 }, "skin_behind": { "skinColor": 9525548 }, "skin_left": { "skinColor": 13076036 }, "skin_right": { "skinColor": 13203019 } } }, "showSortNub": 11, "animation": null, "dbclickEvents": null, "rotation": [{ "direction": "x", "degree": 0 }, { "direction": "y", "degree": 0 }, { "direction": "z", "degree": 0 }], "thick": null, "scale": { "x": 1, "y": 1, "z": 1 }, "BindDevId": null, "BindDevName": null, "devInfo": null, "BindMeteId": null, "BindMeteName": null
};
var _tmfileObj = tl3DCoreObj.createObjByJson(_tmfile);
detailGroup.children.push(_tmfileObj);
} }
}); detailGroup.visible = false;
detailGroup.position.x = mjjObj.position.x;
detailGroup.position.y = mjjObj.position.y;
detailGroup.position.z = mjjObj.position.z;
setTimeout(function () {
detailGroup.visible = true;
}, 2000); }
四、快速检索文件，并定位
代码实现
//查找文件 此处查找条件可以自定义
this.searchFile = function () {
var _this = this;
$("#toolbar").hide();
//获取到文件位置信息
//返回类型 searchFileObj={fileName:'',mjjName:'',mjjGroup:'3',mjjnub:'2',face:'',row:'',color:'',nub:''}\
//边缘弹出
layer.open({
title: "文件查找",
type: 1,
offset: 'lt' //具体配置参考：offset参数项
, content: '<div style="padding: 10px;width:250px;min-height:150px;background-color:rgba(255,255,255,0.4);">\
<table class="table">\
<tr><td style="text-align:right;width:80px;">类型：</td><td><input id="fsfileType" value="" /></td></tr>\
<tr><td style="text-align:right;width:80px;">关键字：</td><td><input id="fskeyWord" value="" /></td></tr>\
<tr><td style="text-align:right;width:80px;">结果：</td><td colspan=2 id="searchResuleTd"></td></tr>\
</table></div>'
, btn: '确认查找'
, btnAlign: 'c' //按钮居中
, shade: 0 //不显示遮罩
, yes: function () {
var searchFileObj = {
mjjGroup: Math.floor(Math.random() * 12) % 6 + 1,
mjjnub: Math.floor(Math.random() * 14) % 7 + 1,
face: Math.random()>0.5? "A":"B",
row: Math.floor(Math.random() * 20) % 10+1,
column: Math.floor(Math.random() * 20) % 8+1,
nub: Math.floor(Math.random() * 40) % 20 + 1
};
$("#searchResuleTd").html("密集架组：" + searchFileObj.mjjGroup + "组</br>"
+ "密集架号：" + searchFileObj.mjjnub + "号</br>"
+ "密集架面：" + searchFileObj.face + "面</br>"
+ "所在行数：" + searchFileObj.row + "行</br>"
+ "所在列数：" + searchFileObj.column + "列</br>"
+ "文档序号：" + searchFileObj.nub + "</br>"
);
var _mjjObj = tl3DCoreObj.commonFunc.findObject("mjj_" + searchFileObj.mjjGroup + "_" + searchFileObj.mjjnub);
_this.selectObj(_mjjObj); var newposition = {
x: (tl3DCoreObj.camera.position.x + _mjjObj.position.x)/2,
y: 600,
z: (tl3DCoreObj.camera.position.z+ _mjjObj.position.z) / 2
}
if ((tl3DCoreObj.camera.position.x - _mjjObj.position.x) * (tl3DCoreObj.camera.position.x - _mjjObj.position.x)
+ (600 - _mjjObj.position.y) * (600 - _mjjObj.position.y)
+ (tl3DCoreObj.camera.position.z - _mjjObj.position.z) * (tl3DCoreObj.camera.position.z - _mjjObj.position.z)
< 150 * 150 * 150) {
newposition = {
x: (tl3DCoreObj.camera.position.x),
y: 600,
z: (tl3DCoreObj.camera.position.z )
}
}
_this.changeCameraPosition(newposition, _mjjObj.position, 500)
},
end: function () {
$("#toolbar").show();
_this.unselectObj();
}
});
$("#fsfileType").click(function () {
$("#fsfileType").focus();
})
$("#fskeyWord").click(function () {
$("#fskeyWord").focus();
})
}
this.selectedObjs = null;
this.selectObj=function (_obj) {
var _this = this;
if (_this.selectedObjs) {
_this.unselectObj();
}
var outlineMaterial2 = new THREE.MeshBasicMaterial({ color: 0x00ff00, side: THREE.BackSide });
var outlineMesh2 = new THREE.Mesh(_obj.geometry.clone(), outlineMaterial2);
outlineMesh2.scale.multiplyScalar(1.05);
outlineMesh2.position.x = _obj.position.x;
outlineMesh2.position.y = _obj.position.y;
outlineMesh2.position.z = _obj.position.z;
tl3DCoreObj.scene.add(outlineMesh2);
_this.selectedObjs = outlineMesh2;
_this.flashObj(_obj);
}
this.unselectObj=function () {
var _this = this;
if (_this.selectedObjs) {
tl3DCoreObj.scene.remove(_this.selectedObjs);
_this.selectedObjs = null;
}
}
五、场景内监控摄像头 调取实时视频
/*摄像头部分*********************************************************************/
this.cameraRange = [];
//摄像头按钮
this.showCamera = function () {
var _this = this;
if (_this.cameraRange.length <= 0) {
var jsonobj1 = { "segmentsY": 0, "segmentsX": 6, "rotation": [{ "degree": 1.836627410320584, "direction": "x" }, { "degree": -0.01857030395023093, "direction": "y" }, { "degree": -0.10075785157596659, "direction": "z" }], "show": true, "scale": { "x": 1.1, "y": 1, "z": 0.3 }, "openEnded": false, "radiusTop": 500, "radiusBottom": 5, "showSortNub": 211, "name": "camera_range", "style": { "skinColor": 16776960, "skin": { "skin_up": { "side": 0, "skinColor": 16777215, "opacity": 0 }, "skin_side": { "imgurl": "../../img/3dImg/camarerange.png", "side": 2, "skinColor": 2746367, "opacity": 0.3 }, "skin_down": { "side": 1, "skinColor": 6881093, "opacity": 0 } } }, "position": { "x": -129.087, "y": 170.956, "z": -314.488 }, "objType": "cylinder", "height": 500 };
var temObj1 = tl3DCoreObj.createObjByJson(jsonobj1);
tl3DCoreObj.addObject(temObj1);
_this.cameraRange.push(temObj1); var jsonobj2 = {"segmentsY": 0, "segmentsX": 6, "rotation": [{ "direction": "x", "degree":1.5415097019464317 }, { "direction": "y", "degree": -0.08611454529340022 },{ "direction": "z", "degree": -3.0382866151642487 }], "show": true, "scale": { "x": 1.1, "y": 1, "z": 0.3 }, "openEnded": false, "radiusTop": 500, "radiusBottom": 5, "showSortNub": 211,"name": "camera_range2", "style": {"skinColor": 16776960, "skin": {
"skin_up": { "skinColor": 16777215, "side": 0, "opacity": 0 }, "skin_down":{ "skinColor": 6881093, "side": 1, "opacity": 0 },
"skin_side": { "skinColor": 2746367, "side": 2, "opacity": 0.3, "imgurl": "../../img/3dImg/camarerange.png" }
}
}, "position": { "x": 45.312, "y": 247.096, "z": 534.465 }, "objType": "cylinder",
"height": 500, "customType1": "", "customType2": "", "animation": null, "dbclickEvents": null, "BindDevId": null, "BindDevName": null, "devInfo": null, "BindMeteId": null, "BindMeteName": null
};
var temObj2 = tl3DCoreObj.createObjByJson(jsonobj2);
tl3DCoreObj.addObject(temObj2);
_this.cameraRange.push(temObj2); }
if (_this.cameraRange.length > 0) {
$.each(_this.cameraRange, function (_index, _obj) {
_obj.visible = true;
_this.flashObj(_obj, 0xb2fb07);
});
}
_this.changeCameraPosition({ x: -1284, y: 1787, z: -378 }, { x: -237, y: 308, z: 145 }, 1000)
}
//隐藏摄像头范围
this.hideCamera = function () {
var _this = this;
if (_this.cameraRange.length > 0) {
$.each(_this.cameraRange, function (_index, _obj) {
_obj.visible = false;
});
}
}
//打开视屏
this.showVideo = function (_obj) {
var _this = this;
layer.closeAll();
var videoUrl = "";
layer.open({
title: "视频",
area:["555px","280px"],
type: 1,
content: '<video id="video" autoplay loop webkit-playsinline style="width:100%;" >\
<source src="../../img/3dImg/video.mp4">\
</video>'
, btn: false
, shade: 0 //不显示遮罩
, yes: function () { },
end: function () {
_this.hideCamera();
}
});
}
六、消防灭火器快速定位 查找
/*消防按钮部分*********************************************************************/
//消防按钮--灭火器定位
this.FireControl = function () {
var _this = this;
_this.VirtualWalls();
_this.hideAllMjj();
_this.hideCamera();
_this.removeMark();
_this.addMark({ "x": 940, "y":200, "z": -660 });
_this.addMark({ "x": 660, "y": 200, "z": -70 });
_this.addMark({ "x": 660, "y": 200, "z": 400 });
_this.addMark({ "x": -960, "y": 200, "z": -70 });
_this.addMark({ "x": -960, "y": 200, "z": 400 });
function markmoveUP(){
new TWEEN.Tween(_this.marks[0].position).to({
y:230
}, 700).onUpdate(function () {
var _marktPosition=this;
$.each(_this.marks, function (_index, _obj) {
if (_index != 0) {
_obj.position.y = _marktPosition.y
}
});
}).onComplete(function () {
if (_this.marks.length > 0) {
markmoveDown();
}
}).start();
}
function markmoveDown() {
new TWEEN.Tween(_this.marks[0].position).to({
y: 200
}, 700).onUpdate(function () {
var _marktPosition = this;
$.each(_this.marks, function (_index, _obj) {
if (_index != 0) {
_obj.position.y = _marktPosition.y
}
});
}).onComplete(function () {
if (_this.marks.length > 0) {
markmoveUP();
}
}).start();
}
function moveCameras() {
_this.changeCameraPosition(
{ "x": -270, "y": 1274, "z": -714 },
{ "x": 209, "y": 705, "z": -750 },
1000,
function () {
_this.changeCameraPosition(
{ "x": -574, "y": 1430, "z":-161 },
{ "x": 486, "y": 134, "z": -90 },
2000,
function () {
_this.changeCameraPosition(
{ "x": 196, "y": 1262, "z":340},
{ "x": -639, "y": 277, "z":216},
4000,
function () {
_this.changeCameraPosition(
{ "x":12, "y": 1749, "z": -2468 },
{ "x":61, "y": 156, "z":194 }, 1000, function () { });
}
);
}
);
}
);
}
markmoveUP();
moveCameras();
$("#toolbar").hide();
layer.open({
title: "消防-灭火器定位",
type: 1,
offset: 'lt' //具体配置参考：offset参数项
, content: '<div style="padding: 10px;width:300px;min-height:200px;background-color:rgba(255,255,255,0.4);">\
<table class="table">\
<tr><td style="text-align:right;width:80px;">序号</td><td>位置</td><td>定位</td></tr>\
<tr><td style="text-align:center;width:80px;">1</td><td>大门口</td><td><button onclick="tl3dCoreBusiness.changeCameraPosition({ x: -270, y: 1274, z: -714 },{ x: 209, y: 705, z: -750 },1000)">定位</button></tr>\
<tr><td style="text-align:center;width:80px;">2</td><td>密集架5和密集架6中间</td><td><button onclick="tl3dCoreBusiness.changeCameraPosition({ x: -574, y: 1430, z: -161 },{ x: 486, y: 134, z: -90 },1000)">定位</button></td></tr>\
<tr><td style="text-align:center;width:80px;">3</td><td>密集架4和密集架5中间</td><td><button onclick="tl3dCoreBusiness.changeCameraPosition({ x: -574, y: 1430, z: -161 },{ x: 486, y: 134, z: -90 },1000)">定位</button></tr>\
<tr><td style="text-align:center;width:80px;">4</td><td>密集架1和密集架2中间</td><td><button onclick="tl3dCoreBusiness.changeCameraPosition({ x: 196, y: 1262, z: 340},{ x: -639, y: 277, z: 216 },1000)">定位</button></tr>\
<tr><td style="text-align:center;width:80px;">5</td><td>密集架2和密集架3中间</td><td><button onclick="tl3dCoreBusiness.changeCameraPosition({ x: 196, y: 1262, z: 340},{ x: -639, y: 277, z: 216 },1000)">定位</button></tr>\
</table></div>'
, btn:false
, btnAlign: 'c' //按钮居中
, shade: 0 //不显示遮罩
, end: function () {
_this.hideFireControls();
}
});
}
this.hideFireControls = function () {
var _this = this;
$("#toolbar").show();
_this.EntityWalls();
_this.showAllMjj();
_this.removeMark();
}
七、实时3D模拟消防火警 显示火灾参考情况
/*烟感模拟部分*********************************************************************/
//烟感模拟
this.smokeSensors = [];//烟感
this.getSmokeSensors = function () {
var _this = this;
if (_this.smokeSensors&&_this.smokeSensors.length == 0) {
$.each(tl3DCoreObj.objects, function (_index, _obj) {
if (_obj.name.indexOf("smokeSensor_") >= 0) {
_this.smokeSensors.push(_obj);
}
});
}
}
八、场景内温度调节 并且有调节动画
/*温度部分*********************************************************************/
//温度调节模拟+云图
this.changeTemplate = function () {
var _this = this;
$("#toolbar").hide();
_this.hideCamera();
_this.changeCameraPosition({ x: 540, y: 388, z: -524 }, { x: 0, y: 260, z: 130 }, 1000);
//获取当前湿度值
var hvalue = 28.5;
//隐藏所有密集架
this.hideAllMjj();
if (this.templates.length == 0) {
var tps = [300, -100, 300, 500, -500, -100, -500, 500]
for (var i = 0; i < 4; i++) {
var _obj1 = {
show: true,
name: "thermometer",
objType: "Thermometer3D",
position: { x: tps[2 * i], y: 400, z: tps[2 * i + 1] },
rotation: [{ "direction": "x", "degree": 0 }],
scale: { "x": 2, "y": 1.5, "z": 2},
value: hvalue,
}
var temObj1 = tl3DCoreObj.createObjByJson(_obj1);
tl3DCoreObj.addObject(temObj1);
_this.templates.push(temObj1)
}
}
for (var i = 0; i < _this.templates.length; i++) {
_this.templates[i].position.y = 400;
_this.templates[i].visible = true;
}
new TWEEN.Tween(_this.templates[0].position).to({
y: 200
}, 2000).onUpdate(function () {
for (var i = 1; i < _this.templates.length; i++) {
_this.templates[i].position.y = this.y;
}
}).easing(TWEEN.Easing.Elastic.Out).start();
layer.closeAll();
var videoUrl = "";
layer.open({
title: "调节温度",
type: 1,
anim: 2,
content: '<div style="padding: 10px;width:240px;height:80px;background-color:rgba(255,255,255,0.71);text-align:center;">\
温度:<input type="text" style="width:100px" id="template_input" value="' + hvalue + '" />%\
</div>'
, btn: ["调节", "关闭"]
, shade: 0 //不显示遮罩
, yes: function () {
var t = parseFloat($("#template_input").val());
for (var i = 0; i < _this.templates.length; i++) {
_this.templates[i].changeThermoneter(t);
}
},
end: function () {
_this.hideTemplate();
}
});
var t = $("#template_input").val();
$("#template_input").val("").focus().val(t)
}
this.hideTemplate = function () {
var _this = this;
$("#toolbar").show();
_this.hideCamera();
var _this = this;
if (this.templates.length > 0) {
for (var i = 0; i < _this.templates.length; i++) {
_this.templates[i].position.y = 400;
_this.templates[i].visible = false;
}
}
_this.showAllMjj();
}
九 、场景内湿度调节 有调节动画
//湿度调节模拟+云图
this.humiditys = [];
this.changehumidity = function () {
var _this = this;
$("#toolbar").hide();
_this.hideCamera();
_this.changeCameraPosition({ x: -35, y: 647, z: -1190 }, { x: -37, y: 190, z: 95 }, 1000);
//获取当前湿度值
var hvalue = 28.5;
//隐藏所有密集架
this.hideAllMjj();
if (this.humiditys.length == 0) {
var humiditys = [300, -100, 300, 500, -500, -100, -500, 500]
for (var i = 0; i < 4;i++){
var humidity1 = {
show: true,
name: "humidity",
objType: "Humidity",
position: { x: humiditys[2 * i], y: 400, z: humiditys[2 * i+1] },
rotation: [{ "direction": "x", "degree": 0 }],
scale: { "x": 1, "y": 1, "z": 1 },
value: hvalue,
}
var temObj1 = tl3DCoreObj.createObjByJson(humidity1);
tl3DCoreObj.addObject(temObj1);
_this.humiditys.push(temObj1)
}
}
for (var i = 0; i < _this.humiditys.length;i++){
_this.humiditys[i].position.y = 400;
_this.humiditys[i].visible = true;
}
new TWEEN.Tween(_this.humiditys[0].position).to({
y: 200
}, 2000).onUpdate(function () {
for (var i = 1; i < _this.humiditys.length; i++) {
_this.humiditys[i].position.y = this.y;
}
}).easing(TWEEN.Easing.Elastic.Out).start();
layer.closeAll();
var videoUrl = "";
layer.open({
title: "调节湿度",
type: 1,
anim: 2,
content: '<div style="padding: 10px;width:240px;height:80px;background-color:rgba(255,255,255,0.71);text-align:center;">\
湿度:<input type="text" style="width:100px" id="humidity_input" value="' + hvalue + '" />%\
</div>'
, btn: ["调节","关闭"]
, shade: 0 //不显示遮罩
, yes: function () {
var t = parseFloat($("#humidity_input").val());
for (var i = 0; i < _this.humiditys.length; i++) {
_this.humiditys[i].changeThermoneter(t);
}
},
end: function () {
_this.hideHumidity();
}
});
var t = $("#humidity_input").val();
$("#humidity_input").val("").focus().val(t)
}
this.hideHumidity = function () {
var _this = this;
$("#toolbar").show();
_this.hideCamera();
var _this = this;
if (this.humiditys.length > 0) {
for (var i = 0; i < _this.humiditys.length;i++){
_this.humiditys[i].position.y = 400;
_this.humiditys[i].visible = false;
}
}
_this.showAllMjj();
}
this.templates = [];
十、对场景内数据大屏 进行操控 屏幕切换
/*大屏部分*********************************************************************/
//获取大屏
this.bigScreens = [];
this.getScreens = function () {
var _this = this;
if (_this.bigScreens.length == 0) {
$.each(tl3DCoreObj.objects, function (_index, _obj) {
if (_obj.name.indexOf("wall_bigScreen_") >= 0) {
_this.bigScreens.push(_obj);
}
});
}
return _this.bigScreens;
}
this.showBigScreenCtrls = function () {
this.getScreens();
$("#toolbar").hide();
layer.open({
title: "大屏定位-设置",
type: 1,
offset: 'lt' //具体配置参考：offset参数项
, content: '<div style="padding: 10px;width:300px;min-height:200px;background-color:rgba(255,255,255,0.4);">\
<table class="table">\
<tr><td style="text-align:right;width:60px;">序号</td><td style="text-align:center;width:120px;">位置</td><td style="width:60px;">定位</td><td style="width:60px;">设置</td></tr>\
<tr><td style="text-align:center;width:80px;">1</td><td style="text-align:center;">一号外墙大屏</td><td><button onclick="tl3dCoreBusiness.changeCameraPosition({ x:1013, y:335, z: -456 },{ x: 328, y: -37, z: -532 },1000)">定位</button></td><td><button onclick="tl3dCoreBusiness.setSreenParams(\'wall_bigScreen_1\')">设置</button></td></tr>\
<tr><td style="text-align:center;width:80px;">2</td><td style="text-align:center;">二号室内大屏</td><td><button onclick="tl3dCoreBusiness.changeCameraPosition({ x: -310, y: 187, z: 452},{ x: -325, y: 147, z: 870 },1000)">定位</button></td><td><button onclick="tl3dCoreBusiness.setSreenParams(\'wall_bigScreen_2\')">设置</button></td></tr>\
</table></div>'
, btn: false
, btnAlign: 'c' //按钮居中
, shade: 0 //不显示遮罩
, end: function () {
$("#toolbar").show();
}
});
}
this.setSreenParams = function (sreenName) {
var _screenobj = null;
var _this = this;
// layer.closeAll();
for (var i = 0; i < _this.bigScreens.length; i++) {
if (_this.bigScreens[i].name == sreenName) {
_screenobj = _this.bigScreens[i];
}
}
var screenType = "1";//1图片 2视频
var screenUrl = "../../img/3dImg/tv.jpg";
if (_screenobj && _screenobj.screenType) {
screenType = _screenobj.screenType
}
if (_screenobj && _screenobj.screenUrl) {
screenUrl = _screenobj.screenUrl
}
var layerindex=layer.open({
title: "大屏定位-设置",
type: 1,
offset: 'lt' //具体配置参考：offset参数项
, content: '<div style="padding: 10px;width:300px;min-height:100px;background-color:rgba(255,255,255,1);">\
<table class="table">\
<tr><td style="text-align:right;width:60px;">类型:</td><td>' + '<label><input name="screenTypeAndUrl" type="radio" ' + (screenType == "1" ? " checked='checked' " : "") + ' value="1" />图片 </label>\
<label><input name="screenTypeAndUrl" type="radio" ' + (screenType == "2" ? " checked='checked' " : "") + ' value="2" />视频 </label> </td></tr>\
<tr><td style="text-align:right;width:60px;">url:</td><td><input onclick="var t = $(\'#screenUrl\').val();$(\'#screenUrl\').val(\'\').focus().val(t)" id="screenUrl" value="' + screenUrl + '" /></td></tr>\
</table></div>'
, btn: ["确定","取消"]
, btnAlign: 'c' //按钮居中
, shade: 0 //不显示遮罩
, yes: function () {
var setScreenType = $("input:radio[name='screenTypeAndUrl']:checked").val();
var setScreenUrl = $("#screenUrl").val();
if (setScreenType == "1") {
tl3DCoreObj.commonFunc.setObjSkinImg(_screenobj, 0, setScreenUrl);
} else {
tl3DCoreObj.commonFunc.setObjSkinVideo(_screenobj, 0, setScreenUrl, sreenName);
}
_screenobj.screenType = setScreenType;
_screenobj.screenUrl = setScreenUrl;
layer.close(layerindex);
}
, end: function () { }
});
$("#canvas-frame canvas").dblclick();
var t = $('#screenUrl').val();$('#screenUrl').val("").focus().val(t);
}
十一、对场景内通风系统进行3D操作 并且有过度动画
/*风控部分***********************************************************************/
//风控按钮
this.showWindsCtrl = function () {
var _this = this;
$("#toolbar").hide();
_this.changeCameraPosition({ x: 430, y: 1449, z: -2557 }, { x: 8, y: 234, z: 814 }, 1000);
if (_this.windsISOPEN) {
_this.openWinds();
layer.confirm('当前风控开启状态，是否关闭风控按钮？', {
offset: 'lt' ,
btn: ['关闭', '取消'] //按钮
}, function () {
_this.closeWinds();
layer.msg("已关闭");
_this.windsISOPEN = false;
$("#toolbar").show();
layer.closeAll();
}, function () {
$("#toolbar").show();
_this.hiddenIngWinds();
layer.closeAll();
});
} else {
layer.confirm('当前风控关闭状态，是否开启风控按钮？', {
offset: 'lt',
btn: ['开启', '取消'] //按钮
}, function () {
_this.openWinds();
layer.msg("已开启")
layer.closeAll();
_this.windsISOPEN = true;
setTimeout(function () {
_this.hiddenIngWinds();
$("#toolbar").show();
}, 2000);
}, function () {
$("#toolbar").show();
layer.closeAll();
});
}
}
this.openWinds = function () {
var _this=this;
var _winds = [
{ "name": "win_1_1","position": {"x": 0,"y": -100,"z": 640},"rotation": {x:0,y:0,z:0},},
{ "name": "win_1_2", "position": { "x": 0, "y": -100, "z":110 }, "rotation": { x: 0, y: 0, z: 0 }, },
{ "name": "win_1_3", "position": { "x": 0, "y": -100, "z": -400 }, "rotation": { x: 0, y: 0, z: 0 }, },
{ "name": "win_1_4", "position": { "x": -240, "y": -100, "z": -400 }, "rotation": { x: -3.141592653589793, y: 0, z: -3.141592653589793 }, },
{ "name": "win_1_5", "position": { "x": -240, "y": -100, "z": 110 }, "rotation": { x: -3.141592653589793, y: 0, z: -3.141592653589793 }, },
{ "name": "win_1_6", "position": { "x": -240, "y": -100, "z": 640 }, "rotation": { x: -3.141592653589793, y: 0, z: -3.141592653589793 }, },
];
if (_this.winds.length <= 0) {
$.each(_winds, function (_index,_obj) {
_this.createWind(_obj.position,_obj.name,_obj.rotation);
})
}
$.each(_this.winds, function (_index, _obj) {
_obj.visible = true;
});
}
this.closeWinds = function () {
var _this = this;
if (_this.winds.length > 0) {
$.each(_this.winds, function (_index, _obj) {
_obj.visible = false;
});
}
}
十二、对场景内空调 中央空调进行3D操作 并且有过度动画
//空调
this.airConditionerCtls = function () {
var _this = this;
$("#toolbar").hide();
//获取到文件位置信息
//边缘弹出
layer.open({
title: "空调控制",
type: 1,
offset: 'lt' //具体配置参考：offset参数项
, content: '<div style="padding: 10px;width:300px;min-height:120px;background-color:rgba(255,255,255,0.4);">\
<table class="table">\
<tr><td style="text-align:center;width:80px;">空调</td><td style="text-align:center;width:200px;">操作</td></tr>\
<tr><td style="text-align:left;width:80px;">立柜空调</td><td style="text-align:center;">\
<button id="LGAC_btn1" onclick="tl3dCoreBusiness.changeCameraPosition({x: -98, y: 356, z: 407},{x: -75, y: 121, z: 762},1000)">定位</button>\
<button id="LGAC_btn2" onclick="tl3dCoreBusiness.openLSAirconditioner(\'aircondition_57\')">开启</button>\
<button id="LGAC_btn3" onclick="tl3dCoreBusiness.closeLSAirconditioner(\'aircondition_57\')">关闭</button>\
</td></tr>\
<tr><td style="text-align:left;width:80px;">中央空调</td><td style="text-align:center;">\
<button onclick="tl3dCoreBusiness.showCenterAirConditioner()" id="centerAC_btn1">定位</button>\
<button onclick="tl3dCoreBusiness.openCenterAirConditioner()" id="centerAC_btn2">开启</button>\
<button onclick="tl3dCoreBusiness.closeCenterAirConditioner()" id="centerAC_btn3">关闭</button>\
</td></tr>\
</table></div>'
, btn: false
, btnAlign: 'c' //按钮居中
, shade: 0 //不显示遮罩
, end: function () {
$("#toolbar").show();
_this.hideCenterAirConditioner();
_this.hideLSAirconditioner();
}
}); }
this.LGAirConditions = [];
//开启立式空调
this.openLSAirconditioner = function (airConName) {
var tempAirWind=null;
var _this = this;
var aircondition = tl3DCoreObj.commonFunc.findObject(airConName);
if (this.LGAirConditions && this.LGAirConditions.length > 0) {
$.each(this.LGAirConditions, function (_index, _obj) {
if (_obj.name == airConName + "_wind_1") {
tempAirWind = _obj;
}
});
}
//{x: -82.581, y: 92.342, z: 743.966}
if (tempAirWind == null) {
var lgairwin = {
"show": true, "uuid": "",
"name":airConName+"_wind_1",// "lgAirC_wind_1",
"objType": "flowTube",
"points": [{ "x": 0, "y": 200, "z": 0 }, { "x": 0, "y": 150, "z": -60 }, { "x": 0, "y": 150, "z": -200 }],
"position": { "x": aircondition.position.x, "y": aircondition.position.y - 122, "z": aircondition.position.z - 13 },
"scale": { "x": 1, "y": 1, "z": 1 },
"rotation": [{ "direction": "x", "degree": 0 }, { "direction": "y", "degree": 0 }, { "direction": "z", "degree": 0 }],
"style": { "skinColor": 16772846, "imgurl": "../../img/3dImg/right2wind.png", "opacity": 1, "canvasSkin": { "cwidth": 1024, "cheight": 128, "cwNub": 16, "chNub": 8, "cMarginW": 0.2, "cMarginH": 0.2, "speed": 8, "fps": 40, "direction": "w", "forward": "f", "side": 1, "run": true, "bgcolor": "rgba(255, 227, 248, 0.02)" } }, "segments": 64, "radialSegments": 2, "closed": false, "radius": 20, "showSortNub": 196, "customType1": "", "customType2": "", "animation": null, "dbclickEvents": null, "BindDevId": null, "BindDevName": null, "devInfo": null, "BindMeteId": null, "BindMeteName": null
}
var temObj1 = tl3DCoreObj.createObjByJson(lgairwin);
tl3DCoreObj.addObject(temObj1);
_this.LGAirConditions.push(temObj1);
tempAirWind = temObj1;
}
if (tempAirWind) {
tempAirWind.visible = true;
}
}
//关闭立式空调
this.closeLSAirconditioner = function (airConName,isCloseAll) {
var _this = this;
if (this.LGAirConditions && this.LGAirConditions.length > 0) {
$.each(this.LGAirConditions, function (_index, _obj) {
if (_obj.name == airConName + "_wind_1") {
_obj.visible = false;
}
if (isCloseAll) {
_obj.visible = false;
}
});
}
}
//隐藏立式空调风口动画
this.hideLSAirconditioner = function () {
var _this = this;
if (this.LGAirConditions && this.LGAirConditions.length > 0) {
$.each(this.LGAirConditions, function (_index, _obj) {
_obj.visible = false;
});
}
}
//开启中央空调
this.centerAirConditionerDevs = [];
//显示中央空调设备
this.showCenterAirConditioner = function () {
var _this = this;
if (_this.centerAirConditionerDevs.length <= 0) {
var centerAirCondition = [
{ "show": true, "uuid": "", "name": "center_air_conditioning_2_2", "objType": "cube2", "length": 78, "width": 78, "height": 40, "x": -80.785, "y": 370.664, "z": -456.654, "style": { "skinColor": 16777215, "skin": { "skin_up": { "skinColor": 16777215, "side": 1, "opacity": 0 }, "skin_down": { "skinColor": 16777215, "side": 1, "opacity": 0.3 }, "skin_fore": { "skinColor": 16777215, "side": 1, "opacity": 0.3 }, "skin_behind": { "skinColor": 16777215, "side": 1, "opacity": 0.3 }, "skin_left": { "skinColor": 16777215, "side": 1, "opacity": 0.3 }, "skin_right": { "skinColor": 16777215, "side": 1, "opacity": 0.3 } } }, "showSortNub": 7, "customType1": "", "customType2": "", "animation": null, "dbclickEvents": null, "rotation": [{ "direction": "x", "degree": 0 }, { "direction": "y", "degree": 0 }, { "direction": "z", "degree": 0 }], "thick": null, "scale": { "x": 1, "y": 1, "z": 1 }, "BindDevId": null, "BindDevName": null, "devInfo": null, "BindMeteId": null, "BindMeteName": null }, { "show": true, "uuid": "", "name": "center_air_conditioning_2_3", "objType": "cube2", "length": 78, "width": 78, "height": 40, "x": -80.785, "y": 370.664, "z": 518.684, "style": { "skinColor": 16777215, "skin": { "skin_up": { "skinColor": 16777215, "side": 1, "opacity": 0 }, "skin_down": { "skinColor": 16777215, "side": 1, "opacity": 0.3 }, "skin_fore": { "skinColor": 16777215, "side": 1, "opacity": 0.3 }, "skin_behind": { "skinColor": 16777215, "side": 1, "opacity": 0.3 }, "skin_left": { "skinColor": 16777215, "side": 1, "opacity": 0.3 }, "skin_right": { "skinColor": 16777215, "side": 1, "opacity": 0.3 } } }, "showSortNub": 7, "customType1": "", "customType2": "", "animation": null, "dbclickEvents": null, "rotation": [{ "direction": "x", "degree": 0 }, { "direction": "y", "degree": 0 }, { "direction": "z", "degree": 0 }], "thick": null, "scale": { "x": 1, "y": 1, "z": 1 }, "BindDevId": null, "BindDevName": null, "devInfo": null, "BindMeteId": null, "BindMeteName": null }, { "show": true, "uuid": "", "name": "center_air_conditioning_2_1", "objType": "cube2", "length": 78, "width": 78, "height": 40, "x": -80.785, "y": 370.664, "z": 48.478, "style": { "skinColor": 16777215, "skin": { "skin_up": { "skinColor": 16777215, "side": 1, "opacity": 0 }, "skin_down": { "skinColor": 16777215, "side": 1, "opacity": 0.3 }, "skin_fore": { "skinColor": 16777215, "side": 1, "opacity": 0.3 }, "skin_behind": { "skinColor": 16777215, "side": 1, "opacity": 0.3 }, "skin_left": { "skinColor": 16777215, "side": 1, "opacity": 0.3 }, "skin_right": { "skinColor": 16777215, "side": 1, "opacity": 0.3 } } }, "showSortNub": 7, "customType1": "", "customType2": "", "animation": null, "dbclickEvents": null, "rotation": [{ "direction": "x", "degree": 0 }, { "direction": "y", "degree": 0 }, { "direction": "z", "degree": 0 }], "thick": null, "scale": { "x": 1, "y": 1, "z": 1 }, "BindDevId": null, "BindDevName": null, "devInfo": null, "BindMeteId": null, "BindMeteName": null }, { "show": true, "uuid": "", "name": "center_air_conditioning_1_1", "objType": "cube2", "length": 78, "width": 78, "height": 40, "x": -605.659, "y": 370.664, "z": 48.478, "style": { "skinColor": 16777215, "skin": { "skin_up": { "skinColor": 16777215, "side": 1, "opacity": 0 }, "skin_down": { "skinColor": 16777215, "side": 1, "opacity": 0.3 }, "skin_fore": { "skinColor": 16777215, "side": 1, "opacity": 0.3 }, "skin_behind": { "skinColor": 16777215, "side": 1, "opacity": 0.3 }, "skin_left": { "skinColor": 16777215, "side": 1, "opacity": 0.3 }, "skin_right": { "skinColor": 16777215, "side": 1, "opacity": 0.3 } } }, "showSortNub": 7, "customType1": "", "customType2": "", "animation": null, "dbclickEvents": null, "rotation": [{ "direction": "x", "degree": 0 }, { "direction": "y", "degree": 0 }, { "direction": "z", "degree": 0 }], "thick": null, "scale": { "x": 1, "y": 1, "z": 1 }, "BindDevId": null, "BindDevName": null, "devInfo": null, "BindMeteId": null, "BindMeteName": null }, { "show": true, "uuid": "", "name": "center_air_conditioning_1_2", "objType": "cube2", "length": 78, "width": 78, "height": 40, "x": -605.659, "y": 370.664, "z": -467.654, "style": { "skinColor": 16777215, "skin": { "skin_up": { "skinColor": 16777215, "side": 1, "opacity": 0 }, "skin_down": { "skinColor": 16777215, "side": 1, "opacity": 0.3 }, "skin_fore": { "skinColor": 16777215, "side": 1, "opacity": 0.3 }, "skin_behind": { "skinColor": 16777215, "side": 1, "opacity": 0.3 }, "skin_left": { "skinColor": 16777215, "side": 1, "opacity": 0.3 }, "skin_right": { "skinColor": 16777215, "side": 1, "opacity": 0.3 } } }, "showSortNub": 7, "customType1": "", "customType2": "", "animation": null, "dbclickEvents": null, "rotation": [{ "direction": "x", "degree": 0 }, { "direction": "y", "degree": 0 }, { "direction": "z", "degree": 0 }], "thick": null, "scale": { "x": 1, "y": 1, "z": 1 }, "BindDevId": null, "BindDevName": null, "devInfo": null, "BindMeteId": null, "BindMeteName": null }, { "show": true, "uuid": "", "name": "center_air_conditioning_1_3", "objType": "cube2", "length": 78, "width": 78, "height": 40, "x": -605.659, "y": 370.664, "z": 553.501, "style": { "skinColor": 16777215, "skin": { "skin_up": { "skinColor": 16777215, "side": 1, "opacity": 0 }, "skin_down": { "skinColor": 16777215, "side": 1, "opacity": 0.3 }, "skin_fore": { "skinColor": 16777215, "side": 1, "opacity": 0.3 }, "skin_behind": { "skinColor": 16777215, "side": 1, "opacity": 0.3 }, "skin_left": { "skinColor": 16777215, "side": 1, "opacity": 0.3 }, "skin_right": { "skinColor": 16777215, "side": 1, "opacity": 0.3 } } }, "showSortNub": 7, "customType1": "", "customType2": "", "animation": null, "dbclickEvents": null, "rotation": [{ "direction": "x", "degree": 0 }, { "direction": "y", "degree": 0 }, { "direction": "z", "degree": 0 }], "thick": null, "scale": { "x": 1, "y": 1, "z": 1 }, "BindDevId": null, "BindDevName": null, "devInfo": null, "BindMeteId": null, "BindMeteName": null }, { "show": true, "uuid": "", "name": "center_air_conditioning_3_1", "objType": "cube2", "length": 78, "width": 78, "height": 40, "x": 442.379, "y": 370.664, "z": 48.478, "style": { "skinColor": 16777215, "skin": { "skin_up": { "skinColor": 16777215, "side": 1, "opacity": 0 }, "skin_down": { "skinColor": 16777215, "side": 1, "opacity": 0.3 }, "skin_fore": { "skinColor": 16777215, "side": 1, "opacity": 0.3 }, "skin_behind": { "skinColor": 16777215, "side": 1, "opacity": 0.3 }, "skin_left": { "skinColor": 16777215, "side": 1, "opacity": 0.3 }, "skin_right": { "skinColor": 16777215, "side": 1, "opacity": 0.3 } } }, "showSortNub": 7, "customType1": "", "customType2": "", "animation": null, "dbclickEvents": null, "rotation": [{ "direction": "x", "degree": 0 }, { "direction": "y", "degree": 0 }, { "direction": "z", "degree": 0 }], "thick": null, "scale": { "x": 1, "y": 1, "z": 1 }, "BindDevId": null, "BindDevName": null, "devInfo": null, "BindMeteId": null, "BindMeteName": null }, { "show": true, "uuid": "", "name": "center_air_conditioning_3_2", "objType": "cube2", "length": 78, "width": 78, "height": 40, "x": 442.379, "y": 370.664, "z": -461.396, "style": { "skinColor": 16777215, "skin": { "skin_up": { "skinColor": 16777215, "side": 1, "opacity": 0 }, "skin_down": { "skinColor": 16777215, "side": 1, "opacity": 0.3 }, "skin_fore": { "skinColor": 16777215, "side": 1, "opacity": 0.3 }, "skin_behind": { "skinColor": 16777215, "side": 1, "opacity": 0.3 }, "skin_left": { "skinColor": 16777215, "side": 1, "opacity": 0.3 }, "skin_right": { "skinColor": 16777215, "side": 1, "opacity": 0.3 } } }, "showSortNub": 7, "customType1": "", "customType2": "", "animation": null, "dbclickEvents": null, "rotation": [{ "direction": "x", "degree": 0 }, { "direction": "y", "degree": 0 }, { "direction": "z", "degree": 0 }], "thick": null, "scale": { "x": 1, "y": 1, "z": 1 }, "BindDevId": null, "BindDevName": null, "devInfo": null, "BindMeteId": null, "BindMeteName": null }, { "show": true, "uuid": "", "name": "center_air_conditioning_3_3", "objType": "cube2", "length": 78, "width": 78, "height": 40, "x": 442.379, "y": 370.664, "z": 526.744, "style": { "skinColor": 16777215, "skin": { "skin_up": { "skinColor": 16777215, "side": 1, "opacity": 0 }, "skin_down": { "skinColor": 16777215, "side": 1, "opacity": 0.3 }, "skin_fore": { "skinColor": 16777215, "side": 1, "opacity": 0.3 }, "skin_behind": { "skinColor": 16777215, "side": 1, "opacity": 0.3 }, "skin_left": { "skinColor": 16777215, "side": 1, "opacity": 0.3 }, "skin_right": { "skinColor": 16777215, "side": 1, "opacity": 0.3 } } }, "showSortNub": 7, "customType1": "", "customType2": "", "animation": null, "dbclickEvents": null, "rotation": [{ "direction": "x", "degree": 0 }, { "direction": "y", "degree": 0 }, { "direction": "z", "degree": 0 }], "thick": null, "scale": { "x": 1, "y": 1, "z": 1 }, "BindDevId": null, "BindDevName": null, "devInfo": null, "BindMeteId": null, "BindMeteName": null }, { "show": true, "uuid": "", "name": "cacWind_1", "objType": "flowTube", "points": [{ "x": 0, "y": 0, "z": 1500 }, { "x": 0, "y": 0, "z": 0 }], "position": { "x": -70.779, "y": 419.052, "z": -751.968 }, "scale": { "x": 1, "y": 1, "z": 1 }, "rotation": [{ "direction": "x", "degree": 0 }, { "direction": "y", "degree": 0 }, { "direction": "z", "degree": 0 }], "style": { "skinColor": 16772846, "imgurl": "../../img/3dImg/right2wind.png", "opacity": 1, "canvasSkin": { "cwidth": 1024, "cheight": 128, "cwNub": 32, "chNub": 8, "cMarginW": 0.2, "cMarginH": 0.2, "speed": 3, "fps": 40, "direction": "w", "forward": "f", "side": 2, "run": true, "bgcolor": "rgba(4, 4, 4, 0.098)" } }, "segments": 4, "radialSegments": 4, "closed": false, "radius": 40, "showSortNub": 16, "customType1": "", "customType2": "", "animation": null, "dbclickEvents": null, "BindDevId": null, "BindDevName": null, "devInfo": null, "BindMeteId": null, "BindMeteName": null }, { "show": true, "uuid": "", "name": "cacWind_3", "objType": "flowTube", "points": [{ "x": 0, "y": 0, "z": 1500 }, { "x": 0, "y": 0, "z": 0 }], "position": { "x": 443.302, "y": 419.052, "z": -751.968 }, "scale": { "x": 1, "y": 1, "z": 1 }, "rotation": [{ "direction": "x", "degree": 0 }, { "direction": "y", "degree": 0 }, { "direction": "z", "degree": 0 }], "style": { "skinColor": 16772846, "imgurl": "../../img/3dImg/right2wind.png", "opacity": 1, "canvasSkin": { "cwidth": 1024, "cheight": 128, "cwNub": 32, "chNub": 8, "cMarginW": 0.2, "cMarginH": 0.2, "speed": 3, "fps": 40, "direction": "w", "forward": "f", "side": 2, "run": true, "bgcolor": "rgba(4, 4, 4, 0.098)" } }, "segments": 4, "radialSegments": 4, "closed": false, "radius": 40, "showSortNub": 16, "customType1": "", "customType2": "", "animation": null, "dbclickEvents": null, "BindDevId": null, "BindDevName": null, "devInfo": null, "BindMeteId": null, "BindMeteName": null }, { "show": true, "uuid": "", "name": "cacWind_2", "objType": "flowTube", "points": [{ "x": 0, "y": 0, "z": 1500 }, { "x": 0, "y": 0, "z": 0 }], "position": { "x": -604.569, "y": 419.052, "z": -751.968 }, "scale": { "x": 1, "y": 1, "z": 1 }, "rotation": [{ "direction": "x", "degree": 0 }, { "direction": "y", "degree": 0 }, { "direction": "z", "degree": 0 }], "style": { "skinColor": 16772846, "imgurl": "../../img/3dImg/right2wind.png", "opacity": 1, "canvasSkin": { "cwidth": 1024, "cheight": 128, "cwNub": 32, "chNub": 8, "cMarginW": 0.2, "cMarginH": 0.2, "speed": 3, "fps": 40, "direction": "w", "forward": "f", "side": 2, "run": true, "bgcolor": "rgba(4, 4, 4, 0.098)" } }, "segments": 4, "radialSegments": 4, "closed": false, "radius": 40, "showSortNub": 16, "customType1": "", "customType2": "", "animation": null, "dbclickEvents": null, "BindDevId": null, "BindDevName": null, "devInfo": null, "BindMeteId": null, "BindMeteName": null }, { "show": true, "uuid": "", "name": "center_air_conditioning_1", "objType": "cube2", "length": 80, "width": 1500, "height": 80, "x": 444.17, "y": 426.022, "z": 0, "style": { "skinColor": 16777215, "skin": { "skin_up": { "skinColor": 7895160, "side": 0, "opacity": 0.4 }, "skin_down": { "skinColor": 7895160, "side": 0, "opacity": 0.3 }, "skin_fore": { "skinColor": 16777215, "side": 0, "opacity": 0.3 }, "skin_behind": { "skinColor": 16777215, "side": 0, "opacity": 0.3 }, "skin_left": { "skinColor": 16777215, "side": 0, "opacity": 0 }, "skin_right": { "skinColor": 16777215, "side": 0, "opacity": 0 } } }, "showSortNub": 196, "customType1": "", "customType2": "", "animation": null, "dbclickEvents": null, "rotation": [{ "direction": "x", "degree": 0 }, { "direction": "y", "degree": 0 }, { "direction": "z", "degree": 0 }], "thick": null, "scale": { "x": 1, "y": 1, "z": 1 }, "BindDevId": null, "BindDevName": null, "devInfo": null, "BindMeteId": null, "BindMeteName": null }, { "show": true, "uuid": "", "name": "center_air_conditioning_2", "objType": "cube2", "length": 80, "width": 1500, "height": 80, "x": -76.111, "y": 419.507, "z": 0, "style": { "skinColor": 16777215, "skin": { "skin_up": { "skinColor": 7895160, "side": 0, "opacity": 0.4 }, "skin_down": { "skinColor": 7895160, "side": 0, "opacity": 0.3 }, "skin_fore": { "skinColor": 16777215, "side": 0, "opacity": 0.3 }, "skin_behind": { "skinColor": 16777215, "side": 0, "opacity": 0.3 }, "skin_left": { "skinColor": 16777215, "side": 0, "opacity": 0 }, "skin_right": { "skinColor": 16777215, "side": 0, "opacity": 0 } } }, "showSortNub": 196, "customType1": "", "customType2": "", "animation": null, "dbclickEvents": null, "rotation": [{ "direction": "x", "degree": 0 }, { "direction": "y", "degree": 0 }, { "direction": "z", "degree": 0 }], "thick": null, "scale": { "x": 1, "y": 1, "z": 1 }, "BindDevId": null, "BindDevName": null, "devInfo": null, "BindMeteId": null, "BindMeteName": null }, { "show": true, "uuid": "", "name": "center_air_conditioning_3", "objType": "cube2", "length": 80, "width": 1500, "height": 80, "x": -604.307, "y": 426.022, "z": 0, "style": { "skinColor": 16777215, "skin": { "skin_up": { "skinColor": 7895160, "side": 0, "opacity": 0.4 }, "skin_down": { "skinColor": 7895160, "side": 0, "opacity": 0.3 }, "skin_fore": { "skinColor": 16777215, "side": 0, "opacity": 0.3 }, "skin_behind": { "skinColor": 16777215, "side": 0, "opacity": 0.3 }, "skin_left": { "skinColor": 16777215, "side": 0, "opacity": 0 }, "skin_right": { "skinColor": 16777215, "side": 0, "opacity": 0 } } }, "showSortNub": 196, "customType1": "", "customType2": "", "animation": null, "dbclickEvents": null, "rotation": [{ "direction": "x", "degree": 0 }, { "direction": "y", "degree": 0 }, { "direction": "z", "degree": 0 }], "thick": null, "scale": { "x": 1, "y": 1, "z": 1 }, "BindDevId": null, "BindDevName": null, "devInfo": null, "BindMeteId": null, "BindMeteName": null }, { "show": true, "uuid": "", "name": "cacWind_1_1", "objType": "flowTube", "points": [{ "x": 0, "y": 200, "z": 0 }, { "x": 50, "y": 50, "z": 0 }, { "x": 150, "y": -50, "z": null }], "position": { "x": -51.031, "y": 182.086, "z": -450.709 }, "scale": { "x": 1, "y": 1, "z": 1 }, "rotation": [{ "direction": "x", "degree": 0 }, { "direction": "y", "degree": 0 }, { "direction": "z", "degree": 0 }], "style": { "skinColor": 16772846, "imgurl": "../../img/3dImg/right2wind.png", "opacity": 1, "canvasSkin": { "cwidth": 1024, "cheight": 128, "cwNub": 8, "chNub": 2, "cMarginW": 0.2, "cMarginH": 0.2, "speed": 8, "fps": 40, "direction": "w", "forward": "f", "side": 1, "run": true, "bgcolor": "rgba(4, 4, 4, 0.098)" } }, "segments": 6, "radialSegments": 2, "closed": false, "radius": 20, "showSortNub": 16, "customType1": "", "customType2": "", "animation": null, "dbclickEvents": null, "BindDevId": null, "BindDevName": null, "devInfo": null, "BindMeteId": null, "BindMeteName": null }, { "show": true, "uuid": "", "name": "cacWind_1_3", "objType": "flowTube", "points": [{ "x": 0, "y": 200, "z": 0 }, { "x": 50, "y": 50, "z": 0 }, { "x": 150, "y": -50, "z": null }], "position": { "x": -51.031, "y": 182.086, "z": 518.391 }, "scale": { "x": 1, "y": 1, "z": 1 }, "rotation": [{ "direction": "x", "degree": 0 }, { "direction": "y", "degree": 0 }, { "direction": "z", "degree": 0 }], "style": { "skinColor": 16772846, "imgurl": "../../img/3dImg/right2wind.png", "opacity": 1, "canvasSkin": { "cwidth": 1024, "cheight": 128, "cwNub": 8, "chNub": 2, "cMarginW": 0.2, "cMarginH": 0.2, "speed": 8, "fps": 40, "direction": "w", "forward": "f", "side": 1, "run": true, "bgcolor": "rgba(4, 4, 4, 0.098)" } }, "segments": 6, "radialSegments": 2, "closed": false, "radius": 20, "showSortNub": 16, "customType1": "", "customType2": "", "animation": null, "dbclickEvents": null, "BindDevId": null, "BindDevName": null, "devInfo": null, "BindMeteId": null, "BindMeteName": null }, { "show": true, "uuid": "", "name": "cacWind_1_2", "objType": "flowTube", "points": [{ "x": 0, "y": 200, "z": 0 }, { "x": 50, "y": 50, "z": 0 }, { "x": 150, "y": -50, "z": null }], "position": { "x": -51.031, "y": 182.086, "z": 56.652 }, "scale": { "x": 1, "y": 1, "z": 1 }, "rotation": [{ "direction": "x", "degree": 0 }, { "direction": "y", "degree": 0 }, { "direction": "z", "degree": 0 }], "style": { "skinColor": 16772846, "imgurl": "../../img/3dImg/right2wind.png", "opacity": 1, "canvasSkin": { "cwidth": 1024, "cheight": 128, "cwNub": 8, "chNub": 2, "cMarginW": 0.2, "cMarginH": 0.2, "speed": 8, "fps": 40, "direction": "w", "forward": "f", "side": 1, "run": true, "bgcolor": "rgba(4, 4, 4, 0.098)" } }, "segments": 6, "radialSegments": 2, "closed": false, "radius": 20, "showSortNub": 16, "customType1": "", "customType2": "", "animation": null, "dbclickEvents": null, "BindDevId": null, "BindDevName": null, "devInfo": null, "BindMeteId": null, "BindMeteName": null }, { "show": true, "uuid": "", "name": "cacWind_3_1", "objType": "flowTube", "points": [{ "x": 0, "y": 200, "z": 0 }, { "x": 50, "y": 50, "z": 0 }, { "x": 150, "y": -50, "z": null }], "position": { "x": -596.596, "y": 182.086, "z": -450.709 }, "scale": { "x": 1, "y": 1, "z": 1 }, "rotation": [{ "direction": "x", "degree": 0 }, { "direction": "y", "degree": 0 }, { "direction": "z", "degree": 0 }], "style": { "skinColor": 16772846, "imgurl": "../../img/3dImg/right2wind.png", "opacity": 1, "canvasSkin": { "cwidth": 1024, "cheight": 128, "cwNub": 8, "chNub": 2, "cMarginW": 0.2, "cMarginH": 0.2, "speed": 8, "fps": 40, "direction": "w", "forward": "f", "side": 1, "run": true, "bgcolor": "rgba(4, 4, 4, 0.098)" } }, "segments": 6, "radialSegments": 2, "closed": false, "radius": 20, "showSortNub": 16, "customType1": "", "customType2": "", "animation": null, "dbclickEvents": null, "BindDevId": null, "BindDevName": null, "devInfo": null, "BindMeteId": null, "BindMeteName": null }, { "show": true, "uuid": "", "name": "cacWind_3_2", "objType": "flowTube", "points": [{ "x": 0, "y": 200, "z": 0 }, { "x": 50, "y": 50, "z": 0 }, { "x": 150, "y": -50, "z": null }], "position": { "x": -596.596, "y": 182.086, "z": 69.057 }, "scale": { "x": 1, "y": 1, "z": 1 }, "rotation": [{ "direction": "x", "degree": 0 }, { "direction": "y", "degree": 0 }, { "direction": "z", "degree": 0 }], "style": { "skinColor": 16772846, "imgurl": "../../img/3dImg/right2wind.png", "opacity": 1, "canvasSkin": { "cwidth": 1024, "cheight": 128, "cwNub": 8, "chNub": 2, "cMarginW": 0.2, "cMarginH": 0.2, "speed": 8, "fps": 40, "direction": "w", "forward": "f", "side": 1, "run": true, "bgcolor": "rgba(4, 4, 4, 0.098)" } }, "segments": 6, "radialSegments": 2, "closed": false, "radius": 20, "showSortNub": 16, "customType1": "", "customType2": "", "animation": null, "dbclickEvents": null, "BindDevId": null, "BindDevName": null, "devInfo": null, "BindMeteId": null, "BindMeteName": null }, { "show": true, "uuid": "", "name": "cacWind_3_3", "objType": "flowTube", "points": [{ "x": 0, "y": 200, "z": 0 }, { "x": 50, "y": 50, "z": 0 }, { "x": 150, "y": -50, "z": null }], "position": { "x": -596.596, "y": 182.086, "z": 571.083 }, "scale": { "x": 1, "y": 1, "z": 1 }, "rotation": [{ "direction": "x", "degree": 0 }, { "direction": "y", "degree": 0 }, { "direction": "z", "degree": 0 }], "style": { "skinColor": 16772846, "imgurl": "../../img/3dImg/right2wind.png", "opacity": 1, "canvasSkin": { "cwidth": 1024, "cheight": 128, "cwNub": 8, "chNub": 2, "cMarginW": 0.2, "cMarginH": 0.2, "speed": 8, "fps": 40, "direction": "w", "forward": "f", "side": 1, "run": true, "bgcolor": "rgba(4, 4, 4, 0.098)" } }, "segments": 6, "radialSegments": 2, "closed": false, "radius": 20, "showSortNub": 16, "customType1": "", "customType2": "", "animation": null, "dbclickEvents": null, "BindDevId": null, "BindDevName": null, "devInfo": null, "BindMeteId": null, "BindMeteName": null }, { "show": true, "uuid": "", "name": "cacWind_2_1", "objType": "flowTube", "points": [{ "x": 0, "y": 200, "z": 0 }, { "x": 50, "y": 50, "z": 0 }, { "x": 150, "y": -50, "z": null }], "position": { "x": 449.11, "y": 182.086, "z": -450.709 }, "scale": { "x": 1, "y": 1, "z": 1 }, "rotation": [{ "direction": "x", "degree": 0 }, { "direction": "y", "degree": 0 }, { "direction": "z", "degree": 0 }], "style": { "skinColor": 16772846, "imgurl": "../../img/3dImg/right2wind.png", "opacity": 1, "canvasSkin": { "cwidth": 1024, "cheight": 128, "cwNub": 8, "chNub": 2, "cMarginW": 0.2, "cMarginH": 0.2, "speed": 8, "fps": 40, "direction": "w", "forward": "f", "side": 1, "run": true, "bgcolor": "rgba(4, 4, 4, 0.098)" } }, "segments": 6, "radialSegments": 2, "closed": false, "radius": 20, "showSortNub": 16, "customType1": "", "customType2": "", "animation": null, "dbclickEvents": null, "BindDevId": null, "BindDevName": null, "devInfo": null, "BindMeteId": null, "BindMeteName": null }, { "show": true, "uuid": "", "name": "cacWind_2_2", "objType": "flowTube", "points": [{ "x": 0, "y": 200, "z": 0 }, { "x": 50, "y": 50, "z": 0 }, { "x": 150, "y": -50, "z": null }], "position": { "x": 449.11, "y": 182.086, "z": 58.707 }, "scale": { "x": 1, "y": 1, "z": 1 }, "rotation": [{ "direction": "x", "degree": 0 }, { "direction": "y", "degree": 0 }, { "direction": "z", "degree": 0 }], "style": { "skinColor": 16772846, "imgurl": "../../img/3dImg/right2wind.png", "opacity": 1, "canvasSkin": { "cwidth": 1024, "cheight": 128, "cwNub": 8, "chNub": 2, "cMarginW": 0.2, "cMarginH": 0.2, "speed": 8, "fps": 40, "direction": "w", "forward": "f", "side": 1, "run": true, "bgcolor": "rgba(4, 4, 4, 0.098)" } }, "segments": 6, "radialSegments": 2, "closed": false, "radius": 20, "showSortNub": 16, "customType1": "", "customType2": "", "animation": null, "dbclickEvents": null, "BindDevId": null, "BindDevName": null, "devInfo": null, "BindMeteId": null, "BindMeteName": null }, { "show": true, "uuid": "", "name": "cacWind_2_3", "objType": "flowTube", "points": [{ "x": 0, "y": 200, "z": 0 }, { "x": 50, "y": 50, "z": 0 }, { "x": 150, "y": -50, "z": null }], "position": { "x": 449.11, "y": 182.086, "z": 550.649 }, "scale": { "x": 1, "y": 1, "z": 1 }, "rotation": [{ "direction": "x", "degree": 0 }, { "direction": "y", "degree": 0 }, { "direction": "z", "degree": 0 }], "style": { "skinColor": 16772846, "imgurl": "../../img/3dImg/right2wind.png", "opacity": 1, "canvasSkin": { "cwidth": 1024, "cheight": 128, "cwNub": 8, "chNub": 2, "cMarginW": 0.2, "cMarginH": 0.2, "speed": 8, "fps": 40, "direction": "w", "forward": "f", "side": 1, "run": true, "bgcolor": "rgba(4, 4, 4, 0.098)" } }, "segments": 6, "radialSegments": 2, "closed": false, "radius": 20, "showSortNub": 16, "customType1": "", "customType2": "", "animation": null, "dbclickEvents": null, "BindDevId": null, "BindDevName": null, "devInfo": null, "BindMeteId": null, "BindMeteName": null }]
$.each(centerAirCondition,function(_index,_obj){
var temObj1 = tl3DCoreObj.createObjByJson(_obj);
tl3DCoreObj.addObject(temObj1);
_this.centerAirConditionerDevs.push(temObj1)
})
}
if (_this.centerAirConditionerDevs.length > 0) {
$.each(_this.centerAirConditionerDevs, function (_index, _obj) {
_obj.visible = true;
})
}
//获取中央空调开关状态
var isopen = true;//此处调用函数 获取中央空调状态
if (isopen) {
_this.openCenterAirConditioner();
} else {
_this.closeCenterAirConditioner();
}
}
//隐藏中央空调设备
this.hideCenterAirConditioner = function () {
var _this = this;
if (_this.centerAirConditionerDevs.length > 0) {
$.each(_this.centerAirConditionerDevs, function (_index, _obj) {
_obj.visible = false;
})
}
}
//打开中央空调
this.openCenterAirConditioner = function () {
var _this = this;
_this.showCenterAirConditioner();
if (_this.centerAirConditionerDevs.length > 0) {
$.each(_this.centerAirConditionerDevs, function (_index, _obj) {
if (_obj.name.indexOf("cacWind_") >= 0) {
_obj.visible = true;
}
})
}
}
//关闭中央空调
this.closeCenterAirConditioner = function () {
var _this = this;
$("#centerAC_btn1").attr("disabled", true);
$("#centerAC_btn2").attr("disabled", true);
$("#centerAC_btn3").attr("disabled", true);
if (_this.centerAirConditionerDevs.length > 0) {
$.each(_this.centerAirConditionerDevs, function (_index, _obj) {
if (_obj.name.indexOf("cacWind_") >= 0) {
_obj.visible = false;
}
})
}
setTimeout(function () {
_this.hideCenterAirConditioner();
$("#centerAC_btn1").attr("disabled", false);
$("#centerAC_btn2").attr("disabled", false);
$("#centerAC_btn3").attr("disabled", false);
}, 2000);
}
十三、打开3D场景内告警监控，3D实时模拟显示告警情况
//告警绑定
this.alarmIntervals = [];
//添加3D告警动画
this.alarmObj = function (alarmObj, AlarmColor, alarmId) {
var _this = this;
var _canPush = true;
if (_this.alarmIntervals.length > 0) {
$.each(_this.alarmIntervals, function (_index, _obj) {
if (alarmId == _obj.alarmId) {
_canPush = false;
}
});
}
if (_canPush) {
var interval = setInterval(function () {
if (alarmObj && alarmObj.alarmColor && alarmObj.alarmColor == AlarmColor) {
tl3DCoreObj.commonFunc.setSkinColorByObj(alarmObj, 0x000000);
alarmObj.alarmColor = 0x000000;
} else {
tl3DCoreObj.commonFunc.setSkinColorByObj(alarmObj, AlarmColor);
alarmObj.alarmColor = AlarmColor;
}
}, 400);
_this.alarmIntervals.push({ alarmobjname: alarmObj.name, alarmInterval: interval, alarmId: alarmId })
}
}
//消除3D告警动画
this.cleanAlarm = function (alarmObj,alarmId) {
var _this = this;
var _alarmIndex = -1;
if (_this.alarmIntervals.length > 0) {
$.each(_this.alarmIntervals, function (_index, _obj) {
if (alarmId == _obj.alarmId) {
_alarmIndex = _index;
tl3DCoreObj.commonFunc.setSkinColorByObj(alarmObj, 0x000000);
alarmObj.alarmColor = 0x000000;
clearInterval(_obj.alarmInterval);
}
});
}
if (_alarmIndex >= 0) {
_this.alarmIntervals.splice(_alarmIndex, 1);
}
}
this.alarmMonitorIntervals = null;
this.alarmMonitorBackgroundColorOprity = 0;
this.alarmMonitorBackgroundColorOprityOP = 1;//1是加 -1是减
//点击告警监控按钮
this.alarmMonitorCtrl = function () {
var _this = this;
_this.changeCameraPosition({ x: 430, y: 1449, z: -2557 }, { x: 8, y: 234, z: 814 }, 1000);
$("#btn_alarmCtrl").css("border-radius", "25px 25px 25px 25px");
if ($("#btn_alarmCtrl").attr("data_state") && $("#btn_alarmCtrl").attr("data_state") == "runing") {
layer.msg("告警监控已关闭");
$("#btn_alarmCtrl").attr("data_state", "close");
$("#btn_alarmCtrl").css("background", "rgba(255, 255, 0, 0)");
$("#btn_alarmCtrl").attr("title", "启动告警监控");
if (_this.alarmMonitorIntervals) {
clearInterval(_this.alarmMonitorIntervals);
}
_this.closeAlarmMonitor();
} else {
_this.startAlarmMonitor();
_this.alarmMonitorBackgroundColorOprity = 0;
$("#btn_alarmCtrl").attr("data_state", "runing");
$("#btn_alarmCtrl").attr("title", "关闭告警监控");
layer.msg("告警监控已开启");
if (_this.alarmMonitorIntervals) {
clearInterval(_this.alarmMonitorIntervals);
}
_this.alarmMonitorIntervals = setInterval(function () {
if (_this.alarmMonitorBackgroundColorOprityOP == 1) {
_this.alarmMonitorBackgroundColorOprity += 0.05
}else {
_this.alarmMonitorBackgroundColorOprity -= 0.05
}
if (_this.alarmMonitorBackgroundColorOprity >= 1) {
_this.alarmMonitorBackgroundColorOprityOP = -1;
} else if (_this.alarmMonitorBackgroundColorOprity <=0) {
_this.alarmMonitorBackgroundColorOprityOP = 1;
}
$("#btn_alarmCtrl").css("background", "rgba(255, 255, 0, " + _this.alarmMonitorBackgroundColorOprity + ")");
}, 50);
}
}
this.alarmObjList = []; /*{alarmObjName, AlarmColor, alarmId,alarmState:"start"} alarmState：“start” "end" */
//获取实时告警列表
this.getAlarmObjList = function () { var result = [
{
alarmObjName: "mjj_3_6",
AlarmColor: 0xff0000,
alarmId: "mjj_3_6",
alarmState: "start"
},
{
alarmObjName: "smokeSensor_1",
AlarmColor: 0xff0000,
alarmId: "smokeSensor_1",
alarmState: "start"
},
{
alarmObjName: "mjj_1_1",
AlarmColor: 0xff0000,
alarmId: "mjj_1_1",
alarmState: "start"
},
{
alarmObjName: "mjj_5_3",
AlarmColor: 0xff0000,
alarmId: "mjj_5_3",
alarmState: "start"
}];
return result;
}
//开启告警监控 当服务端告警有改变时 可以调用此接口
this.startAlarmMonitor = function () {
var _this = this;
_this.closeAlarmMonitor();
//获取告警列表
this.alarmObjList = _this.getAlarmObjList();
if (_this.alarmObjList && _this.alarmObjList.length > 0) {
$.each(_this.alarmObjList, function (_index, _obj) {
var tl3dObj = tl3DCoreObj.commonFunc.findObject(_obj.alarmObjName);
if (tl3dObj) {
_obj.tl3dObj = tl3dObj;
if (_obj.alarmState == "start") {
if (tl3dObj.name.indexOf("smokeSensor_") >= 0) {//如果是烟感告警 特殊处理
_this.alarmSmokeSensor(tl3dObj);
}else{
_this.alarmObj(tl3dObj, _obj.AlarmColor, _obj.alarmId);
}
}
}
});
}
}
//关闭告警监控
this.closeAlarmMonitor = function () {
var _this = this;
//获取告警列表
if (_this.alarmObjList && _this.alarmObjList.length > 0) {
$.each(_this.alarmObjList, function (_index, _obj) {
if (_obj.tl3dObj.name.indexOf("smokeSensor_") >= 0) {//如果是烟感告警 特殊处理
_this.clearSmokeAlarm(_obj.tl3dObj);
} else {
_this.cleanAlarm(_obj.tl3dObj, _obj.alarmId);
}
});
}
}
//关闭某个告警
this.closeAlarm = function (alarmId) {
var _this = this;
//获取告警列表
if (_this.alarmObjList && _this.alarmObjList.length > 0) {
$.each(_this.alarmObjList, function (_index, _obj) {
if (_obj.alarmId == alarmId) {
_obj.alarmState = "end";
if (_obj.tl3dObj.name.indexOf("smokeSensor_") >= 0) {//如果是烟感告警 特殊处理
_this.clearSmokeAlarm(_obj.tl3dObj);
} else {
_this.cleanAlarm(_obj.tl3dObj, _obj.alarmId);
}
}
});
}
}
//显示告警详情
this.showAlarmDetail = function (_obj) {
//如果状态是开始 并且该对象存在告警 那么就显示告警
if ($("#btn_alarmCtrl").attr("data_state") == "runing") {
var currentAlarms = this.getAlarmObjList();
var IsShowAlarmDetail = false;
$.each(currentAlarms, function (_index, _alarmObj) {
if (_alarmObj.alarmObjName == _obj.name) {
IsShowAlarmDetail = true;
}
});
if (IsShowAlarmDetail) {//如果存在告警 就显示告警详情
var index = layer.open({
type: 1,
title:_obj.name + '-告警详情',
area: ['500px', '500px'],
maxmin: true,
content:"此处自定义显示告警详情", });
}
}
}
十四、对场景内其它设备进行3D操控 如窗帘 采光控制 灯光控制等等
//窗帘
this._CurtainArray = null;
this._CurtainState = "";
this.changeCurtainsState = function () {
var _this = this;
_this.changeCameraPosition({ x: -620, y: 903, z: 105 }, { x: -184, y: -67, z: -560 }, 1000,
function () {
if (_this._CurtainArray == null) {
_this._CurtainArray = [tl3DCoreObj.commonFunc.findObject("curtains4"),
tl3DCoreObj.commonFunc.findObject("curtains3"),
tl3DCoreObj.commonFunc.findObject("curtains2"),
tl3DCoreObj.commonFunc.findObject("curtains1")]
}
if (_this._CurtainState != "running") {
_this._CurtainState = "running";
if ($("#btn_windowsCtrl").attr("data_state")) {
} else {
$("#btn_windowsCtrl").attr("data_state", "close")
}
if ($("#btn_windowsCtrl").attr("data_state") == "close") {
$.each(_this._CurtainArray, function (_index, _obj) {
_this.changeCurtainState(_obj, "open");
});
$("#btn_windowsCtrl").attr("data_state", "open");
$("#btn_windowsCtrl").attr("src", "../../img/3dImg/winOpen.png");
} else {
$.each(_this._CurtainArray, function (_index, _obj) {
_this.changeCurtainState(_obj, "close");
});
$("#btn_windowsCtrl").attr("data_state", "close");
$("#btn_windowsCtrl").attr("src", "../../img/3dImg/winClose.png");
}
setTimeout(function () {
_this._CurtainState = "";
}, 1500);
} }); }
//改变窗帘状态
this.changeCurtainState=function (curtain,_cmd) {
var state = "close"
if (curtain.curtainRunState && curtain.curtainRunState == "running") {
return;
} else {
curtain.curtainRunState = "running";
}
if (curtain.curtainState) {
state = curtain.curtainState;
} else {
curtain.curtainState = state;
}
if (_cmd) {
if (_cmd == state) {
curtain.curtainRunState = "";
return;
}
}
var curtain_0 = curtain.children[6];//滚轴
var curtain_1 = curtain.children[5];//窗帘布
var curtain_2 = curtain.children[7];//吊缀
curtain_0.matrixAutoUpdate = true;
curtain_1.matrixAutoUpdate = true;
curtain_2.matrixAutoUpdate = true; new TWEEN.Tween(curtain_0.rotation).to({
x: (state == "close" ? Math.PI * 10 : 0)
}, 1000).onComplete(function () {
}).start();
new TWEEN.Tween(curtain_0.scale).to({
x: state == "close" ? 2 : 1,
z: state == "close" ? 2 : 1
}, 1000).onComplete(function () {
curtain_0.matrixAutoUpdate = false;
}).start(); new TWEEN.Tween(curtain_1.scale).to({
y: state == "close" ? 0.1 : 1
}, 1000).onComplete(function () {
}).start();
var yy = curtain_1.position.y;
new TWEEN.Tween(curtain_1.position).to({
y: state == "close" ? yy + 58.5 : yy - 58.5
}, 1000).onComplete(function () {
curtain_1.matrixAutoUpdate = false;
}).start();
var yy2 = curtain_2.position.y;
new TWEEN.Tween(curtain_2.position).to({
y: state == "close" ? yy2 + 117 : yy2 - 117
}, 1000).onComplete(function () {
curtain_2.matrixAutoUpdate = false;
state == "close" ? curtain.curtainState = "open" : curtain.curtainState = "close";
curtain.curtainRunState = "";
}).start(); }
好了 这一课基本情况就先介绍到这里
下一课我们继续讲解这一课的代码详情 以及讨论给这个场景加上一些新的功能 或者建立其他3D场景
用webgl 建立 3D机房 3D园区 3D智慧小区 3D工程等等
技术交流 1203193731@qq.com
交流微信：
如果你有什么要交流的心得 可邮件我
如何用webgl(three.js)搭建一个3D库房-第二课的更多相关文章
- 如何用webgl(three.js)搭建一个3D库房-第一课
今天我们来讨论一下如何使用当前流行的WebGL技术搭建一个库房并且实现实时有效交互 第一步.搭建一个3D库房首先你得知道库房长啥样,我们先来瞅瞅库房长啥样(这是我在网上找的一个库房图片,百度了“库房” ...
- 如何用webgl(three.js)搭建一个3D库房,3D密集架,3D档案室（升级版）
很长一段时间没有写3D库房,3D密集架相关的效果文章了,刚好最近有相关项目落地,索性总结一下 与之前我写的3D库房密集架文章<如何用webgl(three.js)搭建一个3D库房,3D密集架,3 ...
- 如何用webgl(three.js)搭建一个3D库房,3D仓库,3D码头,3D集装箱可视化孪生系统——第十五课
序 又是快两个月没写随笔了,长时间不总结项目,不锻炼文笔,一开篇,多少都会有些生疏,不知道如何开篇,如何写下去.有点江郎才尽,黔驴技穷的感觉. 写随笔,通常三步走,第一步,搭建框架,先把你要写的内容框 ...
- 如何用webgl(three.js)搭建一个3D库房,3D仓库3D码头,3D集装箱,车辆定位,叉车定位可视化孪生系统——第十五课
序 又是快两个月没写随笔了,长时间不总结项目,不锻炼文笔,一开篇,多少都会有些生疏,不知道如何开篇,如何写下去.有点江郎才尽,黔驴技穷的感觉. 写随笔,通常三步走,第一步,搭建框架,先把你要写的内容框 ...
- 如何用webgl(three.js)搭建一个3D库房,3D密集架,3D档案室,-第二课
闲话少叙,我们接着第一课继续讲(http://www.cnblogs.com/yeyunfei/p/7899613.html),很久没有做技术分享了.很多人问第二课有没有,我也是抽空写一下第二课. 第 ...
- 如何用webgl(three.js)搭建处理3D园区、3D楼层、3D机房管线问题（机房升级版）-第九课（一）
写在前面的话: 说点啥好呢?就讲讲前两天的小故事吧,让我确实好好反省了一下. 前两天跟朋友一次技术对话,对方问了一下Geometry与BufferGeometry的具体不同,我一下子脑袋短路,没点到重 ...
- 如何用webgl(three.js)搭建处理3D隧道、3D桥梁、3D物联网设备、3D高速公路、三维隧道桥梁设备监控-第十一课
开篇废话: 跟之前的文章一样,开篇之前,总要写几句废话,大抵也是没啥人看仔细文字,索性我也想到啥就聊啥吧. 这次聊聊疫情,这次全国多地的疫情挺严重的,本人身处深圳,深圳这几日报导都是几十几十的新增病例 ...
- 使用webgl(three.js)搭建一个3D智慧园区、3D建筑，3D消防模拟，web版3D,bim管理系统——第四课
序:这段时间忙于奔波,好久没有更新了,今天更新一下,继续上节课的完善讲解,算是对前段时间的一个总结吧.披星戴月的时光也算有点应用效果了. 对于webgl(three.js)性能这一块我在上节课< ...
- 使用webgl(three.js)搭建一个3D建筑，3D消防模拟——第三课
项目背景 消防安全一直是各大都市关注的重要课题,在消防体系中,特别是高楼消防体系中,消防系统整体布控与监控,火情有效准确定位,防火器材定位,人员逃生路径规划,火情预警,消防演习都是特别重要的环节.所以 ...
随机推荐
- [Oracle]UNIX与Windows 2000上Oracle的差异(I)
作者:Ian Adam & David Stien, SAIC Ltd 日期:19-Dec-2003 出处:http://www.dbanotes.net翻译:Fenng ---------- ...
- Orcle查询优化改写-----单表查询
1.将空值转化为实际值 coalesce 返回第一个不是null的参数 2.查询满足多个条件的行 需要注意,对于多个条件组合,要使用括号,这样在更改维护语句时可以不吸烟再考虑优先级问题,而且可以很容 ...
- Matlab绘图基础——绘制向量图，二维三维（绘制参数曲线图）
------------------------------------------- %绘制向量场图 %例一 clear all;clc; [X,Y] = meshgrid(-2:.2:2,-3:. ...
- Matlab绘图基础——绘制三维曲线
%% 绘制三维曲线 %plot3函数,其中每一组x,y,z组成一组曲线的坐标参数,选项的定义和plot函数相同. %1.当x,y,z是同维向量时,则x,y,z 对应元素构成一条三维曲线. x0 = 0 ...
- Sticks Problem
Sticks Problem poj-2452 题目大意:给你一串n个数的数列a,上面的数为a1到an.我们求最大的y-x,其中,y和x满足1.x<y 2.任意的x<i<y,都有ai ...
- ResultSet的getInt()和getString()方法详解
数据库tt的examstudent数据表如下: 在MySQL中执行查询语句如下: ResultSet rs = null; String sql="SELECT flow_id,Typ ...
- C++多线程学习之（一）——并发与多线程
1 并发 计算机领域的并发指的是在单个系统里同时执行多个独立的任务,而非顺序地进行一些活动. 1.1 并发的途径 多进程并发:将应用程序分为多个独立的进程,它们在同一时刻运行,就像同时进行网页浏览和文 ...
- 配置 CSV Data Set Config 来参数化新增客户信息操作
1.首先根据新增客户信息的http请求,来确定需要参数化的变量,选取符合测试需求且经常变化或未来会变化的变量为需要参数化的变量,如本文中的客户端名称(sys_name).描述(description) ...
- 设置linux虚拟机的固定ip、防火墙的一些操作
安装好虚拟机后,需要设置其固定ip,这样才可以连接该虚拟服务器 设置步骤如下 1.进入network-scripts目录 cd /etc/sysconfig/network-scripts 2.编辑n ...
- C语言程序设计（基础）- 第0次作业
亲爱的同学们,恭喜你成为一名大学生,我也很荣幸能够带大家一起学习大学的第一门专业基础课.还在军训的你,肯定对大学生活和计算机专业有着美好的憧憬,那么大学生活是什么样子的那?计算机专业应该怎么学习那?请 ...