基于HTML5 WebGL的工业化3D电子围栏

王高文具 發表於 2020-1-9 09:51:00

<h1>前言</h1>
现代工业化的推进在极大加速现代化进程的同时也带来的相应的安全隐患，在传统的可视化监控领域，一般都是基于 Web SCADA 的前端技术来实现 2D 可视化监控，本系统采用 Hightopo 的 HT for Web 产品来构造轻量化的 3D 可视化场景，该 3D 场景从正面展示了一个现代化工厂的现实场景，包括工厂工人的实时位置、电子围栏的范围、现场的安全情况等等，帮助我们直观的了解当前工厂人员的安全状况。
本篇文章通过对工厂可视化场景的搭建和模型的加载，人物实时定位代码的实现、电子围栏和轨迹图的实现进行阐述，帮助我们了解如何通过使用HT实现一个简单的3D电子围栏可视化。
以下是项目地址：基于HTML5 WebGL的工业化3D电子围栏、轨迹图
<h1>效果预览</h1>
<h2>工厂人员实时定位效果及电子围栏效果</h2>
<span class="cke_widget_wrapper cke_widget_inline cke_widget_image cke_image_nocaption cke_widget_selected" data-cke-widget-wrapper="1" data-cke-filter="off" data-cke-display-name="图像" data-cke-widget-id="9"><img class="has cke_widget_element lazyload" alt="" width="712" height="336" src="https://img-blog.csdnimg.cn/20191008222629591.gif" data-cke-widget-data="{&quot;hasCaption&quot;:false,&quot;src&quot;:&quot;https://img-blog.csdnimg.cn/20191008222629591.gif&quot;,&quot;alt&quot;:&quot;&quot;,&quot;width&quot;:&quot;712&quot;,&quot;height&quot;:&quot;336&quot;,&quot;lock&quot;:true,&quot;align&quot;:&quot;none&quot;,&quot;classes&quot;:{&quot;has&quot;:1}}" data-cke-widget-upcasted="1" data-cke-widget-keep-attr="0" data-widget="image" data-src="https://img-blog.csdnimg.cn/20191008222629591.gif"><img class="cke_reset cke_widget_drag_handler lazyload" title="点击并拖拽以移动" alt="" width="15" height="15" data-cke-widget-drag-handler="1" data-src="data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==">
<h2>轨迹图效果图</h2>
<span class="cke_widget_wrapper cke_widget_inline cke_widget_image cke_image_nocaption cke_widget_selected" data-cke-widget-wrapper="1" data-cke-filter="off" data-cke-display-name="图像" data-cke-widget-id="8"><img class="has cke_widget_element lazyload" alt="轨迹图" width="600" height="300" src="https://img-blog.csdnimg.cn/20190922211442170.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTMxNjE0OTU=,size_16,color_FFFFFF,t_70" data-cke-widget-data="{&quot;hasCaption&quot;:false,&quot;src&quot;:&quot;https://img-blog.csdnimg.cn/20190922211442170.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTMxNjE0OTU=,size_16,color_FFFFFF,t_70&quot;,&quot;alt&quot;:&quot;轨迹图&quot;,&quot;width&quot;:&quot;600&quot;,&quot;height&quot;:&quot;300&quot;,&quot;lock&quot;:true,&quot;align&quot;:&quot;none&quot;,&quot;classes&quot;:{&quot;has&quot;:1}}" data-cke-widget-upcasted="1" data-cke-widget-keep-attr="0" data-widget="image" data-src="https://img-blog.csdnimg.cn/20190922211442170.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTMxNjE0OTU=,size_16,color_FFFFFF,t_70"><img class="cke_reset cke_widget_drag_handler lazyload" title="点击并拖拽以移动" alt="" width="15" height="15" data-cke-widget-drag-handler="1" data-src="data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==">
<h1>代码实现</h1>
<h2>人物模型及场景</h2>
项目中使用的人物模型是通过 3dMax 建模生成的，该建模工具可以导出 obj 与 mtl 文件，在 HT 中可以通过解析 obj 与 mtl 文件来生成 3d 场景中的摄像头模型。
项目中场景通过 HT 的 3d 编辑器进行搭建，场景中的模型有些是通过 HT 建模，有些通过 3dMax 建模，之后导入 HT 中。
<h2>绘制电子围栏</h2>
场景中的电子围栏并不是使用3dMax搭建的模型，HT提供了多种基础形体类型供用户建模使用，不同于传统的3D建模方式，HT的建模核心都是基于API的接口方式，通过预定义的图元类型和参数接口，进行设置达到三维模型的构建。根据形状，我将电子围栏分成圆柱、长方体和底部为多边形的棱柱。
<span class="cke_widget_wrapper cke_widget_inline cke_widget_image cke_image_nocaption cke_widget_selected" data-cke-widget-wrapper="1" data-cke-filter="off" data-cke-display-name="图像" data-cke-widget-id="7"><img class="has cke_widget_element lazyload" alt="" width="500" src="https://img-blog.csdnimg.cn/20191008224557612.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTMxNjE0OTU=,size_16,color_FFFFFF,t_70" data-cke-widget-data="{&quot;hasCaption&quot;:false,&quot;src&quot;:&quot;https://img-blog.csdnimg.cn/20191008224557612.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTMxNjE0OTU=,size_16,color_FFFFFF,t_70&quot;,&quot;alt&quot;:&quot;&quot;,&quot;width&quot;:&quot;500&quot;,&quot;height&quot;:&quot;&quot;,&quot;lock&quot;:true,&quot;align&quot;:&quot;none&quot;,&quot;classes&quot;:{&quot;has&quot;:1}}" data-cke-widget-upcasted="1" data-cke-widget-keep-attr="0" data-widget="image" data-src="https://img-blog.csdnimg.cn/20191008224557612.jpg?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTMxNjE0OTU=,size_16,color_FFFFFF,t_70"><img class="cke_reset cke_widget_drag_handler lazyload" title="点击并拖拽以移动" alt="" width="15" height="15" data-cke-widget-drag-handler="1" data-src="data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw==">
以下是我绘制电子围栏的相关伪代码：
<div class="cnblogs_code">
<pre>1 G.makeShapes = function (data, typeName, color, lastColor, g3dDm) {
2 //data是包含电子围栏图形信息的json对象数组
3 let shapes = data;
4 for (let i = 0; i < shapes.length; i++) {
5 let shape = shapes;
6 let type = Number(shape['type']);
7 let x = Number(shape['x']);
8 let y = Number(shape['y']);
9 let z = Number(shape['z']);
 10 let width = Number(shape['width']);
 11 let height = Number(shape['height']);
 12 let tall = Number(shape['tall']);
 13 let radius = Number(shape['radius']);
 14 let vertexX = shape['vertexX'];
 15 let vertexY = shape['vertexY'];
 16 let nodePoints = [];
 17 let p3 = [];
 18 let s3 = [];
 19 let centerX = 0;
 20 let centerY = 0;
 21 let centerZ = 0;
 22 let node = new ht.Node();
 23 node.setTag(typeName + i);
 24 switch (type) {
 25 //第一种形状：圆柱
 26 case 1:
 27 p3 = [-x, tall / 2, -y];
 28 s3 = ;
 29 //定义电子围栏样式
 30 node.s({
 31 "shape3d": "cylinder",
 32 "shape3d.color": color,
 33 "shape3d.transparent": true,
 34 "shape3d.reverse.color": color,
 35 "shape3d.top.color": color,
 36 "shape3d.top.visible": false,
 37 "shape3d.bottom.color": color,
 38 "shape3d.from.color": color,
 39 "shape3d.to.color": color
 40 });
 41 node.p3(p3); //设置三维坐标
 42 node.s3(s3); //设置形状信息
 43 break;
 44 //第二种形状：长方体
 45 case 2:
 46 centerX = x - width / 2;
 47 centerY = y - height / 2;
 48 centerZ = z + tall / 2;
 49 p3 = [-Number(centerX) - width, Number(centerZ), -Number(centerY) - height];
 50 s3 = ;
 51 node.s({
 52 "all.color": color,
 53 "all.reverse.color": color,
 54 "top.visible": false,
 55 "all.transparent": true
 56 });
 57 node.p3(p3);
 58 node.s3(s3);
 59 break;
 60 //第三种形状：底部为不规则形状的等高体
 61 case 3:
 62 let segments = [];
 63 for (let i = 0; i < vertexX.length; i++) {
 64 let x = -vertexX;
 65 let y = -vertexY;
 66 let newPoint = { x: x, y: y };
 67 nodePoints.push(newPoint);
 68 //1: moveTo，占用1个点信息，代表一个新路径的起点
 69 if (i === 0) {
 70 segments.push(1);
 71 }
 72 else {
 73 //2: lineTo，占用1个点信息，代表从上次最后点连接到该点
 74 segments.push(2);
 75 if (i === vertexX.length - 1) {
 76 //5: closePath，不占用点信息，代表本次路径绘制结束，并闭合到路径的起始点
 77 segments.push(5);
 78 }
 79 }
 80 }
 81 node = new ht.Shape();
 82 node.setTag(typeName + i);
 83 node.s({
 84 'shape.background': lastColor,
 85 'shape.border.width': 10,
 86 'shape.border.color': lastColor,
 87 'all.color': lastColor,
 88 "all.transparent": true,
 89 'all.opacity': 0.3,
 90 });
 91 p3 = ['x'], tall / 2, nodePoints['y']];
 92 node.p3(p3);
 93 node.setTall(tall);
 94 node.setThickness(5);
 95 node.setPoints(nodePoints); //node设置点集位置信息
 96 node.setSegments(segments); //node设置点集连接规则
 97 break;
 98 }
 99 g3dDm.add(node);
100 }
101 }</pre>
</div>
 
