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

很长一段时间没有写3D库房,3D密集架相关的效果文章了，刚好最近有相关项目落地，索性总结一下

与之前我写的3D库房密集架文章《如何用webgl(域名)搭建一个3D库房,3D密集架,3D档案室,-第二课》相比，本次做了一些效果上的升级，以及更加贴合用户应用实际。

密集架库房再档案管理，土壤监测，标本存储等各个行业应用的比较多，从早期的货架到后来的手摇式密集架再到现在的全自动密集架，硬件上都做了升级改进。

在环境、安防监控这一块，密集架方案提供商也配套的加上了八方感知，视频监控，温湿度一体机，自动书架，智能门禁等各种设备。

这篇文章我们主要记录讲解使用webgl(域名)实现3D可视化密集架方案以及实现代码。

闲话少叙，我们进入正题：

一、主库房功能效果，以及其特效实现代码

首先我们先看看库房效果以及当前实现的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]]];

然后再通过写通用方法，实现每个架子的移动与合并方案

//互斥移动 一次只能移动一个区域单边的架子
域名Mjj = function (obj, dir, moveLength) {
    var _this = this;
    if (域名State == 1) {
        域名("有架子移动中，请稍后");
        return;
    }
    域名State = 1;
    var movemjjsParam = 域名eedMoveMjjs(obj, dir);
    /*
        needMoveNubs: needMoveNubs, 
        needMoveMjjNames:needMoveMjjNames,
        directStr: driStr,
        directValue: directValue,
        onlyCanMoveValue: onlyCanMoveValue
    */
    if(域名ctStr=="x"){
        域名ctStrLager="X";
    }
    if(域名ctStr=="z"){
        域名ctStrLager="Z";
    }
    域名(movemjjsParam);

    var moveMjjObjs = 域名ObjectsByNames(域名MoveMjjNames);
    var canMoveRealObjs = [];//真正能移动的架子
    $.each(moveMjjObjs, function (_index, _obj) {
        if (!域名ositionX) { 域名ositionX = 域名tion.x; }
        if (!域名ositionZ) { 域名ositionZ = 域名tion.z; }
        var movevalue=0;//该架子移动前 已经移动了多少
        if( 域名(域名tion[域名ctStr]-_obj["oldPosition"+域名ctStrLager])>10){
            movevalue=域名tion[域名ctStr]-_obj["oldPosition"+域名ctStrLager];
        }
        if (movevalue == 0) {//如果未移动过
            if (域名ctValue == 域名CanMoveValue) {
                域名(_obj);
            }
        } else {
            if (域名ctValue != 域名CanMoveValue) {
                域名(_obj);
            }
        }
    });
    域名(canMoveRealObjs);
    var moveL = { length: 0 };
    $.each(canMoveRealObjs, function (_index, _obj) {
        _obj["currentValue" + 域名ctStr] = 域名tion[域名ctStr];
    });
    new 域名n(moveL).to({
        length: moveLength
    }, 200).onUpdate(function (a) {
        var _this = this;
        $.each(canMoveRealObjs, function (_index, _obj) {
            域名tion[域名ctStr] = _obj["currentValue" + 域名ctStr] + 域名th * 域名ctValue;
        });
    }).onComplete(function () {
        域名State = 0;
    }).start();
}
//非互斥移动
域名MjjAll = function (obj, dir, moveLength) {
    var _this = this;
    var movemjjsParam = 域名eedMoveMjjs(obj, dir);
    /*
        needMoveNubs: needMoveNubs, 
        needMoveMjjNames:needMoveMjjNames,
        directStr: driStr,
        directValue: directValue,
        onlyCanMoveValue: onlyCanMoveValue
    */
    if (域名ctStr == "x") {
        域名ctStrLager = "X";
    }
    if (域名ctStr == "z") {
        域名ctStrLager = "Z";
    }
    域名(movemjjsParam);

    var moveMjjObjs = 域名ObjectsByNames(域名MoveMjjNames);
    var canMoveRealObjs = [];//真正能移动的架子
    $.each(moveMjjObjs, function (_index, _obj) {
        if (!域名ositionX) { 域名ositionX = 域名tion.x; }
        if (!域名ositionZ) { 域名ositionZ = 域名tion.z; }
        var movevalue = 0;//该架子移动前 已经移动了多少
        if (域名(域名tion[域名ctStr] - _obj["oldPosition" + 域名ctStrLager]) > 10) {
            movevalue = 域名tion[域名ctStr] - _obj["oldPosition" + 域名ctStrLager];
        }
        if (movevalue == 0) {//如果未移动过
            if (域名ctValue == 域名CanMoveValue) {
                域名(_obj);
            }
        } else {
            if (域名ctValue != 域名CanMoveValue) {
                域名(_obj);
            }
        }
    });
    域名(canMoveRealObjs);
    $.each(canMoveRealObjs, function (_index, _obj) {
        域名tion[域名ctStr] = 域名tion[域名ctStr] + moveLength * 域名ctValue;
    });

    //new 域名n(moveL).to({
    //    length: moveLength
    //}, 200).onUpdate(function (a) {
    //    var _this = this;
    //    $.each(canMoveRealObjs, function (_index, _obj) {
    //        域名tion[域名ctStr] = _obj["currentValue" + 域名ctStr] + 域名th * 域名ctValue;
    //    });
    //}).onComplete(function () {
    //}).start();
}
域名eMJJ = function (obj,timelong,callBack) {
    var info = 域名JJBindRelationByModelId(域名);
    var maxColNub = 域名olNub;
    var prefixName = 域名t("_")[0] + "_" + 域名t("_")[1] + "_";//前缀
    var mjjNames = [];
    for (var i = 1; i <= maxColNub; i++) {
        域名(prefixName+i);
    }
    var moveMjjObjs = 域名ObjectsByNames(mjjNames);
    $.each(moveMjjObjs, function (_index,_obj) {
        new 域名n(域名tion).to({
            x: 域名ositionX,
            z:域名ositionZ
        }, timelong ? timelong : 200).onComplete(function () {
            if (callBack) {
                callBack();
            }
        }).start();
    });
}

