如何基于three.js(webgl)引擎架构，实现3D密集架库房,3D档案室智能巡检

　  前言：

　　看了一下 距离上篇课程发布，一年多了。这一年多来也迷茫，也怀疑，在AI时代，是不是失去了写文章的意义了。切身感受到那种面对科技浪潮时的迷茫和无力感。当AI能写出流畅、结构清晰的文章，甚至模仿不同风格时，着实令人沉思。

　　继续更新，是否即将失去意义？这种困惑很真实，但也值得重新审视写文章的本质。经过这段时间的思考挖掘，突然明白了，“写文章”的意义远恐怕不止于此，AI 难以真正替代的核心价值在于，独一无二的“人”的视角与洞见；‌个体经验与情感；批判性思维与立场。

　　情感共鸣与连接，‌自我探索与‌表达欲都是继续更新的意义与动力吧。

　　我们还是闲话少叙，切入正题。书接上回，我们谈聊到智能档案库房的机器人巡检，盘点等。这里我们继续讲解巡检路径规划等内容。

　序：

　　当档案库房突破二维平面，在虚拟空间中拔地而起时，传统的巡检方式正面临前所未有的挑战。蜿蜒的立体货架、交错的消防通道、分层的温控区域，构成了一个需要重新定义巡检规则的数字迷宫。

　　接下来将以"空间认知-路径建模-动态优化"为逻辑主线。通过三维建模技术，构建数字孪生库房的基础坐标系；继而引入蚁群算法、遗传算法等智能路径规划工具，解决多目标约束下的最优路径求解问题；实现从理论到实践的闭环验证。

　　下面我们探讨并如何利用三维编辑技术，规划人工巡检路径规划的运作流程。

　　一、建模

　　1.1、效果展示

　　　　1.1.1、园区楼宇展示

楼宇园区建模，主旨就是好看，炫酷。

　　　　1.1.2、楼层展示

楼层采用爆炸方式展开，方便用户选择楼层

　　　　1.1.3、档案室展示

可选择楼层双击进入楼层库房

　　　　1.1.4、档案查看展示

　二、添加管理设备

　　　　2.1、添加管理效果展示

2.2、实现说明

　　　　　支持编辑场景模型，支持拖拽、旋转、删除等功能。系统内置不同设备类型模型，用户可以自定义添加场景中设备模型的数量，以及绑定数据关系。便于后期巡检期间检查该设备状态以及数据等。

　　　　

function () {
            var devparams = JSON.stringify(getDevSaveDatas());
            var systemName = $("#systemName").val();
            var roomName = $("#roomName").val();
            webapi.setSystemConfig(devparams, systemName, roomName, function (response) {
                if (response && response.msg && response.msg =="操作成功") {
                    $("#roomTitle").html(roomName);
                    $("#systemTitle").html(systemName);
                }
            }, function (err) {
            });
            msj3DObj.viewState = 1;
            modelbusiness.editState = "show";
            msj3DObj.transformControl.enabled = false;
            msj3DObj.transformControl.visible = false;
            layer.closeAll();
        },

 $("#manageBtn").click(function () {
     layer.closeAll();
     manageBoxType();
 });
 $("#moveBtn").click(function () {
     if (msj3DObj.transformControl && msj3DObj.transformControl.object.name.indexOf("dev_") >= 0) {

         msj3DObj.transformControl.setMode("translate");

     } else {
         layer.msg("请选择具体设备！");
     }
 });
 $("#raotationBtn").click(function () {
     if (msj3DObj.transformControl && msj3DObj.transformControl.object.name.indexOf("dev_") >= 0) {
         msj3DObj.transformControl.setMode("rotate");
     } else {
         layer.msg("请选择具体设备！");
     }
 });
 $("#deleteBtn").click(function () {
     if (msj3DObj.transformControl && msj3DObj.transformControl.object.name.indexOf("dev_") >= 0) {
         msj3DObj.destoryObj(msj3DObj.transformControl.object.name);
     } else {
         layer.msg("请选择具体设备！");
     }
 });

　　

　　　　　　

　三、路径编辑

3.1、巡检路径编辑效果展示

3.1.1、巡检路径规划

 3.1.2、巡检路径编辑

巡检路径编辑，可以修改原来的路径，以及绑定节点的巡检设备。

3.2、实现说明

　　　　技术难点在于如何支持添加编辑路径，模型内绘制线路跟随鼠标运动。

