当前位置: 首页 > Web前端 > HTML5

Web3D配置模拟应用案例:民航飞机数据监控

时间:2023-04-05 22:40:15 HTML5

前言飞机在飞行过程中,除了在机舱内座位上方的屏幕上播放电视剧和广告外,还会切换到飞机飞行时时监控系统。这个监控系统的主要目的是让乘客了解飞机在飞行过程中的整体状态,从目的地出发的航线进度,以及一些可能出现的紧急情况。飞机导航监控系统在一定程度上可以让乘客在旅途中获得准确的信息来源,最重要的是可以让乘客在旅途中安心。飞机飞行监控系统在保证旅客能够获得实际信息来源的同时,还能将采集到的数据及时反馈给机组人员,并保存数据记录,供飞机停飞和监控后的乘务员和维修人员使用。和维护。在2D配置和3D配置之间,Hightopo的HTforWeb产品(以下简称HT)拥有丰富的配置选项。本文将介绍如何利用HT丰富的2/3D组态构建飞行器导航监控系统的解决方案。预览地址:flight-monitorsystemanalysis飞行器导航监测是衡量和跟踪飞行器性能趋势的一种简单实用的方法。在日常飞行中,利用机载仪表记录飞机在巡航时的相关参数,并与原来的性能进行比较。监测的主要参数有:单位飞行时间的油耗量、飞机的巡航飞行速度、飞机飞越单位油耗的水平距离。它们分别代表了发动机、飞机和航空发动机的综合性能。它们分别代表了发动机、飞机和航空发动机的综合性能。性能监测结果不仅可以为飞机维修提供可能的故障信息,还可以为制定飞行计划提供可靠的性能依据。目前,先进的喷气式运输机都安装了飞行状态监测系统,记录相关参数值并存储在数据管理装置中。这些数据可以在飞行器着陆后发送或发送到地面站,并用专门的计算机程序进行计算。及校正,实现性能监控数据采集、传输、计算和分析的自动化,节省人力,提高准确性。1、飞行数据记录仪:飞行数据记录仪FDR(FlightDataRecorder)“俗称黑匣子”自诞生以来,所提供的详细准确的飞行数据,为事故调查、维修保障、和安全运行监控。航空安全运行的重要管理工具。2.ACMS(AireraftConditionMonitoringSystem)系统概述:ACMS系统是一种安装在飞机上的先进机载数据采集和处理系统。可实时采集数据,监测发动机状态和飞行性能,进行专项工程勘察。飞机通信寻址和报告系统(ACARS)通过地空数据链将其发送到地面接收站,最后传送到航空公司的终端。数据记录也可以通过快速访问记录器(QAR)保存。供航空和维修人员在车站或飞行后使用。HT实现的业务功能可以通过ACMS系统采集的数据进行展示,连接显示终端,实时监控数据准确显示,可以监控飞行器状态,实时反馈关于信息数据的变化。为了达到飞过云层的效果,一开始我遇到的问题是飞行飞机的层次感,也就是通常所说的透视效果。这里我使用云通道和云背景以不同的速度高速流动,营造出飞行的透视效果。我以贴图的形式呈现云朵,但是只有贴图会遮挡天空和飞机,极大的影响了飞机飞行的观感,所以我开启了对应图元的透明和不透明,并设置了不同的透明度云背景和云通道。不仅增加了层次感,还给人一种云朵飘过的错觉。云通道采用ht.Polyline类型。通道缩放增加了Y轴的比例,使云通道有更大的垂直空间。设置reverse.flipbackcopy使得云通道内部也显示纹理,仿佛飞机在云海中穿梭;云背景采用ht.Node类型,只设置一个面显示为云背景。整体云流效果是通过offset偏移实现的,改变对应图元或对应图元表面的纹理偏移量,实现飞过云朵的效果,代码如下:vari=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.jsHT动画扩展插件来实现平面颠簸效果,代码如下:dm.enableAnimation(20);plane.setAnimation({back1:{from:0,to:160,easing:'Cubic.easeInOut',duration:8000,next:"up1",onUpdate:function(value){value=parseInt(value);varp3=this.p3();这个。p3(value,p3[1],p3[2]);}},//...省略类似start:["back1"]});飞行效果受到球扇形视角限制后,这时候遇到了一个难题,因为实际上飞机虽然穿梭在云海中,但也只是在通道中飞行,背景其实只是一个平面纹理,所以当视角达到一定程度时,会有强烈的不协调感和不真实感,需要一个视角限制,让视角的调整刚好在一定范围内。如果视角受限,一般会限制g3d的眼睛和中心。不太了解的朋友可以去hightopo官网看3d手册。里面有详细的说明,这里就不赘述了;因为视角范围,我决定固定中心点的位置,代码如下:g3d.addPropertyChangeListener(e=>{//固定中心点if(e.property==='center'){e.newValue[0]=center[0];e.newValue[1]=center[1];e.newValue[2]=center[2];}}然后将眼睛限制在一定范围内就大功告成了,不过这里没那么简单,一开始我把眼睛限制在一个立方体的空间里,但是交互效果并不理想。考虑到g3d默认的交互方式,当鼠标拖动和平移改变视角时,眼睛实际上是在一个以球心为圆心的球面上运动,所以我决定先从球体上挖出一块作为眼睛的限制空间,也就是球扇区。不懂的朋友可以参考到这张图:球面扇形的视角限制一共需要三个参数,分别是中心参考轴,中心轴和外边角,中心参考轴所在的球体的限制半径可以根据初始眼与中心的延长线确定,将其所在球体的极限半径分为最大极限和最小极限。代码如下: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'){varnewEyeV=newht.Math.Vector3(e.newValue),centerV=newht.Math.Vector3(center),refEyeV=newht.Math.Vector3(eye),refVector=refEyeV.clone().sub(centerV),newVector=newEyeV.clone().sub(centerV);如果(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)limitA){varoldLength=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]=realE是的;}}})}飞机监控系统当然作为监控系统,自然要有监控,在右下角加个小地图,提供三种模式,分别是关注飞机,关注飞行轨迹和聚焦地图,并根据飞机的飞行方向控制飞行轨迹的流动效果,聚焦的飞机会跟随飞机运动进行fitData,使飞机始终处于小地图的中心.代码如下:varfitFlowP=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(平面,假);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();letg3d=G.g3d,g3dDM=G.g3d.dm();g3d.fireInteractorEvent({kind:'doubleClickData',data:g3dDM.getDataByTag(data.getTag())})}});//...省略天空渲染效果既然这样是监控系统,肯定是24小时不分青红皂白的监控,这涉及到一个问题,我不可能半夜开飞机飞过蓝天,非常缺乏真实性,所以必须有天空由亮变暗,再由暗变亮的过程。有两个时段,06:00-06:30和19:00-19:30。天空使用shape3d:'sphere'球形,将整个场景包裹起来,然后使用reverse.flip反向复制混合着色,即可将天空渲染成我想要的颜色。如果根据时间改变天空,只需要将着色值调高即可。但是由于白天和晚上的光照条件不同,云层反射光的强度也不同,导致白天和晚上的云层有差异,所以云路纹理的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,})}elseif((hour<6||hour>19)||(hour==19&&minutes>=30)){//...省略}elseif(hour==6&&minutes<15){//...省略}elseif(hour==6&&minutes>=15&&minutes<30){//...省略}elseif(hour==19&&minutes<15){//...省略}elseif(hour==19&&minutes>=15&&minutes<30){//...省略}这里我还添加了对右上角时间面板中时间状态图标的支持,并添加了图标切换时的淡入淡出效果,并给出了时间跨面板状态图标位置增加了点击切换到下一个时间状态的功能。为了演示效果,我添加了时间速度按钮。在越来越快的发展环境下,迎来5G新征程和工业4.0新变革,在信息数据采集传输和数据可视化系统的融合下,可以实现众多行业管控可视化系统解决方案。发现。HT长期致力于多元化行业系统的可视化。凭借在科技行业积累的经验,通过科技产品的自主创新和研发,在众多行业打造出具有代表性的可视化管控系统。比如还有关于飞行器监控可视化系统:无人机3D可视化系统2019我们还更新了上百个工业互联网2D/3D可视化案例集,在这里你可以找到很多新奇的例子,发现不一样的工业互联网:https://mp.weixin.qq.com/s/ZbhB6LO2kBRPrRIfHlKGQA同时,您还可以查看更多案例及效果:https://www.hightopo.com/demos/index.html