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

系统中为了辅佐用户更直不雅观友好的浏览当前地铁站，供给了三种交互模式：

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

自动巡检模式 -- 该模式下用户不需要任何操纵，场景自动前进撤退退却来放哨当前地铁站的场景。

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

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

预览地点：基于 HTML5 WebGL 的地铁站 3D 可视化系统 

界面简介及效果预览

地铁运行效果

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

漫游效果

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

监控设备交互效果

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

场景搭建

该系统中的大部分模型都是通过 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 的模型，之后如果要使用该模型可以通过以下代码来实现：

1 var node = new ht.Node(); 2 node.s({ 3 ‘shape3d‘: ‘metro‘ 4 });

上面代码新建了一个 node 东西，通过设置 style 东西的 shape3d 属性可以把模型名称为 metro 用到该 node 东西上去，之后等于我们场景中看到的地铁列车模型。

动画代码分析

地铁动画代码的实现分析

场景中地铁的运行是通过 HT 供给的调理插件来实现，调理的具体用法可以参考 HT for Web 的调理手册，该调理主要用于在指定的时间间隔进行函数回调措置惩罚惩罚，回调函数的第一个参数为 data 图元，也就是 3D 场景中的模型节点，我们可以判断当前 data 是否为我们适才创建的 metro 阿谁节点来进行后续的操纵，场景中模拟了一个左开的地铁和一个右开的地铁，两辆地铁会交替呈现。在 3D 场景中必定会有坐标系，HT 中是用 x, y, z 来分袂暗示三个轴，所以地铁的运动必定是转变地铁在坐标系中的位置来实现地铁的运行，地铁坐标如下图所示：

通过上图可以知道地铁在 3D 场景中的坐标系，如果要实现地铁的移动则只需要将地铁往图中所示红色箭头的标的目的进行移动，即 x 轴的标的目的，通过 setX 这个要领不停的改削地铁的位置到达地铁行进的目的，代码中通过 getSpeedByX 以及 getOpacityByX 两个要领来不停获取此时的列车速度以及列车透明度，以下为关键代码实现：