如何基于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.object.name;
if (selectname.indexOf("PathLine_") >= 0) {
var lineindex = parseInt(selectname.split("OBJCREN").replace("PathLine_", ""));
modelbusiness.movePathIndex = lineindex;
if (selectname.indexOf("OBJCREN1") >= 0) {
if (lineindex == 0) {
var startPoint = modelbusiness.pathLineData.position;
var endPiint = modelbusiness.pathLineData.position
modelbusiness.addMoveLengthLine("tempLine", startPoint, endPiint, true);
} else {
//删除前一条线
msj3DObj.destoryObj("PathLine_" + (lineindex-1));
//删除当前线
msj3DObj.destoryObj("PathLine_" + (lineindex));
var startPoint = modelbusiness.pathLineData.position;
var endPiint = modelbusiness.pathLineData.position
modelbusiness.addMoveLengthLine("tempLine", startPoint, endPiint, true);
var startPoint = modelbusiness.pathLineData.position;
var endPiint = modelbusiness.pathLineData.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.position;
var endPiint = modelbusiness.pathLineData.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).stop();
modelbusiness.people.mixer.clipAction(modelbusiness.people.oldGLTFObj.animations).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机房管线问题（机房升级版）-第九课（一）
来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！
页:
[1]