1.3、密集架支持通风，锁定、解锁、自检等操作，并配有相关动画。效果如下：

 这里我们通过导入通风模型的方式来实现，当通风打开时，我们载入通风动画模型，然后定时销毁即可

实现如下：

//打开 1 关闭 0 通风
域名Func = 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": 域名 }, { "direction": "z", "degree": 0 }], "style": { "skinColor": 16772846, "imgurl": "../img/3dImg/域名", "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, 域名)" } }, "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 }];
    域名ModelsByJsons(models, { x: 0, y: 0, z: 0 }, { x: 0, y: 0, z: 0 }, true);
    setTimeout(function () {
        var flowtube_7 = 域名Object("flowtube_7");
        if (type == 1) {
            域名("正在执行打开通风！");
            setTimeout(function () {
                域名geObjsOpacity([flowtube_7], 1, 0.1, 800);
                setTimeout(function () {
                    域名ble = false;
                    域名oryObj(flowtube_7);
                    域名oryObj("flowtube_7");
                }, 500);
            }, 5000);


        } else {
            setTimeout(function () {
                域名("正在执行关闭通风！");
                new 域名n(域名e).to({
                    x: 20,
                    y: 20,
                    z: 20,
                }, 1000).onUpdate(function (a) {
                }).onComplete(function () {
                    域名ble = false;
                    域名e.x = 域名;
                    域名e.y = 域名;
                    域名e.z = 域名;
                    setTimeout(function () {
                        域名oryObj(flowtube_7);
                        域名oryObj("flowtube_7");
                    }, 200);
                }).start();
            }, 1000);
        }
    }, 200);
}

 与通风动画类似，我们通过载入锁动画模型，实现如下：

