如何用webgl(three.js)搭建一个3D库房,3D密集架,3D档案室（升级版）
生活随笔
收集整理的這篇文章主要介紹了
如何用webgl(three.js)搭建一个3D库房,3D密集架,3D档案室（升级版）
小編覺得挺不錯的,現在分享給大家,幫大家做個參考.
很長一段時間沒有寫3D庫房,3D密集架相關的效果文章了，剛好最近有相關項目落地，索性總結一下
與之前我寫的3D庫房密集架文章《如何用webgl(three.js)搭建一個3D庫房,3D密集架,3D檔案室,-第二課》相比，本次做了一些效果上的升級，以及更加貼合用戶應用實際。
密集架庫房再檔案管理，土壤監測，標本存儲等各個行業應用的比較多，從早期的貨架到后來的手搖式密集架再到現在的全自動密集架，硬件上都做了升級改進。
在環境、安防監控這一塊，密集架方案提供商也配套的加上了八方感知，視頻監控，溫濕度一體機，自動書架，智能門禁等各種設備。
這篇文章我們主要記錄講解使用webgl(three.js)實現3D可視化密集架方案以及實現代碼。
技術交流 1203193731@qq.com
交流微信：
如果你有什么要交流的心得 可郵件我
閑話少敘，我們進入正題：
一、主庫房功能效果，以及其特效實現代碼
首先我們先看看庫房效果以及當前實現的3d密集架的一些功能
1.1、主界面效果，這個庫房分了6個區域，多個房間拐角，后面我們還會展示一些拐角房間的內部效果，那是一個虛擬展廳。效果如下：
1.2、選擇點擊密集架，可以看到當前密集架的一些統計信息，例如面數，層數，節數（列），還有利用率等。
對于全自動密集架，我們還可以通過協議對接，對密集架進行控制，開架，打開通道，合架等。效果如下：
實現方式：
移動密集架，合并密集架，重點，難點在于計算密集架移動距離，每次移動密集架的個數，以及記錄當前密集架的位置
我才用的時分區計算，各個突破，通過配置文件的方式記錄固定架，以及每個架子的有效移動方向
具體實現如下：
首先通過配置的方式，記錄每個架子的初始態，對于一個庫房來說，不用寫邏輯代碼，直接配置還是比較方便的
var shelfAreas = [[11, 23, 13, 11, 23, 13, 25, 17]]; //固定列編號 var areasFixedCol = [ [[ 1], [12], [13], [1], [12], [13], [13], [9]] ]; //左移方向 var leftMoveDirect = [ [["x", -1], ["x", -1], ["x", -1], ["x", -1], ["x", -1], ["x", -1], ["x", -1], ["x", -1]]];
然后再通過寫通用方法，實現每個架子的移動與合并方案
//互斥移動 一次只能移動一個區域單邊的架子
ModelBusiness.prototype.moveMjj = function (obj, dir, moveLength) {
var _this = this;
if (_this.moveState == 1) {
layer.msg("有架子移動中，請稍后");
return;
}
_this.moveState = 1;
var movemjjsParam = this.getNeedMoveMjjs(obj, dir);
/*
needMoveNubs: needMoveNubs,
needMoveMjjNames:needMoveMjjNames,
directStr: driStr,
directValue: directValue,
onlyCanMoveValue: onlyCanMoveValue
*/
if(movemjjsParam.directStr=="x"){
movemjjsParam.directStrLager="X";
}
if(movemjjsParam.directStr=="z"){
movemjjsParam.directStrLager="Z";
}
console.log(movemjjsParam);
var moveMjjObjs = WT3DObj.commonFunc.findObjectsByNames(movemjjsParam.needMoveMjjNames);
var canMoveRealObjs = [];//真正能移動的架子
$.each(moveMjjObjs, function (_index, _obj) {
if (!_obj.oldPositionX) { _obj.oldPositionX = _obj.position.x; }
if (!_obj.oldPositionZ) { _obj.oldPositionZ = _obj.position.z; }
var movevalue=0;//該架子移動前 已經移動了多少
if( Math.abs(_obj.position[movemjjsParam.directStr]-_obj["oldPosition"+movemjjsParam.directStrLager])>10){
movevalue=_obj.position[movemjjsParam.directStr]-_obj["oldPosition"+movemjjsParam.directStrLager];
}
if (movevalue == 0) {//如果未移動過
if (movemjjsParam.directValue == movemjjsParam.onlyCanMoveValue) {
canMoveRealObjs.push(_obj);
}
} else {
if (movemjjsParam.directValue != movemjjsParam.onlyCanMoveValue) {
canMoveRealObjs.push(_obj);
}
}
});
console.log(canMoveRealObjs);
var moveL = { length: 0 };
$.each(canMoveRealObjs, function (_index, _obj) {
_obj["currentValue" + movemjjsParam.directStr] = _obj.position[movemjjsParam.directStr];
});
new TWEEN.Tween(moveL).to({
length: moveLength
}, 200).onUpdate(function (a) {
var _this = this;
$.each(canMoveRealObjs, function (_index, _obj) {
_obj.position[movemjjsParam.directStr] = _obj["currentValue" + movemjjsParam.directStr] + _this.length * movemjjsParam.directValue;
});
}).onComplete(function () {
_this.moveState = 0;
}).start();
}
//非互斥移動
ModelBusiness.prototype.moveMjjAll = function (obj, dir, moveLength) {
var _this = this;
var movemjjsParam = this.getNeedMoveMjjs(obj, dir);
/*
needMoveNubs: needMoveNubs,
needMoveMjjNames:needMoveMjjNames,
directStr: driStr,
directValue: directValue,
onlyCanMoveValue: onlyCanMoveValue
*/
if (movemjjsParam.directStr == "x") {
movemjjsParam.directStrLager = "X";
}
if (movemjjsParam.directStr == "z") {
movemjjsParam.directStrLager = "Z";
}
console.log(movemjjsParam);
var moveMjjObjs = WT3DObj.commonFunc.findObjectsByNames(movemjjsParam.needMoveMjjNames);
var canMoveRealObjs = [];//真正能移動的架子
$.each(moveMjjObjs, function (_index, _obj) {
if (!_obj.oldPositionX) { _obj.oldPositionX = _obj.position.x; }
if (!_obj.oldPositionZ) { _obj.oldPositionZ = _obj.position.z; }
var movevalue = 0;//該架子移動前 已經移動了多少
if (Math.abs(_obj.position[movemjjsParam.directStr] - _obj["oldPosition" + movemjjsParam.directStrLager]) > 10) {
movevalue = _obj.position[movemjjsParam.directStr] - _obj["oldPosition" + movemjjsParam.directStrLager];
}
if (movevalue == 0) {//如果未移動過
if (movemjjsParam.directValue == movemjjsParam.onlyCanMoveValue) {
canMoveRealObjs.push(_obj);
}
} else {
if (movemjjsParam.directValue != movemjjsParam.onlyCanMoveValue) {
canMoveRealObjs.push(_obj);
}
}
});
console.log(canMoveRealObjs);
$.each(canMoveRealObjs, function (_index, _obj) {
_obj.position[movemjjsParam.directStr] = _obj.position[movemjjsParam.directStr] + moveLength * movemjjsParam.directValue;
});
//new TWEEN.Tween(moveL).to({
// length: moveLength
//}, 200).onUpdate(function (a) {
// var _this = this;
// $.each(canMoveRealObjs, function (_index, _obj) {
// _obj.position[movemjjsParam.directStr] = _obj["currentValue" + movemjjsParam.directStr] + _this.length * movemjjsParam.directValue;
// });
//}).onComplete(function () {
//}).start();
}
ModelBusiness.prototype.closeMJJ = function (obj,timelong,callBack) {
var info = modelBusiness.getMJJBindRelationByModelId(obj.name);
var maxColNub = info.maxColNub;
var prefixName = obj.name.split("_")[0] + "_" + obj.name.split("_")[1] + "_";//前綴
var mjjNames = [];
for (var i = 1; i <= maxColNub; i++) {
mjjNames.push(prefixName+i);
}
var moveMjjObjs = WT3DObj.commonFunc.findObjectsByNames(mjjNames);
$.each(moveMjjObjs, function (_index,_obj) {
new TWEEN.Tween(_obj.position).to({
x: _obj.oldPositionX,
z:_obj.oldPositionZ
}, timelong ? timelong : 200).onComplete(function () {
if (callBack) {
callBack();
}
}).start();
});
}
1.3、密集架支持通風，鎖定、解鎖、自檢等操作，并配有相關動畫。效果如下：
這里我們通過導入通風模型的方式來實現，當通風打開時，我們載入通風動畫模型，然后定時銷毀即可
實現如下：
//打開 1 關閉 0 通風
ModelBusiness.prototype.windFunc = function (type,position) {
var models = [{ "show": true, "uuid": "", "name": "flowtube_7", "objType": "flowTube", "points": [{ "x": -600, "y": 0, "z": 0 }, { "x": -300, "y": -350, "z": 0 }, { "x": 300, "y": -350, "z": null }, { "x": 600, "y": 0, "z": null }], "position": position, "scale": { "x": 1, "y": 1, "z": 1 }, "rotation": [{ "direction": "x", "degree": 0 }, { "direction": "y", "degree": Math.PI }, { "direction": "z", "degree": 0 }], "style": { "skinColor": 16772846, "imgurl": "../img/3dImg/right1.png", "opacity": 1, "canvasSkin": { "cwidth": 1024, "cheight": 128, "cwNub": 8, "chNub": 12, "cMarginW": 0.2, "cMarginH": 0.2, "speed": 8, "fps": 20, "direction": "w", "forward": "f", "side": 2, "run": true, "bgcolor": "rgba(0, 255, 34, 0.02)" } }, "segments": 3, "radialSegments": 2, "closed": false, "radius": 200, "showSortNub": 7000, "customType1": "", "customType2": "", "animation": null, "dbclickEvents": null, "BindDevId": null, "BindDevName": null, "devInfo": null, "BindMeteId": null, "BindMeteName": null }];
WT3DObj.commonFunc.loadModelsByJsons(models, { x: 0, y: 0, z: 0 }, { x: 0, y: 0, z: 0 }, true);
setTimeout(function () {
var flowtube_7 = WT3DObj.commonFunc.findObject("flowtube_7");
if (type == 1) {
layer.msg("正在執行打開通風！");
setTimeout(function () {
WT3DObj.commonFunc.changeObjsOpacity([flowtube_7], 1, 0.1, 800);
setTimeout(function () {
flowtube_7.visible = false;
WT3DObj.destoryObj(flowtube_7);
WT3DObj.destoryObj("flowtube_7");
}, 500);
}, 5000);
} else {
setTimeout(function () {
layer.msg("正在執行關閉通風！");
new TWEEN.Tween(flowtube_7.scale).to({
x: 20,
y: 20,
z: 20,
}, 1000).onUpdate(function (a) {
}).onComplete(function () {
flowtube_7.visible = false;
flowtube_7.scale.x = 0.001;
flowtube_7.scale.y = 0.001;
flowtube_7.scale.z = 0.001;
setTimeout(function () {
WT3DObj.destoryObj(flowtube_7);
WT3DObj.destoryObj("flowtube_7");
}, 200);
}).start();
}, 1000);
}
}, 200);
}
與通風動畫類似，我們通過載入鎖動畫模型，實現如下：
//開鎖 1 關鎖 0特效
ModelBusiness.prototype.lockFunc = function (position,type) {
var models = null;
if (type == 1) {
models = [{ "show": true, "uuid": "", "name": "lock_7", "objType": "GroupObj", "scale": { "x": 4, "y": 4, "z": 4 }, "position": { "x": 0, "y": 0, "z": 0 }, "rotation": [{ "direction": "x", "degree": 0 }, { "direction": "y", "degree": 0 }, { "direction": "z", "degree": 0 }], "childrens": [{ "show": true, "uuid": "", "name": "lock_7OBJCREN0", "objType": "ExtrudeGeometry", "position": { "x": 0, "y": 0, "z": 0 }, "style": { "skinColor": 5306186, "opacity": 0.8 }, "scale": { "x": 1, "y": 1, "z": 1 }, "shapeParm": { "points": [{ "x": 100, "y": -120, "type": "nomal" }, { "x": 100, "y": 120, "type": "nomal" }, { "x": -100, "y": 120, "type": "nomal" }, { "x": -100, "y": -120, "type": "nomal" }], "holes": [] }, "extrudeSettings": { "amount": 0, "curveSegments": 1, "steps": 1, "bevelEnabled": true, "bevelThickness": 1, "bevelSize": 1, "bevelSegments": 1, "extrudePathPoints": [{ "x": 0, "y": 0, "z": -50 }, { "x": 0, "y": 0, "z": 50 }] }, "showSortNub": 6000, "customType1": "", "customType2": "", "animation": null, "dbclickEvents": null, "rotation": [{ "direction": "x", "degree": 0 }, { "direction": "y", "degree": 0 }, { "direction": "z", "degree": 0 }], "BindDevId": null, "BindDevName": null, "devInfo": null, "BindMeteId": null, "BindMeteName": null }, { "show": true, "uuid": "", "name": "lock_7OBJCREN1", "objType": "tube", "points": [{ "x": 0, "y": 0, "z": 0 }, { "x": 0, "y": 150, "z": 0 }, { "x": -50, "y": 190, "z": 0 }, { "x": -110, "y": 190, "z": 0 }, { "x": -160, "y": 150, "z": 0 }, { "x": -170, "y": 60, "z": 0 }], "position": { "x": 84.692, "y": 33.246, "z": 0 }, "scale": { "x": 1, "y": 1, "z": 1 }, "rotation": [{ "direction": "x", "degree": 0 }, { "direction": "y", "degree": 0 }, { "direction": "z", "degree": 0 }], "style": { "skinColor": 5040966, "opacity": 0.9 }, "segments": 24, "radialSegments": 8, "closed": false, "radius": 20, "showSortNub": 7000, "customType1": "", "customType2": "", "animation": null, "dbclickEvents": null, "BindDevId": null, "BindDevName": null, "devInfo": null, "BindMeteId": null, "BindMeteName": null }], "showSortNub": 7000, "customType1": "", "customType2": "", "animation": null, "dbclickEvents": null, "BindDevId": null, "BindDevName": null, "devInfo": null, "BindMeteId": null, "BindMeteName": null }];
} else {
models = [{ "show": true, "uuid": "", "name": "lock_7", "objType": "GroupObj", "scale": { "x": 4, "y": 4, "z": 4 }, "position": { "x": 0, "y": 0, "z": 0 }, "rotation": [{ "direction": "x", "degree": 0 }], "childrens": [{ "show": true, "uuid": "", "name": "lock_7OBJCREN0", "objType": "ExtrudeGeometry", "position": { "x": 0, "y": 0, "z": 0 }, "style": { "skinColor": 5306186, "opacity": 0.8 }, "scale": { "x": 1, "y": 1, "z": 1 }, "shapeParm": { "points": [{ "x": 100, "y": -120, "type": "nomal" }, { "x": 100, "y": 120, "type": "nomal" }, { "x": -100, "y": 120, "type": "nomal" }, { "x": -100, "y": -120, "type": "nomal" }], "holes": [] }, "extrudeSettings": { "amount": 0, "curveSegments": 1, "steps": 1, "bevelEnabled": true, "bevelThickness": 1, "bevelSize": 1, "bevelSegments": 1, "extrudePathPoints": [{ "x": 0, "y": 0, "z": -50 }, { "x": 0, "y": 0, "z": 50 }] }, "showSortNub": 6000, "customType1": "", "customType2": "", "animation": null, "dbclickEvents": null, "rotation": [{ "direction": "x", "degree": 0 }, { "direction": "y", "degree": 0 }, { "direction": "z", "degree": 0 }], "BindDevId": null, "BindDevName": null, "devInfo": null, "BindMeteId": null, "BindMeteName": null }, { "show": true, "uuid": "", "name": "lock_7OBJCREN1", "objType": "tube", "points": [{ "x": 0, "y": 0, "z": 0 }, { "x": 0, "y": 150, "z": 0 }, { "x": -50, "y": 190, "z": 0 }, { "x": -110, "y": 190, "z": 0 }, { "x": -160, "y": 150, "z": 0 }, { "x": -170, "y": 60, "z": 0 }], "position": { "x": 84.692, "y": 75.037, "z": 0 }, "scale": { "x": 1, "y": 1, "z": 1 }, "rotation": [{ "direction": "x", "degree": -3.141592653589793 }, { "direction": "y", "degree": 1.2246468525851679e-16 }, { "direction": "z", "degree": -3.141592653589793 }], "style": { "skinColor": 5040966, "opacity": 0.9 }, "segments": 24, "radialSegments": 8, "closed": false, "radius": 20, "showSortNub": 7000, "customType1": "", "customType2": "", "animation": null, "dbclickEvents": null, "BindDevId": null, "BindDevName": null, "devInfo": null, "BindMeteId": null, "BindMeteName": null }], "showSortNub": 7000 }];
}
WT3DObj.commonFunc.loadModelsByJsons(models, position, { x: 0, y: 0, z: 0 }, true);
setTimeout(function () {
var lock7 = WT3DObj.commonFunc.findObject("lock_7");
if (type == 1) {
var top1 = lock7.children[1];
top1.oldpositiony = top1.position.y;
var moveobj = { x: 0 };
new TWEEN.Tween(moveobj).to({
x: 25
}, 500).onUpdate(function (a) {
var _this = this;
top1.position.y = top1.oldpositiony + _this.x;
top1.matrixAutoUpdate = true;
}).onComplete(function () {
new TWEEN.Tween(top1.rotation).to({
y: Math.PI,
}, 1000).onUpdate(function (a) {
top1.matrixAutoUpdate = true;
}).onComplete(function () {
setTimeout(function () {
WT3DObj.commonFunc.changeObjsOpacity([lock7], 1, 0.1, 800);
new TWEEN.Tween(lock7.scale).to({
x: 10,
y: 10,
z: 10,
}, 1000).onUpdate(function (a) {
}).onComplete(function () {
lock7.visible = false;
lock7.scale.x = 0.001;
lock7.scale.y = 0.001;
lock7.scale.z = 0.001;
setTimeout(function () {
WT3DObj.destoryObj(lock7);
WT3DObj.destoryObj("lock_7");
}, 200);
}).start();
}, 1000);
}).start();
}).start();
} else {
var top1 = lock7.children[1];
top1.oldpositiony = top1.position.y;
new TWEEN.Tween(top1.rotation).to({
y: Math.PI,
}, 1000).onUpdate(function (a) {
top1.matrixAutoUpdate = true;
}).onComplete(function () {
var moveobj = { x: 0 };
new TWEEN.Tween(moveobj).to({
x: -25
}, 500).onUpdate(function (a) {
var _this = this;
top1.position.y = top1.oldpositiony + _this.x;
top1.matrixAutoUpdate = true;
}).onComplete(function () {
setTimeout(function () {
WT3DObj.commonFunc.changeObjsOpacity([lock7], 1, 0.1, 800);
new TWEEN.Tween(lock7.scale).to({
x: 10,
y: 10,
z: 10,
}, 1000).onUpdate(function (a) { }).onComplete(function () {
lock7.visible = false;
lock7.scale.x = 0.001;
lock7.scale.y = 0.001;
lock7.scale.z = 0.001;
setTimeout(function () {
WT3DObj.destoryObj(lock7);
WT3DObj.destoryObj("lock_7");
}, 200);
}).start();
}, 1000);
}).start();
}).start();
}
}, 200);
}
1.4、庫房內安裝有區域控制器，八防感知系統等設備。點擊設備可以看到其實時監控數據，效果如下：
這就比較簡單了，我們只需要獲取到模型的位置，再轉換成屏幕的二維位置，然后再對應的位置上加上tips即可，這里我用的時layer.tips
實現如下：
ModelBusiness.prototype.showMsg = function (_obj, position, html, closeFunc) {
//獲取位置
var screenPostion = WT3DObj.commonFunc.transToScreenCoord({ x: _obj.position.x + position.x, y: _obj.position.y + position.y, z: _obj.position.z + position.z });
$("#MarkMessageHelper").remove();
$("body").append("<div id='MarkMessageHelper' style='position:absolute;left:" + (screenPostion.x - 30) + "px;top:" + screenPostion.y + "px;height:2px;2px;z-index:1000;'></div>");
var urandom = (Math.random() * 100).toFixed(0);
layer.closeAll();
layer.tips(html, '#MarkMessageHelper', {
closeBtn: 1,
shade: false,
shadeClose: true,
area: ["300px", "200px"],
maxWidth: 1000,
maxHeight: 350,
time: 0,//是否定時關閉，0表示不關閉
cancel: function (index, layero) {
if (closeFunc) {
closeFunc();
}
},
tips: [1, "rgba(0,0,0,0.8)"] //還可配置顏色
});
}
二、虛擬小庫房的效果與實現方式
項目中除了大庫房的實際應用，還涉及到一個小庫房展廳的各種設備接入與實現。
2.1、庫房中，接入了軌道攝像機，普通攝像機，溫濕度一體機，聲光報警燈，燈控開關，門禁，rfid門卡，八防感知，區域控制器等等。小庫房主界面效果如下：
2.2、由于小庫房展廳的密集架沒那么多，這里的打開密集架通道，我們可以動過強耦合的方式，將移動位置直接寫死再代碼里
代碼如下：
//密集架控制
ModelBusiness.prototype.mjjCtrlSystem = function () {
showposition = { x: 200, y: 700, z: 0 };
showhtml = "";
var html = ' <div class="ctrbtn" id="btn_o1"> <img src="../img/pageimg2/l1.png" title="打開1通道" /><br/>打開1通道</div>\
<div class="ctrbtn" id="btn_o2"><img src="../img/pageimg2/l2.png" title="打開2通道" /><br/>打開2通道</div>\
<div class="ctrbtn" id="btn_o3"><img src="../img/pageimg2/together.png" title="關閉" /><br/>關閉</div>\
';
//獲取位置
this.showMsg2(null, null,300, html, function () {
$(".ctrbtn").click(function () {
{
var id = $(this).attr("id");
var state = -1;
switch (id) {
case "btn_o1":
{
state = "1";
WT3DObj.commonFunc.findObject("mjj_1_2").position.x = 2300;
WT3DObj.commonFunc.findObject("mjj_1_3").position.x = 1900;
}
break;
case "btn_o2":
{
state = "2";
WT3DObj.commonFunc.findObject("mjj_1_2").position.x = 2879;
WT3DObj.commonFunc.findObject("mjj_1_3").position.x = 1500;
}
break;
case "btn_o3":
{
WT3DObj.commonFunc.findObject("mjj_1_2").position.x = 2879;
WT3DObj.commonFunc.findObject("mjj_1_3").position.x = 2428;
}
break;
}
layer.msg("控制命令已發送！");
webapi.controlDev("Sandtable/shelf", state, function (response) {
if (response) {
if (response.code == "1") response.msg = "控制成功";
layer.msg(response.msg);
}
}, function (error) {
layer.msg("控制失敗！");
console.log(error);
});
}
});
});
return;
}
2.3、所有密集架都可以打開，查看內部詳情，雙擊密集架，鏡頭定位推進，然后打開密集架的內部結構，效果如下：
2.4、當密集架中有檔案數據時，3d架子內會自動在對應的位置顯示檔案盒，雙擊檔案盒對應的格子，為了便于操控，我通過div彈窗的方式，將檔案盒詳細脊背展現出來，
點擊脊背，還詳細展示出檔案盒內的文件鏈接列表，這就看具體數據了，可能時pdf world excel 亦或者時拍照存留的圖片
具體實現如下：
function openW(a) {
window.parent.$(".layui-layer-setwin").hide();
$("#fzbtn").hide();
window.parent.$("iframe").height($(window.parent).height() - 50);
console.log(a);
var title = "";
var face = 0;
var quno = getQueryString("quno");
var colnub = getQueryString("colnub");
var row = a.name.split("_")[1];
var jie = a.name.split("_")[2];
if (a.name.indexOf("lattice1") >= 0) {
title = "左面，第" + row + "行，第" + jie+ "節";
} else {
title = "右面，第" + row + "行，第" + jie + "列";
face =1;
}
var detail = LatCache["r" + (face) + "_" + row + "_c_" + jie];
if (detail && detail.desc) {
title +="<font style='font-size:16px;margin-left:20px;'>("+ replaceNull(detail.desc)+")</font>";
}
layer.open({
type: 1, title: title,
skin: "layui-layer-rim",
shade: 0.8,
shadeClose: false,
area: [($(window).width() - 10) + "px", ($(window).height() -10) + "px"],
content: '<div id="boxsDivFather"><div id="boxsDiv"></div></div>',
cancel: function () {
$("#fzbtn").show();
window.parent.$(".layui-layer-setwin").show();
window.parent.$("iframe").height($(window.parent).height() - 100);
if (boxLayerIndex) {
layer.close(boxLayerIndex);
}
}, success: function () {
scale15 = false;
$(".layui-layer-content").after("<button id='fdbtn' style=' text-align:center;position:absolute; top: 8px;font-size: 16px;left: 500px; 80px;height: 28px; background: #288fd8;color: white;border: 0px;margin-left:20px;cursor:pointer;' onclick='fdFunc()'><i class='ace-icon fa fa-search-plus' style='font-size:18px;'></i> 放大</button>");
setTimeout(function () {
webapi.deviceInfo(room, dataId, face, row, jie, function (books) {
var allhtml = "";
books=books.sort(function(a,b){return a.sortNub-b.sortNub});
$.each(books,function(_bindex,_bobj){
boxcacheData["b_"+_bobj.id]=_bobj;
var ftype = 0;
if (mjjparam.fileType && mjjparam.fileType != 0) {
ftype = mjjparam.fileType;
} else if (_bobj.boxType) {
ftype = _bobj.boxType;
}
allhtml += getBoxFaceByType(ftype, _bindex, _bobj)
});
$("#boxsDiv").html(allhtml);
console.log(a.name);
$(".boxSelectCSS").click(function () {
var id = $(this).attr("data-id");
webapi.boxDetailInfo(id, function (files) {
var showhtml = ' <div class="row">'
+ '<div class="col-sm-12">';
showhtml += '<div class="input-group">'
+ '<span class="input-group-addon">文件列表:</span>'
+ '</div>'
$.each(files, function (_findex,_fobj) {
showhtml += '<div class="input-group">'
+ '<font onclick="window.open(\'' + _fobj.fileSrc + '\');">' + _fobj.name + '</font>'
+ '</div>';
});
showhtml += '</div></div>';
boxLayerIndex = layer.tips(showhtml, "#b_archiveno_" + id, {
closeBtn: 1,
tips:2,
shade: false,
shadeClose: true,
area: ["280px", "auto"],
maxWidth: 1000,
maxHeight: 750,
time: 0,//是否定時關閉，0表示不關閉
cancel: function (index, layero) {
boxLayerIndex = null;
},
tips: [1, "rgba(0,0,0,0.8)"] //還可配置顏色
});
}, function (err) {
}, false);
});
$(".boxSelectCSS").dblclick(function () {
var id = $(this).attr("data-id");
webapi.boxDetailInfo(id, function (files) {
if (files.length > 0) {
window.open( files[0].fileSrc);
}
}, function (err) {
}, false);
});
var scaleheigt = ($(window).height() - 70) / $("#boxsDiv").height();
if (scaleheigt < 1) {
ScaleSize = scaleheigt;
$("#boxsDiv").width(1 / scaleheigt * 100 + "%");
$("#boxsDiv").css("transform", "scale(" + scaleheigt + ")");
} else {
ScaleSize = 1;
}
}, function () { });
}, 200);
}
});
}
2.5、控制軌道相機的位置，通過選擇通道，改變軌道相機的位置
這個實現比較簡單，我們只需要修改它的position屬性即可，
//軌道攝像機
ModelBusiness.prototype.gdsxjCtrlSystem = function () {
showposition = { x: 200, y: 700, z: 0 };
showhtml = "";
var html = ' <div class="ctrbtn" id="btn_o1"> <img src="../img/pageimg2/l1.png" title="1通道" /><br/>1通道</div>\
<div class="ctrbtn" id="btn_o2"><img src="../img/pageimg2/l2.png" title="2通道" /><br/>2通道</div>\
<div class="ctrbtn" id="btn_o3"><img src="../img/pageimg2/l3.png" title="原點" /><br/>原點</div>\
';
//獲取位置
this.showMsg2(null, null, 300, html, function () {
$(".ctrbtn").click(function () {
{
var id = $(this).attr("id");
var state = -1;
switch (id) {
case "btn_o1":
{
state = "1";
WT3DObj.commonFunc.findObject("xxj_2_263").position.x = 3200;
}
break;
case "btn_o2":
{
state = "2";
WT3DObj.commonFunc.findObject("xxj_2_263").position.x = 2300;
}
break;
case "btn_o3":
{
WT3DObj.commonFunc.findObject("xxj_2_263").position.x = 1400;
}
break;
}
layer.msg("控制命令已發送！");
webapi.controlDev("Sandtable/cam", state, function (response) {
if (response) {
if (response.code == "1") response.msg = "控制成功";
layer.msg(response.msg);
}
}, function (error) {
layer.msg("控制失敗！");
console.log(error);
});
}
});
});
return;
}
2.6、控制門禁，實現遠程開門，在三維里面反饋展示
具體實現：
//門禁
ModelBusiness.prototype.doorCtrlSystem = function () {
showposition = { x: 200, y: 700, z: 0 };
showhtml = "";
var html = ' <div class="ctrbtn" id="btn_closedoor"> <img src="../img/pageimg2/lock.png" title="關燈" /><br/>關門</div>\
<div class="ctrbtn" id="btn_opendoor"><img src="../img/pageimg2/unlock.png" title="開門" /><br/>開門</div>\
';
//獲取位置
this.showMsg2(null, null, 200, html, function () {
$(".ctrbtn").click(function () {
{
var id = $(this).attr("id");
var state = -1;
switch (id) {
case "btn_closedoor":
{
state = "2";
WT3DObj.commonFunc.findObject("door_1").position.x = -163.322
WT3DObj.commonFunc.findObject("door_1").position.z = 2680.743
WT3DObj.commonFunc.findObject("door_1").rotation.y = 0;
WT3DObj.commonFunc.findObject("door_2").position.x = -163.322
WT3DObj.commonFunc.findObject("door_2").position.z = 3081.653
WT3DObj.commonFunc.findObject("door_2").rotation.y = 0
}
break;
case "btn_opendoor":
{
state = "1";
WT3DObj.commonFunc.findObject("door_1").position.x = 74
WT3DObj.commonFunc.findObject("door_1").position.z = 2500
WT3DObj.commonFunc.findObject("door_1").rotation.y = Math.PI / 2;
WT3DObj.commonFunc.findObject("door_2").position.x = 74
WT3DObj.commonFunc.findObject("door_2").position.z = 3250
WT3DObj.commonFunc.findObject("door_2").rotation.y = -Math.PI / 2
state = "1";
}
break;
}
layer.msg("控制命令已發送！");
webapi.controlDev("Sadntable/door", state, function (response) {
if (response) {
if (response.code == "1") response.msg = "控制成功";
layer.msg(response.msg);
}
}, function (error) {
layer.msg("控制失敗！");
console.log(error);
});
}
});
});
return;
}
2.7、控制溫濕度一體機
這里實現，也是通過載入開關動畫的方式
具體實現：
//一體機 16
ModelBusiness.prototype.ctrlYITIJI = function (model, action) {
{
var cresultState = true;
switch (action) {
case "1":
cresultState = modelBusiness.ctrlJSAnimation(model);
break;
case "2":
cresultState = modelBusiness.closeDev(model);
break;
}
//發送控制命令
if (cresultState) {
webapi.controlDev("Sandtable/aiodevice", action, function (response) {
if (response) {
if (response.msg == "") response.msg = "控制成功"; layer.msg(response.msg);
}
}, function (error) {
layer.msg("控制失敗！");
console.log(error);
});
}
}
}
2.8、控制燈控系統
這里我們通過加上光照效果，實現方式是修改環境光顯示隱藏的屬性，即可達到燈光效果，由于全程可見，我們通過地面的陰影來體現燈光的開關。
具體實現：
//燈控
ModelBusiness.prototype.lightCtrlSystem = function () {
showposition = { x: 200, y: 700, z: 0 };
showhtml = "";
var html = ' <div class="ctrbtn" id="btn_closelight"> <img src="../img/pageimg2/closeLight.png" title="關燈" /><br/>關燈</div>\
<div class="ctrbtn" id="btn_l3"><img src="../img/pageimg2/l3.png" title="開燈" /><br/>開燈</div>\
';
//獲取位置
this.showMsg2(null, null, 200, html, function () {
$(".ctrbtn").click(function () {
{
var id = $(this).attr("id");
var state = -1;
switch (id) {
case "btn_closelight":
{
state = "2";
WT3DObj.commonFunc.findObject("DirectionalLight_429").visible=false;
}
break;
case "btn_l1":
{
state = 1;
}
break;
case "btn_l2":
{
state = 2;
}
break;
case "btn_l3":
{
WT3DObj.commonFunc.findObject("DirectionalLight_429").visible = true;
state = "1";
}
break;
}
layer.msg("控制命令已發送！");
webapi.controlDev("Sandtable/light", state, function (response) {
if (response) {
if (response.code == "1") response.msg = "控制成功";
layer.msg(response.msg);
}
}, function (error) {
layer.msg("控制失敗！");
console.log(error);
});
}
});
});
return;
}
2.9、聲光報警器觸發。
通過修改聲光效果的屬性來實現。
實現代碼如下：
//報警器
ModelBusiness.prototype.alarmCtrlSystem = function () {
return;
showposition = { x: 200, y: 700, z: 0 };
showhtml = "";
var html = ' <div class="ctrbtn" id="btn_openlight"> <img src="../img/pageimg2/bf.png" title="布防" /><br/>布防</div>\
<div class="ctrbtn" id="btn_l1"> <img src="../img/pageimg2/cf.png" title="撤防" /><br/>撤防</div>\
';
//獲取位置
this.showMsg2(null, null, 200, html, function () {
$(".ctrbtn").click(function () {
var _id = $(this).attr("id");
switch (_id) {
case "btn_openlight":
{ }
break;
case "btn_l1":
{ }
break;
case "btn_l2":
{ }
break;
case "btn_l3":
{ }
break;
case "ptdBtn":
{ }
break;
}
});
});
}
2.10、庫房內搜索功能，可以通過關鍵之搜索，快速定位檔案位置。
三、該篇總結
本篇文章主要介紹了3D密集架的功能與效果。并且對主要實現邏輯代碼進行了講解
后面的文章會對具體模型的實現方式進行講解，由于篇幅原因，先講到這里，后面持續更新。
亦或者通過下列方式交流：
郵箱交流 1203193731@qq.com
微信交流：
如果你有什么要交流的心得 可郵件我
其它相關文章：
使用webgl(three.js)創建3D機房，3D機房微模塊詳細介紹(升級版二)
如何用webgl(three.js)搭建一個3D庫房-第一課
如何用webgl(three.js)搭建一個3D庫房,3D密集架,3D檔案室,-第二課
使用webgl(three.js)搭建一個3D建筑，3D消防模擬——第三課
使用webgl(three.js)搭建一個3D智慧園區、3D建筑，3D消防模擬，web版3D,bim管理系統——第四課
如何用webgl(three.js)搭建不規則建筑模型，客流量熱力圖模擬
使用webgl(three.js)搭建一個3D智慧園區、3D建筑，3D消防模擬，web版3D,bim管理系統——第四課（炫酷版一）
使用webgl(three.js)搭建3D智慧園區、3D大屏，3D樓宇，智慧燈桿三維展示，3D燈桿，web版3D,bim管理系統——第六課
物聯網3D，物業基礎設施3D運維，使用webgl(three.js)與物聯網設備結合案例。搭建智慧樓宇，智慧園區，3D園區、3D物業設施，3D樓宇管理系統——第八課
總結
以上是生活随笔為你收集整理的如何用webgl(three.js)搭建一个3D库房,3D密集架,3D档案室（升级版）的全部內容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 获取母版中的控件
- 下一篇： 【转】jquery 注册事件的方法