<div class="cke_widget_wrapper cke_widget_block cke_widget_codeSnippet cke_widget_wrapper_has cke_widget_selected" data-cke-widget-wrapper="1" data-cke-filter="off" data-cke-display-name="代码段" data-cke-widget-id="6">
<pre class="has cke_widget_element" data-cke-widget-data="{&quot;lang&quot;:&quot;javascript&quot;,&quot;code&quot;:&quot;G.makeShapes = function (data, typeName, color, lastColor, g3dDm) {\n //data是包含电子围栏图形信息的json对象数组\n let shapes = data;\n for (let i = 0; i &lt; shapes.length; i++) {\n let shape = shapes;\n let type = Number(shape['type']);\n let x = Number(shape['x']);\n let y = Number(shape['y']);\n let z = Number(shape['z']);\n let width = Number(shape['width']);\n let height = Number(shape['height']);\n let tall = Number(shape['tall']);\n let radius = Number(shape['radius']);\n let vertexX = shape['vertexX'];\n let vertexY = shape['vertexY'];\n let nodePoints = [];\n let p3 = [];\n let s3 = [];\n let centerX = 0;\n let centerY = 0;\n let centerZ = 0;\n let node = new ht.Node();\n node.setTag(typeName + i);\n switch (type) {\n //第一种形状：圆柱\n case 1:\n p3 = [-x, tall / 2, -y];\n s3 = ;\n //定义电子围栏样式\n node.s({\n \&quot;shape3d\&quot;: \&quot;cylinder\&quot;,\n \&quot;shape3d.color\&quot;: color,\n \&quot;shape3d.transparent\&quot;: true,\n \&quot;shape3d.reverse.color\&quot;: color,\n \&quot;shape3d.top.color\&quot;: color,\n \&quot;shape3d.top.visible\&quot;: false,\n \&quot;shape3d.bottom.color\&quot;: color,\n \&quot;shape3d.from.color\&quot;: color,\n \&quot;shape3d.to.color\&quot;: color\n });\n node.p3(p3);    //设置三维坐标\n node.s3(s3);    //设置形状信息\n break;\n //第二种形状：长方体\n case 2:\n centerX = x - width / 2;\n centerY = y - height / 2;\n centerZ = z + tall / 2;\n p3 = [-Number(centerX) - width, Number(centerZ), -Number(centerY) - height];\n s3 = ;\n node.s({\n \&quot;all.color\&quot;: color,\n \&quot;all.reverse.color\&quot;: color,\n \&quot;top.visible\&quot;: false,\n \&quot;all.transparent\&quot;: true\n });\n node.p3(p3);\n node.s3(s3);\n break;\n //第三种形状：底部为不规则形状的等高体\n case 3:\n let segments = [];\n for (let i = 0; i &lt; vertexX.length; i++) {\n let x = -vertexX;\n let y = -vertexY;\n let newPoint = { x: x, y: y };\n nodePoints.push(newPoint);\n //1: moveTo，占用1个点信息，代表一个新路径的起点\n if (i === 0) {\n segments.push(1);\n }\n else {\n //2: lineTo，占用1个点信息，代表从上次最后点连接到该点\n segments.push(2);\n if (i === vertexX.length - 1) {\n //5: closePath，不占用点信息，代表本次路径绘制结束，并闭合到路径的起始点\n segments.push(5);\n }\n }\n }\n node = new ht.Shape();\n node.setTag(typeName + i);\n node.s({\n 'shape.background': lastColor,\n 'shape.border.width': 10,\n 'shape.border.color': lastColor,\n 'all.color': lastColor,\n \&quot;all.transparent\&quot;: true,\n 'all.opacity': 0.3,\n });\n p3 = ['x'], tall / 2, nodePoints['y']];\n node.p3(p3);\n node.setTall(tall);\n node.setThickness(5);\n node.setPoints(nodePoints); //node设置点集位置信息\n node.setSegments(segments); //node设置点集连接规则\n break;\n }\n g3dDm.add(node);\n }\n}&quot;,&quot;classes&quot;:{&quot;has&quot;:1}}" data-cke-widget-upcasted="1" data-cke-widget-keep-attr="0" data-widget="codeSnippet"><code class="language-javascript hljs"> </code></pre>
<img class="cke_reset cke_widget_drag_handler lazyload" title="点击并拖拽以移动" alt="" width="15" height="15" data-cke-widget-drag-handler="1" data-src="data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw=="></div>
考虑到电子围栏在某些情况下可能会影响到对人物位置的观察，设置了隐藏电子围栏的功能。在HT中用户可以自定义设置标签Tag作为模型唯一的标识，我将所有的电子围栏模型的标签前缀都统一并且保存在fenceName中，需要隐藏的时候则遍历所有标签名称前缀为fenceName的模型，并且根据模型种类的不同设置不同的隐藏方式。
以下是相关伪代码：
<div class="cke_widget_wrapper cke_widget_block cke_widget_codeSnippet cke_widget_wrapper_has cke_widget_selected" data-cke-widget-wrapper="1" data-cke-filter="off" data-cke-display-name="代码段" data-cke-widget-id="5">
<div class="cnblogs_code">
<pre> 1 g3dDm.each((data) => {
 2 if (data.getTag() && data.getTag().substring(0, 4) === fenceName) {
 3 if (data.s('all.opacity') === '0') {
 4 data.s('all.opacity', '0.3');
 5 }
 6 else {
 7 data.s('shape3d.visible', true);
 8 data.s('all.visible', true);
 9 data.s("2d.visible", true);
10 data.s("3d.visible", true);
11 }
12 }
13 });</pre>
<img class="cke_reset cke_widget_drag_handler lazyload" style="font-family: "PingFang SC", "Helvetica Neue", Helvetica, Arial, sans-serif; font-size: 14px" title="点击并拖拽以移动" alt="" width="15" height="15" data-cke-widget-drag-handler="1" data-src="data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw=="></div>
</div>
<h3>人物模型实时定位</h3>
因为项目使用的是http协议获取数据，因此使用定时器定时刷新人物数据信息，HT有设置节点位置的setPosition3d方法，因此不做过多介绍，但是人物节点的位置的刷新还包括人物的朝向，因此每次人物移动都需要和上次位置进行比对，计算出偏移的角度。
相关伪代码如下：
<div class="cke_widget_wrapper cke_widget_block cke_widget_codeSnippet cke_widget_wrapper_has cke_widget_selected" data-cke-widget-wrapper="1" data-cke-filter="off" data-cke-display-name="代码段" data-cke-widget-id="4">
<div class="cnblogs_code">
<pre> 1 // 刷新数据的人物结点与原来的人物节点标签相同，则存在做位置更新
 2 if (realInfoData.tagId === tag.getTag()) {
 3 //计算位置朝向偏移参数
 4 let angleNumber = Math.atan2(((-p3) - (-tag.p3())), ((-p3) - (-tag.p3())));
 5 //如果在原地就不转向，判断人物在平面位置是否发生变化
 6 if (p3 !== tag.p3() || p3 !== tag.p3()) {
 7 if (angleNumber > 0) {
 8 angleNumber = Math.PI - angleNumber;
 9 } else {
10 angleNumber = -Math.PI - angleNumber;
11 }
12 //设置人物朝向
13 tag.setRotation3d(0, angleNumber + Math.PI / 2, 0);
14 }
15 //设置人物位置
16 tag.p3(p3);
17 }</pre>
</div>
</div>
<h2>人物触发警报</h2>
当人物触发警报时，有2种方式同时提醒系统使用者。一是人物头上的面板颜色发生改变，并且显示报警信息。
相关代码如下：
<div class="cke_widget_wrapper cke_widget_block cke_widget_codeSnippet cke_widget_wrapper_has cke_widget_selected" data-cke-widget-wrapper="1" data-cke-filter="off" data-cke-display-name="代码段" data-cke-widget-id="3">
<div class="cnblogs_code">
<pre> 1 switch(obj.alarmType){
 2 case null:
 3 if(panel){//无警报
 4 panel.a('alarmContent','');
 5 panel.a('bg','rgba(6,13,36,0.80)');
 6 }
 7 break;
 8 case '0':
 9 panel.a('alarmContent','进入围栏');
10 panel.a('bg','rgb(212,0,0)');
11 break;
12 case '1':
13 panel.a('alarmContent','SOS');
14 panel.a('bg','rgb(212,0,0)');
15 break;
16 case '2':
17 panel.a('alarmContent',''); //离开围栏
18 panel.a('bg','rgba(6,13,36,0.80)');
19 break;
20 case '3':
21 panel.a('alarmContent','长时间未动');
22 panel.a('bg','rgb(212,0,0)');
23 break;
24 }</pre>
</div>
 
