登录/ 注册
 找回密码
 立即注册
关闭

CSDN热搜

程序园 精品问答 技术交流 资源下载
返回列表 发新帖
首页 › 业界区 › 业界 ›如何基于three.js(webgl)引擎架构，实现3D密集架库房,3D ...

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

吕梓美 前天 21:45
　  前言：
　　看了一下 距离上篇课程发布，一年多了。这一年多来也迷茫，也怀疑，在AI时代，是不是失去了写文章的意义了。切身感受到那种面对科技浪潮时的迷茫和无力感。当AI能写出流畅、结构清晰的文章，甚至模仿不同风格时，着实令人沉思。
　　继续更新，是否即将失去意义？这种困惑很真实，但也值得重新审视写文章的本质。经过这段时间的思考挖掘，突然明白了，“写文章”的意义远恐怕不止于此，AI 难以真正替代的核心价值在于，独一无二的“人”的视角与洞见；‌个体经验与情感；批判性思维与立场。
　　情感共鸣与连接，‌自我探索与‌表达欲都是继续更新的意义与动力吧。
　　我们还是闲话少叙，切入正题。书接上回，我们聊到智能档案库房的机器人巡检，盘点等。这里我们继续讲解巡检路径规划等内容。
　序：
　　当档案库房突破二维平面，在虚拟空间中拔地而起时，传统的巡检方式正面临前所未有的挑战。蜿蜒的立体货架、交错的消防通道、分层的温控区域，构成了一个需要重新定义巡检规则的数字迷宫。
　　接下来将以"空间认知-路径建模-动态优化"为逻辑主线。通过三维建模技术，构建数字孪生库房的基础坐标系；继而引入蚁群算法、遗传算法等智能路径规划工具，解决多目标约束下的最优路径求解问题；实现从理论到实践的闭环验证。
　　下面我们探讨并如何利用三维编辑技术，规划人工巡检路径规划的运作流程。
　　一、建模
　　1.1、效果展示
　　　　1.1.1、园区楼宇展示
1.gif

 楼宇园区建模，主旨就是好看，炫酷。
　　　　1.1.2、楼层展示
2.gif

 楼层采用爆炸方式展开，方便用户选择楼层
　　　　1.1.3、档案室展示
3.gif

 可选择楼层双击进入楼层库房
4.gif

 
　　　　1.1.4、档案查看展示
5.gif

 
　二、添加管理设备
　　　　2.1、添加管理效果展示
6.gif

 
2.2、实现说明
　　　　　支持编辑场景模型，支持拖拽、旋转、删除等功能。系统内置不同设备类型模型，用户可以自定义添加场景中设备模型的数量，以及绑定数据关系。便于后期巡检期间检查该设备状态以及数据等。
　　　　
  1. function () {
  2.             var devparams = JSON.stringify(getDevSaveDatas());
  3.             var systemName = $("#systemName").val();
  4.             var roomName = $("#roomName").val();
  5.             webapi.setSystemConfig(devparams, systemName, roomName, function (response) {
  6.                 if (response && response.msg && response.msg =="操作成功") {
  7.                     $("#roomTitle").html(roomName);
  8.                     $("#systemTitle").html(systemName);
  9.                 }
  10.             }, function (err) {
  11.             });
  12.             msj3DObj.viewState = 1;
  13.             modelbusiness.editState = "show";
  14.             msj3DObj.transformControl.enabled = false;
  15.             msj3DObj.transformControl.visible = false;
  16.             layer.closeAll();
  17.         },
复制代码
  1. $("#manageBtn").click(function () {
  2.      layer.closeAll();
  3.      manageBoxType();
  4. });
  5. $("#moveBtn").click(function () {
  6.      if (msj3DObj.transformControl && msj3DObj.transformControl.object.name.indexOf("dev_") >= 0) {
  9.          msj3DObj.transformControl.setMode("translate");
  11.      } else {
  12.          layer.msg("请选择具体设备！");
  13.      }
  14. });
  15. $("#raotationBtn").click(function () {
  16.      if (msj3DObj.transformControl && msj3DObj.transformControl.object.name.indexOf("dev_") >= 0) {
  17.          msj3DObj.transformControl.setMode("rotate");
  18.      } else {
  19.          layer.msg("请选择具体设备！");
  20.      }
  21. });
  22. $("#deleteBtn").click(function () {
  23.      if (msj3DObj.transformControl && msj3DObj.transformControl.object.name.indexOf("dev_") >= 0) {
  24.          msj3DObj.destoryObj(msj3DObj.transformControl.object.name);
  25.      } else {
  26.          layer.msg("请选择具体设备！");
  27.      }
  28. });
复制代码
　　
　　　　　　
　三、路径编辑
3.1、巡检路径编辑效果展示
3.1.1、巡检路径规划
7.gif

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

