前言
前些日子出差，在飞机上看到头顶的监控面板，除了播放电视剧和广告之外，还会时不时的切换到一个飞机航行的监控系统，不过整个监控系统让人感到有一点点的简陋，所以我就突发奇想制作了一个采用 HT for Web 的升级版监控系统，demo 的效果还行，发出来大家相互学习下。
demo
实现过程
云中穿行效果
为了达到飞机云中穿行的效果，最开始我遇到的问题是飞机飞行的层次感，也就通常所说的透视效果，这里我采用的是云通道和云背景以不同的速度流动，制造一种飞行的透视效果。
云我采用的是贴图的方式呈现的，但是仅仅是贴图会遮挡天空和飞机，非常影响飞机飞行的观感，所以我开启了相应图元的 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"]});球扇形视角限制
飞行效果完善之后，这时我就遇到了一个比较棘手的问题，因为实际上虽然看着飞机是在云海中穿梭，但是仅仅是在通道中飞行，背景其实也只是平面贴图，所以当视角到达某种程度的时候就会有强烈的违和感和不真实感，就需要一个视角限制，使视角的调整刚刚好在一个范围内。