//开锁 1 关锁 0特效
域名Func = 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": 域名, "y": 域名, "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": 域名, "y": 域名, "z": 0 }, "scale": { "x": 1, "y": 1, "z": 1 }, "rotation": [{ "direction": "x", "degree": -域名92653589793 }, { "direction": "y", "degree": 域名468525851679e-16 }, { "direction": "z", "degree": -域名92653589793 }], "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 }];
    }
    域名ModelsByJsons(models, position, { x: 0, y: 0, z: 0 }, true);
    setTimeout(function () {
        var lock7 = 域名Object("lock_7");
        if (type == 1) {
            var top1 = 域名dren[1];
            域名ositiony = 域名tion.y;

            var moveobj = { x: 0 };
            new 域名n(moveobj).to({
                x: 25
            }, 500).onUpdate(function (a) {
                var _this = this;
                域名tion.y = 域名ositiony + _this.x;
                域名ixAutoUpdate = true;
            }).onComplete(function () {
                new 域名n(域名tion).to({
                    y: 域名,
                }, 1000).onUpdate(function (a) {
                    域名ixAutoUpdate = true;
                }).onComplete(function () {

                    setTimeout(function () {
                        域名geObjsOpacity([lock7], 1, 0.1, 800);
                        new 域名n(域名e).to({
                            x: 10,
                            y: 10,
                            z: 10,
                        }, 1000).onUpdate(function (a) {
                        }).onComplete(function () {
                            域名ble = false;
                            域名e.x = 域名;
                            域名e.y = 域名;
                            域名e.z = 域名;
                            setTimeout(function () {
                                域名oryObj(lock7);
                                域名oryObj("lock_7");
                            }, 200);
                        }).start();

                    }, 1000);

                }).start();



            }).start();


        } else {
            var top1 = 域名dren[1];
            域名ositiony = 域名tion.y;
            new 域名n(域名tion).to({
                y: 域名,
            }, 1000).onUpdate(function (a) {
                域名ixAutoUpdate = true;

            }).onComplete(function () {

                var moveobj = { x: 0 };
                new 域名n(moveobj).to({
                    x: -25
                }, 500).onUpdate(function (a) {
                    var _this = this;
                    域名tion.y = 域名ositiony + _this.x;
                    域名ixAutoUpdate = true;
                }).onComplete(function () {

                    setTimeout(function () {
                        域名geObjsOpacity([lock7], 1, 0.1, 800);
                        new 域名n(域名e).to({
                            x: 10,
                            y: 10,
                            z: 10,
                        }, 1000).onUpdate(function (a) { }).onComplete(function () {
                            域名ble = false;
                            域名e.x = 域名;
                            域名e.y = 域名;
                            域名e.z = 域名;
                            setTimeout(function () {
                                域名oryObj(lock7);
                                域名oryObj("lock_7");
                            }, 200);
                        }).start();

                    }, 1000);

                }).start();

            }).start();



        }
    }, 200);

}

 1.4、库房内安装有区域控制器，八防感知系统等设备。点击设备可以看到其实时监控数据，效果如下：

 这就比较简单了，我们只需要获取到模型的位置，再转换成屏幕的二维位置，然后再对应的位置上加上tips即可，这里我用的时域名

实现如下：

