基于 HTML5 WebGL 的地铁站 3D 可视化系统

如需预览全景效果请关注后私信小编，谢谢！

前言

工业互联网，物联网，可视化等名词在我们现在信息化的大背景下已经是耳熟能详，日常生活的交通，出行，吃穿等可能都可以用信息化的方式来为我们表达，在传统的可视化监控领域，一般都是基于 Web SCADA 的前端技术来实现 2D 可视化监控，本系统采用 Hightopo 的 HT for Web 产品来构造轻量化的 3D 可视化场景，该 3D 场景从正面展示了一个地铁站的现实场景，包括地铁的实时运行情况，地铁上下行情况，视频监控，烟雾报警，电梯运行情况等等，帮助我们直观的了解当前的地铁站。

 

系统中为了帮助用户更直观友好的浏览当前地铁站，提供了三种交互模式：

第一人称模式 -- 操作就类似行人或车在行进的效果，可以通过键盘鼠标控制前进后退。

自动巡检模式 -- 该模式下用户不需要任何操作，场景自动前进后退来巡查当前地铁站的场景。

鼠标操作模式 -- 左键旋转场景，右键平移场景。

本篇文章通过对地铁站可视化场景的搭建，动画代码的实现，交互模式的原理解析，以及主要功能点的实现进行阐述，帮助我们了解如何使用 HT 实现一个简单的地铁站可视化。

 

界面简介及效果预览

地铁运行效果

地铁从站外开到站内的效果为透明度逐渐增加，速度逐渐降低。

 

漫游效果

上述为自动巡检的漫游效果，场景自动进行前进旋转。

 

监控设备交互效果

当我们点击场景中的监控设备时可以查看当前设备的运行情况，运行数据等信息。

 

场景搭建

该系统中的大部分模型都是通过 3dMax 建模生成的，该建模工具可以导出 obj 与 mtl 文件，在 HT 中可以通过解析 obj 与 mtl 文件来生成 3d 场景中的所有复杂模型，当然如果是某些简单的模型可以直接使用 HT 来绘制，这样会比 obj 模型更轻量化，所以大部分简单的模型都是采用HT for Web 产品轻量化 HTML5/WebGL 建模的方案，具体的解析代码如下：

 1 // 分别为 obj 文件地址，mtl 文件地址
 2 ht.Default.loadObj('obj/metro.obj', 'obj/metro.mtl', {
 3 center: true,
 4 // 模型是否居中，默认为 false，设置为 true 则会移动模型位置使其内容居中
 5 r3: [0, -Math.PI / 2, 0],
 6 // 旋转变化参数，格式为 [rx, ry, rz]
 7 s3: [0.15, 0.15, 0.15],
 8 // 大小变化参数，格式为 [sx, sy, sz]
 9 finishFunc: function(modelMap, array, rawS3) {
10 if (modelMap) {
11 ht.Default.setShape3dModel('metro', array); // 注册一个名字为 metro 的模型
12 }
13 }
14 });

上面通过加载 obj 模型之后注册了一个名字为 metro