</div>
二是页面的右侧面板会增加警报信息。
相关代码如下：
<div class="cke_widget_wrapper cke_widget_block cke_widget_codeSnippet cke_widget_wrapper_has cke_widget_selected" data-cke-widget-wrapper="1" data-cke-filter="off" data-cke-display-name="代码段" data-cke-widget-id="2">
<div class="cnblogs_code">
<pre>1 data.a('text', info);
2 list.dm().add(data);</pre>
</div>
<img class="cke_reset cke_widget_drag_handler lazyload" title="点击并拖拽以移动" alt="" width="15" height="15" data-cke-widget-drag-handler="1" data-src="data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw=="></div>
<h2>轨迹图轨迹实现原理</h2>
在发生警报后，需要根据人物的轨迹图回溯发生警报的来龙去脉。如果使用根据点集每走一步就绘制一个canvas脚步节点的方式去重现轨迹，很容易造成节点绘制过多，页面卡顿的情况，因此我使用一整条管道的方式代替一个人物的所有脚步节点，使用管道的好处是，每个人物的轨迹图从开始到结束只有一个管道的图元信息，因此对页面的渲染更加友好和流畅。
生成管道轨迹的代码如下：
<div class="cke_widget_wrapper cke_widget_block cke_widget_codeSnippet cke_widget_wrapper_has cke_widget_selected" data-cke-widget-wrapper="1" data-cke-filter="off" data-cke-display-name="代码段" data-cke-widget-id="1">
<div class="cnblogs_code">
<pre> 1 //生成轨迹
 2 this.ployLines = new ht.Polyline();
 3 this.ployLines.setParent(node);
 4 this.points = [];
 5 this.points.push({ x: p3, y: p3, e: p3 -50 });
 6 this.ployLines.setPoints(this.points);
 7 this.ployLines.s({
 8 'shape.border.color': 'red'
 9 });
