基于 WebGL 的 HTML5 3D 智能楼宇监控系统 顶

前言

智能监控已经涉及到了各大领域，工控、电信、电力、轨道交通、航天航空等等，为了减少人员的消耗，监控系统必不可少。之前我写过一篇 2D 的智能地铁监控系统广受好评，突然觉得，既然 2D 的这么受欢迎，那么 3D 的需求量肯定也是非常大的，3D 毕竟比 2D 来说还是更直观一些，于是有了这个例子以及这篇文章。智能监控系统在 3D 中应用比较广泛的除了 3D 机房以外，我觉得就是楼宇的监控了，可是之前做了很多关于机房方面的 Demo，所以最终决定做 3D 楼宇监控系统。

​​

在这里插入图片描述

代码生成

场景搭建

整个场景是由 HT for Web 的 3D 组件搭建而成，配合左侧的 listView 列表组件，通过点击这个 listView 列表组件中的各个项可以自由切换各个监控楼层和楼宇的场景：

加载模型

在这里插入图片描述

进入页面显示的就是整个城市的场景，通过 ht.Default.loadObj 方法加载 obj 模型：

工控楼层模型的加载也是类似，这里就不再赘述。

直接将组件添加进场景中是不会有相关的操作的， 必须要监听事件的触发才可进行后续的操作，这里对数据选中容器中的选中变化事件进行监听：

调用模型

在这里插入图片描述

这里为了简单就只设置了一个工控楼层的 obj 模型，通过调用不同的 obj 模型可以显示不同的工控楼层场景，也就是说我们可以自己通过 ht.Default.loadObj 方法加载模型，设置工控楼层模型的 shape3d 属性，然后设置到节点的 shape3d 属性上，即可修改；或者直接设置节点的 shape3d 属性为 json 格式的 obj 文件，这里还是采取第一种方式：

这里顺便说一下另一种简便的调用 obj 模型的方式，直接设置节点的 shape3d 属性为导入的 json 格式的文件：

但是这个 json 的内容必须要有以下几个元素：

但是这种模式不适用于这个场景，因为我的模型有些大，需要调用到 obj 模型的原始大小 rawS3 属性除以一定比例后再显示。

创建面片

在这里插入图片描述

上面提到了 createNode 方法，这个方法主要是用来创建显示为“面片”类型的节点。所谓“面片”，即为只有一个面。通过这种在一个面上显示一张矢量图的方式，结果会比在一个六面体上显示一张图的性能好， HT 3D 场景简单的时候可能看不出来效果，如果场景卡顿，立马就能看出“面片”的优势了：

事件交互

然后我就在想，既然到了楼层的 3D 模型显示，那么怎么返回？以哪种方式返回最好？想来想去比较没有违和感的还是点击列表组件比较好，就选中了列表组件的顶部：

所有代码结束！

总结

这个 3D 智能楼宇监控系统非常的简单，对于技术人员来说是完全没有挑战性的，主要工作内容在美工上，这么一来，如果要添加比较复杂的需求，技术人员就可以全身心地投入到产品上，而不是一些繁琐的 3D 模型的搭建了。总而言之，我觉得这个 Demo 非常具有代表性，所以想拿出来跟大家分享一下，一起讨论一下前端的趋势所在。

http://hightopo.com/demo/intelligent-building/index.html

(adsbygoogle = window.adsbygoogle || []).push({});