如何基于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 () {
        });
}

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

其它相关文章:

如何基于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机房管线问题(机房升级版)-第九课(一)

相关推荐
ak啊2 天前
WebGL魔法:从立方体到逼真阴影的奇妙之旅
前端·webgl
ak啊3 天前
WebGL入门指南:从零构建你的第一个3D应用
前端·webgl
supermapsupport4 天前
SuperMap GIS基础产品FAQ集锦(20250603)
服务器·数据库·webgl·supermap·idesktop
gis分享者4 天前
学习threejs,交互式神经网络可视化
神经网络·可视化·threejs·filmpass·effectcomposer·unrealbloompass·outputpass
爱看书的小沐5 天前
【小沐杂货铺】基于Three.JS构建IFC模型浏览器(WebGL、CAD、Revit、IFC)
javascript·webgl·three.js·bim·ifc·revit·ifc.js
xhload3d5 天前
图扑软件 | 带你体验 Low Poly 卡通三维世界
物联网·3d·智慧城市·html5·webgl·数字孪生·可视化·工业互联网·三维建模·工控·轻量化·中国风·卡通动画·写实风格·科技风·low poly
爱看书的小沐5 天前
【小沐杂货铺】基于Three.JS绘制太阳系Solar System(GIS 、WebGL、vue、react,提供全部源代码)第2期
javascript·vue.js·gis·webgl·three.js·地球·earth
lqj_本人5 天前
鸿蒙OS&UniApp集成WebGL:打造跨平台3D视觉盛宴#三方框架 #Uniapp
uni-app·harmonyos·webgl