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

相关推荐
小猪努力学前端4 小时前
基于PixiJS的小游戏广告开发
前端·webgl·游戏开发
光影少年1 天前
WebGIS 和GIS学习路线图
学习·前端框架·webgl
DBBH2 天前
Cesium源码分析之渲染3DTile的一点思考
图形渲染·webgl·cesium.js
Robet2 天前
TS2d渲染引擎
webgl
Robet2 天前
WebGL2D渲染引擎
webgl
goodName3 天前
如何实现精准操控?Cesium模型移动旋转控件实现
webgl·cesium
丫丫7237346 天前
Three.js 模型树结构与节点查询学习笔记
javascript·webgl
allenjiao8 天前
WebGPU vs WebGL:WebGPU什么时候能完全替代WebGL?Web 图形渲染的迭代与未来
前端·图形渲染·webgl·threejs·cesium·webgpu·babylonjs
二川bro8 天前
第59节:常见问题汇编 - 60个典型问题解答
javascript·3d·threejs
mapvthree9 天前
mapvthree Engine 设计分析——二三维一体化的架构设计
webgl·数字孪生·mapvthree·jsapi2d·jsapigl·引擎对比