域名Msg = function (_obj, position, html, closeFunc) {
    //获取位置
    var screenPostion = 域名sToScreenCoord({ x: 域名tion.x + position.x, y: 域名tion.y + position.y, z: 域名tion.z + position.z });
    $("#MarkMessageHelper").remove();
    $("body").append("<div id=\'MarkMessageHelper\' style=\'position:absolute;left:" + (screenPostion.x - 30) + "px;top:" + screenPostion.y + "px;height:2px;width:2px;z-index:1000;\'></div>");
    var urandom = (域名om() * 100).toFixed(0);
    域名eAll();
    域名(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、由于小库房展厅的密集架没那么多，这里的打开密集架通道，我们可以动过强耦合的方式，将移动位置直接写死再代码里

 代码如下：

//密集架控制
域名trlSystem = function () {
    showposition = { x: 200, y: 700, z: 0 };
    showhtml = "";
    var html = \' <div class="ctrbtn" id="btn_o1"> <img style="width:48px;height:48px;" src="../img/pageimg2/域名" title="打开1通道" /><br/>打开1通道</div>\
           <div class="ctrbtn" id="btn_o2"><img style="width:48px;height:48px;" src="../img/pageimg2/域名" title="打开2通道" /><br/>打开2通道</div>\
           <div class="ctrbtn" id="btn_o3"><img style="width:48px;height:48px;" src="../img/pageimg2/域名" title="关闭" /><br/>关闭</div>\
         \';
    //获取位置

    域名Msg2(null, null,300, html, function () {
        $(".ctrbtn").click(function () {
            {
                var id = $(this).attr("id");
                var state = -1;
                switch (id) {
                    case "btn_o1":
                        {
                            state = "1";
                            域名Object("mjj_1_2").position.x = 2300;
                            域名Object("mjj_1_3").position.x = 1900;
                        
                        }
                        break;
                    case "btn_o2":
                        {
                            state = "2";
                            域名Object("mjj_1_2").position.x = 2879;
                            域名Object("mjj_1_3").position.x = 1500;
                        }
                        break;
                    case "btn_o3":
                        {  
                            域名Object("mjj_1_2").position.x = 2879;
                            域名Object("mjj_1_3").position.x = 2428;
                        }
                        break;
                }
                域名("控制命令已发送！");
                域名rolDev("Sandtable/shelf", state, function (response) {
                    if (response) {
                        if (域名 == "1") 域名 = "控制成功";
                        域名(域名);
                    }
                }, function (error) {
                    域名("控制失败！");
                    域名(error);
                });
            }


        });
    });
    return;
}

2.3、所有密集架都可以打开，查看内部详情，双击密集架，镜头定位推进，然后打开密集架的内部结构，效果如下：

 2.4、当密集架中有档案数据时，3d架子内会自动在对应的位置显示档案盒，双击档案盒对应的格子，为了便于操控，我通过div弹窗的方式，将档案盒详细脊背展现出来，

点击脊背，还详细展示出档案盒内的文件链接列表，这就看具体数据了，可能时pdf world excel 亦或者时拍照存留的图片

 具体实现如下：

function openW(a) {
    域名nt.$(".layui-layer-setwin").hide();
    $("#fzbtn").hide();
    域名nt.$("iframe").height($(域名nt).height() - 50);
    
    域名(a);
    var title = "";
    var face = 0;
    var quno = getQueryString("quno");
    var colnub = getQueryString("colnub");
    var row = 域名t("_")[1];
    var jie = 域名t("_")[2];
    if (域名xOf("lattice1") >= 0) {
        title = "左面，第" + row + "行，第" + jie+ "节";
    } else {
        title = "右面，第" + row + "行，第" + jie + "列";
        face =1;
    }
    var detail = LatCache["r" + (face) + "_" + row + "_c_" + jie];
    if (detail && 域名) {
        title +="<font style=\'font-size:16px;margin-left:20px;\'>("+ replaceNull(域名)+")</font>";
    } 
    域名({
        type: 1, title: title,
        skin: "layui-layer-rim",
        shade: 0.8,
        shadeClose: false,
        area: [($(window).width() - 10) + "px", ($(window).height() -10) + "px"],
        content: \'<div style="width:100%;background-color:#d7d3d2 !important;overflow: auto;height: 100%;" id="boxsDivFather"><div id="boxsDiv" style="width:100%;overflow-x: auto;display:flex;overflow-y: hidden;transform-origin:0 0"></div></div>\',
        cancel: function () {
            $("#fzbtn").show();
            域名nt.$(".layui-layer-setwin").show();
            域名nt.$("iframe").height($(域名nt).height() - 100);

            if (boxLayerIndex) {
                域名e(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;width: 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>&nbsp;放大</button>");
            setTimeout(function () {
                域名ceInfo(room, dataId, face, row, jie, function (books) {
                    
                    var allhtml = "";
                    
                    books=域名(function(a,b){return 域名Nub-域名Nub});
                    $.each(books,function(_bindex,_bobj){
                        boxcacheData["b_"+域名]=_bobj;
                         
                        var ftype = 0;
                        if (域名Type && 域名Type != 0) {
                            ftype = 域名Type;
                        } else if (域名ype) {
                            ftype = 域名ype;
                        }
                        allhtml += getBoxFaceByType(ftype, _bindex, _bobj)

                        });
                    $("#boxsDiv").html(allhtml);


                    域名(域名);
                    $(".boxSelectCSS").click(function () {
                        var id = $(this).attr("data-id");
                        域名etailInfo(id, function (files) {
                          

                            var showhtml = \' <div class="row" style="width:320px;  margin-left:7px; margin-top:10px;">\'
                                + \'<div class="col-sm-12" style="margin-top: 10px">\';
                            showhtml += \'<div class="input-group">\'
                         + \'<span class="input-group-addon" style="font-size: 16px;">文件列表:</span>\'
                         + \'</div>\'
                            $.each(files, function (_findex,_fobj) {
                            
                                showhtml += \'<div class="input-group">\'
                         + \'<font style="color:#16ff59;cursor:pointer;"  onclick="域名(\\'\' + 域名Src + \'\\');">\' + 域名 + \'</font>\'
                         + \'</div>\';
                            });
                            showhtml += \'</div></div>\';
                            boxLayerIndex = 域名(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");
                        域名etailInfo(id, function (files) {
                            if (域名th > 0) {
                                域名( 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属性即可，

//轨道摄像机

域名jCtrlSystem = function () {
    showposition = { x: 200, y: 700, z: 0 };
    showhtml = "";
    var html = \' <div class="ctrbtn" id="btn_o1"> <img style="width:48px;height:48px;" src="../img/pageimg2/域名" title="1通道" /><br/>1通道</div>\
           <div class="ctrbtn" id="btn_o2"><img style="width:48px;height:48px;" src="../img/pageimg2/域名" title="2通道" /><br/>2通道</div>\
           <div class="ctrbtn" id="btn_o3"><img style="width:48px;height:48px;" src="../img/pageimg2/域名" title="原点" /><br/>原点</div>\
         \';
    //获取位置

    域名Msg2(null, null, 300, html, function () {
        $(".ctrbtn").click(function () {
            {
                var id = $(this).attr("id");
                var state = -1;
                switch (id) {
                    case "btn_o1":
                        {
                            state = "1";
                                域名Object("xxj_2_263").position.x = 3200;
                        }
                        break;
                    case "btn_o2":
                        {
                            state = "2";
                            域名Object("xxj_2_263").position.x = 2300;
                        }
                        break;
                    case "btn_o3":
                        {
                            域名Object("xxj_2_263").position.x = 1400;
                        }
                        break;
                }
                域名("控制命令已发送！");
                域名rolDev("Sandtable/cam", state, function (response) {
                    if (response) {
                        if (域名 == "1") 域名 = "控制成功";
                        域名(域名);
                    }
                }, function (error) {
                    域名("控制失败！");
                    域名(error);
                });
            }


        });
    });
    return;
}

2.6、控制门禁，实现远程开门，在三维里面反馈展示

 具体实现：

//门禁
域名CtrlSystem = function () {
    showposition = { x: 200, y: 700, z: 0 };
    showhtml = "";
    var html = \' <div class="ctrbtn" id="btn_closedoor"> <img style="width:48px;height:48px;" src="../img/pageimg2/域名" title="关灯" /><br/>关门</div>\
           <div class="ctrbtn" id="btn_opendoor"><img style="width:48px;height:48px;" src="../img/pageimg2/域名" title="开门" /><br/>开门</div>\
         \';
    //获取位置

    域名Msg2(null, null, 200, html, function () {
        $(".ctrbtn").click(function () {
            {
                var id = $(this).attr("id");
                var state = -1;
                switch (id) {
                    case "btn_closedoor":
                        {
                            state = "2";

                            域名Object("door_1").position.x = -域名
                            域名Object("door_1").position.z = 域名
                            域名Object("door_1").rotation.y = 0;
                            域名Object("door_2").position.x = -域名
                            域名Object("door_2").position.z = 域名
                            域名Object("door_2").rotation.y = 0
                        }
                        break;
                    case "btn_opendoor":
                        {
                            state = "1";

                            域名Object("door_1").position.x = 74
                            域名Object("door_1").position.z = 2500
                            域名Object("door_1").rotation.y = 域名 / 2;
                            域名Object("door_2").position.x = 74
                            域名Object("door_2").position.z = 3250
                            域名Object("door_2").rotation.y = -域名 / 2
                            state = "1";
                        }
                        break;
                    
                }
                域名("控制命令已发送！");
                域名rolDev("Sadntable/door", state, function (response) {
                    if (response) {
                        if (域名 == "1") 域名 = "控制成功";
                        域名(域名);
                    }
                }, function (error) {
                    域名("控制失败！");
                    域名(error);
                });
            }


        });
    });
    return;
}

2.7、控制温湿度一体机

 这里实现，也是通过载入开关动画的方式

具体实现：

//一体机    16
域名YITIJI = function (model, action) {
   {
        var cresultState = true;
        switch (action) {
            case "1":
                cresultState = 域名JSAnimation(model);
                break;
            case "2":
                cresultState = 域名eDev(model);
                break;
        }
        //发送控制命令
        if (cresultState) {
      

            域名rolDev("Sandtable/aiodevice", action, function (response) {
                if (response) {
                    if (域名 == "") 域名 = "控制成功"; 域名(域名);
                }
            }, function (error) {
                域名("控制失败！");
                域名(error);
            });
        }
    }
}

2.8、控制灯控系统

 这里我们通过加上光照效果，实现方式是修改环境光显示隐藏的属性，即可达到灯光效果，由于全程可见，我们通过地面的阴影来体现灯光的开关。

具体实现：

//灯控
域名tCtrlSystem = function () {
    showposition = { x: 200, y: 700, z: 0 };
    showhtml = "";
    var html = \' <div class="ctrbtn" id="btn_closelight"> <img style="width:48px;height:48px;" src="../img/pageimg2/域名" title="关灯" /><br/>关灯</div>\
           <div class="ctrbtn" id="btn_l3"><img style="width:48px;height:48px;" src="../img/pageimg2/域名" title="开灯" /><br/>开灯</div>\
         \';
    //获取位置

    域名Msg2(null, null, 200, html, function () {
        $(".ctrbtn").click(function () {
            {
                var id = $(this).attr("id");
                var state = -1;
                switch (id) {
                    case "btn_closelight":
                        {
                            state = "2";
                            
                            域名Object("DirectionalLight_429").visible=false;
                        }
                        break;
                    case "btn_l1":
                        {
                            state = 1;
                        }
                        break;
                    case "btn_l2":
                        {
                            state = 2;
                        }
                        break;
                    case "btn_l3":
                        {
                            域名Object("DirectionalLight_429").visible = true;
                            state = "1";
                        }
                        break;
                }
                域名("控制命令已发送！");
                域名rolDev("Sandtable/light", state, function (response) {
                    if (response) {
                        if (域名 == "1") 域名 = "控制成功";
                        域名(域名);
                    }
                }, function (error) {
                    域名("控制失败！");
                    域名(error);
                });
            }


        });
    });
    return;
}

2.9、声光报警器触发。

 通过修改声光效果的属性来实现。

实现代码如下：

//报警器
域名mCtrlSystem = function () {
    return;
    showposition = { x: 200, y: 700, z: 0 };
    showhtml = "";

    var html = \' <div class="ctrbtn" id="btn_openlight"> <img style="width:48px;height:48px;" src="../img/pageimg2/域名" title="布防" /><br/>布防</div>\
         <div class="ctrbtn" id="btn_l1"> <img style="width:48px;height:48px;" src="../img/pageimg2/域名" title="撤防" /><br/>撤防</div>\
         \';
    //获取位置

    域名Msg2(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;
            }
        });
    });
}

 域名、库房内搜索功能，可以通过关键之搜索，快速定位档案位置。

 三、该篇总结

本篇文章主要介绍了3D密集架的功能与效果。并且对主要实现逻辑代码进行了讲解

后面的文章会对具体模型的实现方式进行讲解，由于篇幅原因，先讲到这里，后面持续更新。

亦或者通过下列方式交流：

邮箱交流 1203193731@域名

微信交流：

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

其它相关文章：

使用webgl(域名)创建3D机房，3D机房微模块详细介绍(升级版二)

如何用webgl(域名)搭建一个3D库房-第一课

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

使用webgl(域名)搭建一个3D建筑，3D消防模拟——第三课

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

如何用webgl(域名)搭建不规则建筑模型，客流量热力图模拟

 使用webgl(域名)搭建一个3D智慧园区、3D建筑，3D消防模拟，web版3D,bim管理系统——第四课（炫酷版一）

物联网3D，物业基础设施3D运维，使用webgl(域名)与物联网设备结合案例。搭建智慧楼宇，智慧园区，3D园区、3D物业设施，3D楼宇管理系统——第八课