　　　　实现代码如下：

　　　　

 function (_obj, objs) {
    console.log(_obj);
    console.log(objs);
    //计算出需要移动的线
    if (objs && objs.length > 0) {
        var selectname = objs[0].object.name;
        if (selectname.indexOf("PathLine_") >= 0) {
            var lineindex = parseInt(selectname.split("OBJCREN")[0].replace("PathLine_", ""));
            modelbusiness.movePathIndex = lineindex;
            if (selectname.indexOf("OBJCREN1") >= 0) {
                if (lineindex == 0) {

                    var startPoint = modelbusiness.pathLineData[1].position;
                    var endPiint = modelbusiness.pathLineData[0].position
                    modelbusiness.addMoveLengthLine("tempLine", startPoint, endPiint, true);

                } else {
                    //删除前一条线
                    msj3DObj.destoryObj("PathLine_" + (lineindex-1));
                    //删除当前线
                    msj3DObj.destoryObj("PathLine_" + (lineindex));

                    var startPoint = modelbusiness.pathLineData[lineindex - 1].position;
                    var endPiint = modelbusiness.pathLineData[lineindex].position
                    modelbusiness.addMoveLengthLine("tempLine", startPoint, endPiint, true);

                    var startPoint = modelbusiness.pathLineData[lineindex+1].position;
                    var endPiint = modelbusiness.pathLineData[lineindex].position
                    modelbusiness.addMoveLengthLine("tempLine_2", startPoint, endPiint, true);
                }

            } else if (selectname.indexOf("OBJCREN2") >= 0) {
                msj3DObj.destoryObj("PathLine_" + (lineindex));
                modelbusiness.movePathIndex = lineindex+1;

                var startPoint = modelbusiness.pathLineData[modelbusiness.pathLineData.length-2].position;
                var endPiint = modelbusiness.pathLineData[modelbusiness.pathLineData.length - 1].position
                modelbusiness.addMoveLengthLine("tempLine", startPoint, endPiint, true);
            }

        }
    }
} 

　四、巡检执行

4.1、执行效果

安装规划的路径，可选择第一人称，第三人称效果去巡查节点上的设备状态以及数据。

4.1.1、第三人称巡检

4.1.2、第一人称巡检

4.1.3、日巡检计划管理

规划每天的巡检计划，到点时，自动安装规划的巡检路径巡检。

4.2、实现说明

　　巡检执行，跟上篇文章的实现方式类似，人物安装指定路径行走，到绑定的设备节点时，停下检查设备数据与状态即可

　　部分代码如下：

odelBusiness.prototype.peopleWalkVRate = 40;//人物行走速度
ModelBusiness.prototype.doRouteType = 1;//3第三   1 第一
ModelBusiness.prototype.routeData = [];//3第三   1 第一
//第三人称巡检
ModelBusiness.prototype.doThirdPersonRoute = function () {
    if (this.runState == 1) {
        layer.msg("正在执行巡检，请先结束巡检");
        return;
    }
    $("#routeDataList").html(""); $("#routeDataList").show();
    this.showPeople();
    this.runState = 1;
    this.doRouteType = 3;
    this.routeData = [];
    this.doRouteRunStep(0, this.pathLineData);
}
//第一人称巡检
ModelBusiness.prototype.doFirstPersonRoute = function () {
    if (this.runState == 1) {
        layer.msg("正在执行巡检，请先结束巡检");
        return;
    }
    $("#routeDataList").html(""); $("#routeDataList").show();
    this.showPeople();
    this.doRouteType = 1;
    this.routeData = [];
    this.runState = 1;
    this.doRouteRunStep(0, this.pathLineData,true);
}
//停止巡检
ModelBusiness.prototype.stopRoute = function () {

    $("#routeDataList").hide();
    $("#routeDataList").html("");

    this.runState = 0
    if (modelbusiness.currentSetTimeOut) {
        clearTimeout(modelbusiness.currentSetTimeOut)
    }
    if (modelbusiness.people&&modelbusiness.people._tween) {
        modelbusiness.people._tween.stop();
        modelbusiness.people.visible = false;
        modelbusiness.people.position.y = 1000000;

        modelbusiness.people.mixer.clipAction(modelbusiness.people.oldGLTFObj.animations[1]).stop();
        modelbusiness.people.mixer.clipAction(modelbusiness.people.oldGLTFObj.animations[0]).play();
    }
    msj3DObj.commonFunc.changeCameraPosition(modelbusiness.defaultState.camera, modelbusiness.defaultState.target
        , 100, function () {
        });
}

如果你有什么要交流的心得 可邮件我 1203193731@qq.com

其它相关文章：

如何基于three.js(webgl)引擎架构，实现3D密集架库房,3D档案室（3d机器人取档、机器人盘点、人工查档、设备巡检）

如何使用webgl(three.js)实现煤矿隧道、井下人员定位、掘进面、纵采面可视化解决方案——第十九课（一）

如何使用webgl(three.js)实现3D消防、3D建筑消防大楼、消防数字孪生、消防可视化解决方案——第十八课（一）

webgl(three.js)3D光伏,3D太阳能能源,3D智慧光伏、光伏发电、清洁能源三维可视化解决方案——第十六课

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

webgl(three.js)实现室内三维定位,3D定位,3D楼宇bim、实时定位三维可视化解决方案——第十四课（定位升级版）

使用three.js(webgl)搭建智慧楼宇、设备检测、数字孪生——第十三课

如何用three.js(webgl)搭建3D粮仓、3D仓库、3D物联网设备监控-第十二课

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

如何用three.js实现数字孪生、3D工厂、3D工业园区、智慧制造、智慧工业、智慧工厂-第十课

使用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管理系统——第六课

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