本文共 4306 字，大约阅读时间需要 14 分钟。
工业互联网、物联网、可视化等概念在当今信息化时代已深入人心，几乎贯穿于我们生活的方方面面。无论是交通出行，还是日常的衣食住行，都能通过信息化手段得到便利。在可视化监控领域，传统的Web SCADA技术主要依靠2D可视化实现，但随着技术的进步，我们采用Hightopo的HT for Web产品构建了一个轻量化的3D可视化场景，该场景从正面展现了地铁站的实时运行情况，包含地铁运行、上下行情况、视频监控、烟雾报警、电梯运行等多个方面，帮助用户直观了解地铁运营状况。
为让用户更直观地浏览地铁站，系统提供了三种交互模式：
本文通过搭建地铁站可视化场景、实现动画代码、分析交互模式以及功能点的实现，阐述如何使用Hightopo HT for Web产品构建一个简单的地铁站可视化系统。
界面简介及效果展示
地铁运行效果
地铁从站外进入站内时，场景中会显示出透明度逐渐增强、速度逐渐减慢的效果，模拟真实列车进站过程。
漫游效果
系统支持自动巡检功能，场景会自动旋转和平移，展现地铁站的全貌。
监控设备交互效果
点击场景中的监控设备，可查看实时运行数据和设备状态，例如视频监控画面或烟雾报警信息。
场景搭建与模型优化
系统中大部分模型采用3dMax建模生成，并导出obj与mtl文件。HT for Web通过解析这些文件生成3D场景中的复杂模型。对于简单模型，直接使用HT进行轻量化HTML5/WebGL建模更为高效。以下是HT加载obj模型的示例代码：
ht.Default.loadObj('obj/metro.obj', 'obj/metro.mtl', { center: true, r3: [0, -Math.PI / 2, 0], s3: [0.15, 0.15, 0.15], finishFunc: function(modelMap, array, rawS3) { ht.Default.setShape3dModel('metro', array); } }); 上述代码通过加载地铁模型并注册为名称为'metro'的3D模型。若需在场景中使用该模型，可通过以下代码实现：
var node = new ht.Node(); node.s({ shape3d: 'metro' }); 动画代码实现分析
地铁动画主要通过修改X轴位置实现行进效果。以下是关键动画代码：
let metroTask = { interval: 50, action: (data) => { if (data === currentMetro) { const currentX = data.getX(); const speed = this.getSpeedByX(currentX); const opacity = this.getOpacityByX(currentX); if (Math.abs(currentX) ≤ 5000) { opacity !== 1 ? currentMetro.s({ shape3d: { transparent: true, opacity: opacity } }) : currentMetro.s({ shape3d: { transparent: false } }); data.setX(currentX + direction * speed); if (speed === 0) this.doorAnimation(currentMetro, direction); } if (currentX > 5000 && direction === 1) { currentMetro = leftMetro; currentMetro.setX(5000); } if (currentX < -5000 && direction === -1) { currentMetro = rightMetro; currentMetro.setX(-5000); } } } }; dm3d.addScheduleTask(metroTask); 该代码实现了地铁的行进动画，通过不断修改X轴位置并获取速度和透明度，模拟列车的前进效果。地铁在达到终点后会自动切换到另一列车继续运行。
自动巡检功能实现
系统通过调整视角的位置实现自动巡检功能。HT提供的walk方法同时修改eye和center的位置，实现视角的平移。以下是自定义旋转函数的实现：
rotateStep() { const fromCenter = this.fromCenter; const toCenter = this.toCenter; const rotateValue = this.rotateFrame || Math.PI / 180; const centerVector = new ht.Math.Vector2(toCenter.x - fromCenter.x, toCenter.y - fromCenter.y); const centerVectorLength = centerVector.length(); const rotatePercent = rotateValue * this.stepNum / this.curRotateVal; if (rotatePercent ≥ 1) { rotatePercent = 1; this.stepNum = -2; } const newLength = rotatePercent * centerVectorLength; centerVector.setLength(newLength); const newCenterVector = centerVector.add(fromCenter); const newCenterPosition = [newCenterVector.x, this.personHeight, newCenterVector.y]; this.g3d.setCenter(newCenterPosition); } 该函数通过计算矢量方向上的比例，逐步调整视角的中心位置，实现了平滑的视角旋转效果。
电梯动画实现
电梯模型由多个三角形面拼接而成，通过平移顶点坐标实现运行动画。以下是电梯动画的实现伪代码：
setInterval(() => { for (let i = 0, l = vs.length; i < l; i += 3) { const nextX = vs[i]; const nextY = vs[i + 1]; vs[i] = nextX - xStep; vs[i + 1] = nextY + yStep; // 调整坐标范围 vs[i] = nextX < -0.5 ? 0.5 - (Math.abs(nextX) - 0.5) : nextX; vs[i + 1] = nextY > 0.5 ? -0.5 + (Math.abs(nextY) - 0.5) : nextY; } }, 200); 上述代码通过循环调整顶点坐标，模拟电梯沿着X和Y轴平移的运行效果。
监控功能展示
视频监控
点击场景中的摄像头，可查看实时监控画面。以下为实现效果图：
烟雾报警
烟雾报警模型根据后台状态变换颜色，红色表示报警状态。以下为实现效果图：
电视到站时间
系统模拟电视显示下一班地铁到站时间。以下为效果图：
场景交互
3D场景中交互主要通过点击操作实现，例如点击摄像头可查看监控画面。以下是交互注册代码：
g3d.mi((e) => { let { g2d, dm2d } = this; if (e.kind === 'clickData') { const data = e.data; const shape3d = data.s('shape3d'); if (shape3d && shape3d.indexOf('摄像头') > 0) { const cameraPanel = dm2d.getDataByTag('cameraPanel'); g2d.isVisible(cameraPanel) ? cameraPanel.s('2d.visible', false) : cameraPanel.s('2d.visible', true); } } if (e.kind === 'clickBackground') { const cameraPanel = dm2d.getDataByTag('cameraPanel'); g2d.isVisible(cameraPanel) && cameraPanel.s('2d.visible', false); } }); 总结
工业互联网通过连接人、数据和机器，为地铁站3D可视化系统提供了强大支持。HT for Web的轻量化技术、数据可视化能力以及机器可视化能力，使得监控和管理更加便捷高效。未来，通过结合VR技术，可以实现身临其境的交互体验。系统同样适合在移动端运行，以下是移动端运行的截图：
程序运行截图：
转载地址：http://rpluz.baihongyu.com/