HTML5 WebGL 完成民航客机航行监管系统软件

日期:2021-01-20 类型:科技新闻 

关键词:自助建站,专业建站,建站网站,建站平台,网站在线制作app

序言

前些生活出差,在飞机上看到头顶的监管面板,除播发电视机剧和广告宣传以外,还会时时常的切换到1个飞机出航的监管系统软件,但是全部监管系统软件令人觉得有1点点的简单,因此我就心血来潮制做了1个选用 HT for Web 的升級版监管系统软件,demo 的实际效果还行,传出来大伙儿互相学习培训下。


 

demo

完成全过程

云中穿梭实际效果

以便做到飞机云中穿梭的实际效果,最初我遇到的难题是飞机航行的层级感,也就一般所说的透視实际效果,这里我选用的是云安全通道和云情况以不一样的速率流动性,生产制造1种航行的透視实际效果。

云我选用的是贴图的方法展现的,可是仅仅是贴图会遮挡天空和飞机,十分危害飞机航行的观感,因此我打开了相应图元的 transparent 和 opacity ,云情况和云安全通道设定不一样的全透明度,不但提升了层级感,还会令人造成云朵从眼下飘过的幻觉。

云安全通道选用的是 ht.Polyline 种类,安全通道放缩拉大了 Y 轴的占比,使云安全通道有更大的纵向室内空间,设定 reverse.flip 背复制使云安全通道內部也显示信息出贴图,好像让飞机置身云海中穿行;云情况选用 ht.Node 种类,只设定1个面显示信息当做云情况。

总体的云流动性实际效果选用 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);

升降机晃动实际效果

尽管做到了飞机云中穿梭的实际效果,可是假如飞机只是直直的航行,那也会减少航行的实感,坚信坐过飞机的盆友毫无疑问都遇到过因气小产生的晃动,也常常体会到飞机航行途中的抬升和降低,这实际上是由于飞机的航线其实不是1直固定不动在1个高宽比上,有时会抬升有时会降低,因此我就用 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"]
});

球扇形视角限定

航行实际效果健全以后,这时候我就遇到了1个较为繁杂的难题,由于具体上尽管看着飞机是在云海中穿行,可是仅仅是在安全通道中航行,情况实际上也只是平面贴图,因此当视角抵达某种水平的情况下就会有明显的违和感和不真正感,就必须1个视角限定,使视角的调剂不久好在1个范畴内。

视角限定的话1般是限定 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 限定在某1个范畴内就大获全胜了,但是这里却其实不是那末简易,最初我把 eye 限定在1个立方体的室内空间内,但互动实际效果很没理想,考虑到到 g3d 默认设置互动中,电脑鼠标拖拽平移视角转换时,具体上 eye 是在1个以 center 为球心的球面上健身运动的,因此我决策从这个球中挖出来1块做为 eye 的限定室内空间,也便是球扇形,不太了解的盆友能够参照这个图:


 

球扇形视角限定,1共必须3个主要参数,各自是管理中心参照轴、管理中心轴和外边所成角度、所属球限定半径,在其中管理中心参照轴可依据原始 eye 和 center 的联接增加线明确,所属球限定半径又分最大限定和最少限定,编码以下:

 

function limitEye(g3d, eye, center, options) {
    var limitMaxL   = options.limitMaxL,
        limitMinL   = options.limitMinL,
        limitA      = options.limitA;

    g3d.addPropertyChangeListener(e => {
        // 固定不动管理中心点
        if (e.property === 'center') {
            e.newValue[0] = center[0];
            e.newValue[1] = center[1];
            e.newValue[2] = center[2];
        }
        // 限定视角
        if (e.property === 'eye') {
            var newEyeV = new ht.Math.Vector3(e.newValue),
                centerV = new ht.Math.Vector3(center),
                refEyeV = new ht.Math.Vector3(eye),
                refVector = refEyeV.clone().sub(centerV),
                newVector = newEyeV.clone().sub(centerV);

            if (centerV.distanceTo(newEyeV) > limitMaxL) {
                newVector.setLength(limitMaxL);
                e.newValue[0] = newVector.x;
                e.newValue[1] = newVector.y;
                e.newValue[2] = newVector.z;
            }
            if (centerV.distanceTo(newEyeV) < limitMinL) {
                newVector.setLength(limitMinL);
                e.newValue[0] = newVector.x;
                e.newValue[1] = newVector.y;
                e.newValue[2] = newVector.z;
            }
            if (newVector.angleTo(refVector) > limitA) {
                var oldLength = newVector.length(),
                    oldAngle  = newVector.angleTo(refVector),
                    refLength = oldLength * Math.cos(oldAngle),
                    vertVector,
                    realVector,
                    realEye;

                refVector.setLength(refLength);

                newEyeV = newVector.clone().add(centerV);
                refEyeV = refVector.clone().add(centerV);
                vertVector = newEyeV.clone().sub(refEyeV);
                vertLength = refLength * Math.tan(limitA);

                vertVector.setLength(vertLength);

                realVector = vertVector.clone().add(refEyeV).sub(centerV);

                realVector.setLength(oldLength);

                realEye = realVector.clone().add(centerV);

                // 避免挪动角度超过 180 度,视角翻转
                if (oldAngle > Math.PI / 2) {
                    realEye.negate();
                }

                e.newValue[0] = realEye.x;
                e.newValue[1] = realEye.y;
                e.newValue[2] = realEye.z;
            }  
        }
    })
}