10 g3dDm.add(this.ployLines);</pre>
</div>
 
<img class="cke_reset cke_widget_drag_handler lazyload" title="点击并拖拽以移动" alt="" width="15" height="15" data-cke-widget-drag-handler="1" data-src="data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw=="></div>
人物前进一步，则往管道的点集中推进一个点的坐标，同时绘制新的管道部分。同理，人物后退一步，则管道的点集中推出当前最后一个点的坐标，同时管道失去最后两点连接的部分。另外我通过使用定时器，对轨迹图的前进和后退分别做了快进和快退的处理。以下为轨迹图的运行效果：
<span class="cke_widget_wrapper cke_widget_inline cke_widget_image cke_image_nocaption cke_widget_selected" data-cke-widget-wrapper="1" data-cke-filter="off" data-cke-display-name="图像" data-cke-widget-id="0"><img class="has cke_widget_element lazyload" alt="" width="712" height="337" src="https://img-blog.csdnimg.cn/20191008234127967.gif" data-cke-widget-data="{&quot;hasCaption&quot;:false,&quot;src&quot;:&quot;https://img-blog.csdnimg.cn/20191008234127967.gif&quot;,&quot;alt&quot;:&quot;&quot;,&quot;width&quot;:&quot;712&quot;,&quot;height&quot;:&quot;337&quot;,&quot;lock&quot;:true,&quot;align&quot;:&quot;none&quot;,&quot;classes&quot;:{&quot;has&quot;:1}}" data-cke-widget-upcasted="1" data-cke-widget-keep-attr="0" data-widget="image" data-src="https://img-blog.csdnimg.cn/20191008234127967.gif"><img class="cke_reset cke_widget_drag_handler lazyload" title="点击并拖拽以移动" alt="" width="15" height="15" data-cke-widget-drag-handler="1" data-src="data:image/gif;base64,R0lGODlhAQABAPABAP///wAAACH5BAEKAAAALAAAAAABAAEAAAICRAEAOw=="> 
来源：https://www.cnblogs.com/xhload3d/p/12169786.html

頁: [1]

琼殿技术论坛's Archiver

基于HTML5 WebGL的工业化3D电子围栏