3.2、实现说明
　　　　技术难点在于如何支持添加编辑路径，模型内绘制线路跟随鼠标运动。
　　　　实现代码如下：
　　　　
  1. function (_obj, objs) {
  2.     console.log(_obj);
  3.     console.log(objs);
  4.     //计算出需要移动的线
  5.     if (objs && objs.length > 0) {
  6.         var selectname = objs[0].object.name;
  7.         if (selectname.indexOf("PathLine_") >= 0) {
  8.             var lineindex = parseInt(selectname.split("OBJCREN")[0].replace("PathLine_", ""));
  9.             modelbusiness.movePathIndex = lineindex;
  10.             if (selectname.indexOf("OBJCREN1") >= 0) {
  11.                 if (lineindex == 0) {
  12.                   
  13.                     var startPoint = modelbusiness.pathLineData[1].position;
  14.                     var endPiint = modelbusiness.pathLineData[0].position
  15.                     modelbusiness.addMoveLengthLine("tempLine", startPoint, endPiint, true);
  17.                 } else {
  18.                     //删除前一条线
  19.                     msj3DObj.destoryObj("PathLine_" + (lineindex-1));
  20.                     //删除当前线
  21.                     msj3DObj.destoryObj("PathLine_" + (lineindex));
  23.                     var startPoint = modelbusiness.pathLineData[lineindex - 1].position;
  24.                     var endPiint = modelbusiness.pathLineData[lineindex].position
  25.                     modelbusiness.addMoveLengthLine("tempLine", startPoint, endPiint, true);
  28.                     var startPoint = modelbusiness.pathLineData[lineindex+1].position;
  29.                     var endPiint = modelbusiness.pathLineData[lineindex].position
  30.                     modelbusiness.addMoveLengthLine("tempLine_2", startPoint, endPiint, true);
  31.                 }
  33.             } else if (selectname.indexOf("OBJCREN2") >= 0) {
  34.                 msj3DObj.destoryObj("PathLine_" + (lineindex));
  35.                 modelbusiness.movePathIndex = lineindex+1;
  36.               
  37.                 var startPoint = modelbusiness.pathLineData[modelbusiness.pathLineData.length-2].position;
  38.                 var endPiint = modelbusiness.pathLineData[modelbusiness.pathLineData.length - 1].position
  39.                 modelbusiness.addMoveLengthLine("tempLine", startPoint, endPiint, true);
  40.             }
  42.         }
  43.     }
  44. }
复制代码
 
　四、巡检执行
4.1、执行效果
安装规划的路径，可选择第一人称，第三人称效果去巡查节点上的设备状态以及数据。
4.1.1、第三人称巡检
9.gif

4.1.2、第一人称巡检
10.gif

 
4.1.3、日巡检计划管理
规划每天的巡检计划，到点时，自动安装规划的巡检路径巡检。
11.gif

 
4.2、实现说明
　　巡检执行，跟上篇文章的实现方式类似，人物安装指定路径行走，到绑定的设备节点时，停下检查设备数据与状态即可
　　部分代码如下：
  1. odelBusiness.prototype.peopleWalkVRate = 40;//人物行走速度
  2. ModelBusiness.prototype.doRouteType = 1;//3第三   1 第一
  3. ModelBusiness.prototype.routeData = [];//3第三   1 第一
  4. //第三人称巡检
  5. ModelBusiness.prototype.doThirdPersonRoute = function () {
  6.     if (this.runState == 1) {
  7.         layer.msg("正在执行巡检，请先结束巡检");
  8.         return;
  9.     }
  10.     $("#routeDataList").html(""); $("#routeDataList").show();
  11.     this.showPeople();
  12.     this.runState = 1;
  13.     this.doRouteType = 3;
  14.     this.routeData = [];
  15.     this.doRouteRunStep(0, this.pathLineData);
  16. }
  17. //第一人称巡检
  18. ModelBusiness.prototype.doFirstPersonRoute = function () {
  19.     if (this.runState == 1) {
  20.         layer.msg("正在执行巡检，请先结束巡检");
  21.         return;
  22.     }
  23.     $("#routeDataList").html(""); $("#routeDataList").show();
  24.     this.showPeople();
  25.     this.doRouteType = 1;
  26.     this.routeData = [];
  27.     this.runState = 1;
  28.     this.doRouteRunStep(0, this.pathLineData,true);
  29. }
  30. //停止巡检
  31. ModelBusiness.prototype.stopRoute = function () {
  33.     $("#routeDataList").hide();
  34.     $("#routeDataList").html("");
  36.     this.runState = 0
  37.     if (modelbusiness.currentSetTimeOut) {
  38.         clearTimeout(modelbusiness.currentSetTimeOut)
  39.     }
  40.     if (modelbusiness.people&&modelbusiness.people._tween) {
  41.         modelbusiness.people._tween.stop();
  42.         modelbusiness.people.visible = false;
  43.         modelbusiness.people.position.y = 1000000;
  45.         modelbusiness.people.mixer.clipAction(modelbusiness.people.oldGLTFObj.animations[1]).stop();
  46.         modelbusiness.people.mixer.clipAction(modelbusiness.people.oldGLTFObj.animations[0]).play();
  47.     }
  48.     msj3DObj.commonFunc.changeCameraPosition(modelbusiness.defaultState.camera, modelbusiness.defaultState.target
  49.         , 100, function () {
  50.         });
  51. }
复制代码
 
如果你有什么要交流的心得 可邮件我 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机房管线问题（机房升级版）-第九课（一）

来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！

使用道具 举报
相关推荐
B Color Image Link Quote Code Smilies
您需要登录后才可以回帖 登录 | 立即注册
发帖
吕梓美
前天 21:45

0

粉丝关注

12

主题发布

板块介绍填写区域，请于后台编辑
微信扫一扫