飞机监管系统软件

自然做为监管系统软件,当然要有监管了,提升右下角的小地形图,并出示3种方式,各自是聚焦飞机,聚焦航行运动轨迹和聚焦地形图,并依据飞机的航行方位操纵航行运动轨迹的流动性实际效果,在其中聚焦飞机遇追随飞机挪动开展 fitData ,使飞机1直处在小地形图的管理中心,编码以下:

 

var fitFlowP = function (e) {
    if (e.property === 'position' && e.data === plane) {
        mapGV.fitData(plane, false);
    }
};
buttonP.s({
    'interactive': true,
    'onClick': function (event, data, view, point, width, height) {
        map.a('fitDataTag', 'plane2D');
        mapGV.fitData(plane, false);
        mapDM.md(fitFlowP);
    }
});
buttonL.s({
    'interactive': true,
    'onClick': function (event, data, view, point, width, height) {
        mapDM.umd(fitFlowP);
        map.a('fitDataTag', 'flyLine');
        mapGV.fitData(flyLine, false);
    }
});
// ...省略

提升电脑鼠标移到飞机相应部位开展名字的提醒、双击鼠标后显示信息飞机相应部位的信息内容面板并将视角聚焦到面板上、点一下飞机随意地区切换成飞机航行方式等实际效果。


 

左边提升监管面板取代上面提到的双击鼠标相应部位这步实际操作立即聚焦到相应部位的信息内容面板上,这里按钮打开了互动并加上了相应的互动逻辑性,编码以下:

 

button_JC.s({
    'interactive': true,
    'onClick': function (event, data, view, point, width, height) {
        event.preventDefault();
        let g3d = G.g3d,
            g3dDM = G.g3d.dm();
        g3d.fireInteractorEvent({
            kind: 'doubleClickData',
            data: g3dDM.getDataByTag(data.getTag())
        })
    }
});
//...省略

天空3D渲染实际效果

既然是监管系统软件毫无疑问是 24 小时无区别的监管,这就涉及到到1个难题,我总不能能深夜的情况下飞机也从瓦蓝瓦蓝的天空上飞过,这就很缺乏真正性了,因此要有1个天空从亮到暗再从暗到亮的全过程,这个全过程我暂定到 06:00-06:30 和19:00⑴9:30 这两个時间段。

天空选用的是 shape3d : 'sphere' 球形,包裹全部情景,随后应用 reverse.flip 背复制 和 blend 染色,以后天空便可以3D渲染成我要想的色调,假如依照時间更改天空明暗要是更改染色值便可以了。

可是因为大白天和夜里光照状况的不一样,云反射面光的强度也不一样,就致使了大白天和夜里云的差别,因此也要调剂云道和云情况的贴图的 opacity 全透明度,夜间更加全透明度,编码以下:

if ((hour > 6 && hour < 19) || (hour == 6 && minutes >= 30)) {
    timePane && timePane.a({
        'morning.visible': false,
        'day.visible': true,
        'dusk.visible': false,
        'night.visible': false,
        'day.opacity': 1
    })
    skyBox.s({
        "shape3d.blend": 'rgb(127, 200, 240)',
    })
    cloudBackground.s({
        "back.opacity": 0.7,
    })
    clouds.s({
        "shape3d.opacity": 0.7,
    })
} else if ((hour < 6 || hour > 19) || (hour == 19 && minutes >= 30)) {
//...省略
} else if (hour == 6 && minutes < 15 ) {
//...省略
} else if (hour == 6 && minutes >= 15 && minutes < 30) {
//...省略
} else if (hour == 19 && minutes < 15) {
//...省略
} else if (hour == 19 && minutes >= 15 && minutes < 30) {
//...省略
}

这里我还提升了对右上角時间面板時间情况标志的适用,并提升了标志切换时的渐隐渐显实际效果,另外给時间面板情况标志部位提升了点一下切换到下1時间情况的作用。

以便演试实际效果我提升了時间倍速按钮,下图是 500 倍時间流速下的转变状况:


 

总结

根据这个 demo ,我发现日常生活中有许多沒有被人所留意到的细节都存在数据信息可视性化的将会,在这个绝大多数据的时期更多的将会性值得被人挖掘出来,不必错个身旁每个值得数据信息可视性化的细节,这样不但能够更好的发掘 HT for Web 的发展潜力,还可以提升本身身为1个程序流程员的综合性素养。