Web 三维组态的仿真运用案例：民航飞机的数据监控

前言

在飞机航行的过程中，客舱里座位上方的荧屏上，除了播放电视剧和广告之外，还会时不时的切换到一个飞机航行的监控系统。这个监控系统的主要目的是，让乘客可以了解到飞机在航行过程中的整体状况、距离目的地的航线进程以及一些有可能出现的突发事件。飞机航行的监控系统在一定程度上，可以使乘客在旅途过程中得到准确的信息源，最重要的是可以使乘客在旅途中得到安心。在保障乘客获取到实际信息源的同时，飞机航行的监控系统也能将采集到的数据及时的反馈给航务人员，而且将数据记录保存下来，在飞机过站或航后供航务和机务人员使用和监测维护。介于 2D 组态和 3D 组态上，Hightopo（以下简称 HT ）的 HT for Web 产品上的有着丰富的组态化可供选择，本文将介绍如何运用 HT 丰富的 2/3D 组态搭建出一个飞机航行的监控系统的解决方案。

预览地址：flight-monitor

系统分析

飞机航行监控是一种测量、跟踪飞机性能变化趋势的简单而实用方法。在日常航班飞行中，用机载仪表记录飞机巡航时的有关参数，并将其与原有性能进行比较。监控的主要参数有:飞行单位时间消耗的燃油量、飞机的巡航飞行速度和消耗单位燃油量飞机飞过的水平距离。它们分别表示发动机、飞机及飞机发动机的综合性能。它们分别表示发动机、飞机及飞机发动机的综合性能。性能监控的结果，既可为飞机维修提供可能的故障信息，又为制定飞行计划提供可靠的性能依据。

目前，先进的喷气运输机都已安装飞行状态监控系统，它记录下有关参数值,并存储在数据管理装置中，这些数据可以发送到或在飞机着陆后送到地面站，用专用计算机程序进行计算和修正，使性能监控数据采集、发送、计箅分析工作自动化，节省了人力，提高了精确度。

1、飞行数据记录器：自从飞行数据记录器 FDR（Flight Data Recorder）“俗称黑匣子”诞生以来，其提供的详实准确的飞行数据为事故调查、机务维护保障、安全运营监控提供了重要依据，成为航空安全运营的重要管理手段。

2、ACMS（Aireraft Condition Monitoring System）的系统概述：ACMS 系统是飞机上安装的先进机载数据采集和处理系统，它能以实时方式收集数据，对发动机状态和飞行性能进行监控以及进行特殊的工程调查。由飞机通信寻址与报告系统（ACARS）通过地空数据链发送到地面接收站，最后传送到航空公司的终端，也可通过快速存取记录器（QAR）将数据记录保存下来，在飞机过站或航后供航务和机务人员使用。

而 HT 实现的业务功能可以通过ACMS 系统采集到的数据，对接到显示终端去展示，通过实时监测的数据准确地显示出来，起到对飞机状态的监控功能并即时反馈信息数据的变化。

实现过程

云中穿行效果

为了达到飞机云中穿行的效果，最开始我遇到的问题是飞机飞行的层次感，也就通常所说的透视效果，这里我采用的是云通道和云背景以不同的速度流动，制造一种飞行的透视效果。

云我采用的是贴图的方式呈现的，但是仅仅是贴图会遮挡天空和飞机，非常影响飞机飞行的观感，所以我开启了相应图元的 transparent 和 opacity，云背景和云通道设置不同的透明度，不仅增加了层次感，还会让人产生云朵从眼前飘过的错觉。

云通道采用的是 ht.Polyline 类型，通道缩放拉大了 Y 轴的比例，使云通道有更大的纵向空间，设置 reverse.flip 背拷贝使云通道内部也显示出贴图，仿佛让飞机置身于云海中穿梭；云背景采用 ht.Node 类型，只设置一个面显示充当云背景。

整体的云流动效果采用 offset 偏移实现，改变相应图元或相应图元面的贴图偏移量来达到飞机云中穿行的效果，代码如下：

var i = 1,

    p = 0;

setInterval(() => {

    i -= 0.1; p += 0.005;

    clouds.s('shape3d.uv.offset', [i, 0]);

    cloudBackground.s('all.uv.offset', [p, 0]);

}, 100);

升降颠簸效果

虽然达到了飞机云中穿行的效果，但是如果飞机只是直直的飞行，那也会降低飞行的实感，相信坐过飞机的朋友肯定都遇到过因气流产生的颠簸，也经常感受到飞机飞行途中的爬升和下降，这其实是因为飞机的航线并不是一直固定在一个高度上，有时会爬升有时会下降，所以我就用 ht-animation.js HT 动画扩展插件去实现飞机颠簸效果，代码如下：

dm.enableAnimation(20);

plane.setAnimation({

    back1: {

        from: 0,

        to: 160,

        easing: 'Cubic.easeInOut',

        duration: 8000,

        next: "up1",

        onUpdate: function (value) {

            value = parseInt(value);

            var p3 = this.p3();

            this.p3(value, p3[1], p3[2]);

        }

    },

    //...省略相似

    start: ["back1"]

});

球扇形视角限制

飞行效果完善之后，这时我就遇到了一个比较棘手的问题，因为实际上虽然看着飞机是在云海中穿梭，但是仅仅是在通道中飞行，背景其实也只是平面贴图，所以当视角到达某种程度的时候就会有强烈的违和感和不真实感，就需要一个视角限制，使视角的调整刚刚好在一个范围内。

视角限制的话一般是限制 g3d 的 eye 和 center，不太了解的朋友可以去看 hightopo 官网中的 3d 手册，里面有详细的说明，这里我就不再赘述了；因为视角范围的关系，所以我决定固定 center 的位置，代码如下：

g3d.addPropertyChangeListener(e => {

    // 固定中心点

    if (e.property === 'center') {

        e.newValue[0] = center[0];

        e.newValue[1] = center[1];

        e.newValue[2] = center[2];

    }

}

然后再把 eye 限制在某一个范围内就大功告成了，然而这里却并不是那么简单，最开始我把 eye 限制在一个立方体的空间内，但交互效果很不理想，考虑到 g3d 默认交互中，鼠标拖拽平移视角变换时，实际上 eye 是在一个以 center 为球心的球面上运动的，所以我决定从这个球中挖出来一块作为 eye 的限制空间，也就是球扇形，不太理解的朋友可以参考这个图：