前言近年来，无人机发展迅猛。它们不仅可以用于民用航拍，还可以用于军事侦察。它们涉及的行业非常广泛，也被称为“飞行相机”。》。然而，对于军用来说，无人机的性能要求更为严格和重要。本系统是通过海图普的HTforWeb产品构建的无人机3D可视化系统，通过无人机的全景显示，模拟对无人机状态的监控。系统包含4种显示模式：实体模式、热模式、线框模式和内部模式，模式可通过飞行器下方的操作按钮进行切换。预览地址：http://www.hightopo.com/demo/无人机/实现过程加载界面采用二维拓扑组件绘制，全矢量化图标相对于传统图片以png、jpg等格式完美适配移动端、PC端、大屏等各种尺寸屏幕和分辨率，不会有失真。无人机和周围的信息面板使用3D引擎构建场景，用户可以在场景的任何位置查看无人机。动画过程使用ht.Default.startAnim提供的动画函数由产品带动图形属性值的变化。应用它的Time-Based方法，你只需要指定动画循环持续时间的毫秒数，系统计算帧数或动作函数被调用的次数，以保证更高效流畅的动画过程。界面在加载界面中，通过动态改变图形的属性值来显示加载进度。加载后，动画的finishFunc调用hidden2d方法改变图形的透明度。之后通过moveCamera缩小场景中的视角，实现淡出到淡入效果的过渡（即离开加载界面，进入3D场景）。同时改变图形在3D场景中的位置，实现多种形态无人机的融合，并分离出相应的按钮。//加载进度functionloadAnim(){ht.Default.startAnim({duration:6000,easing:t=>{return1-(--t)\*t\*t\*t;},action:(v,t)=>{loge.s('clip.percentage',v);percentText.s('text',Math.floor(v\*100));},finishFunc:()=>{hidden2d()}})}//隐藏二维绘图functionhidden2d(){ht.Default.startAnim({duration:500,easing:t=>{returnt;},action:(v,t)=>{dm2d.each(e=>{e.s('opacity',1-v);})},finishFunc:()=>{dm2d.setBackground('');g3d.moveCamera(eye,center,{duration:3000,easing:t=>{return1-(--t)\*t\*t\*t;}});planeFit();buttonSeparate();}})}2D界面的制作就是画图，和logo做了一个图标，一个图标可以在图纸中多次使用，可以显示不同的外观。下图右边的四个logo是同一个图标，分别表示不同的裁剪方式和透明度。系统中logo的进度条效果是通过动态改变icon的裁剪比例实现的，界面的淡出效果是改变透明度。整个图标的制作是通过不同图形的绘制组合而成。我们还可以改变这些图形的颜色，形成左边的logo样式。无人机形态切换无人机主要有三种形态：实体模式、线框模式和热力模式。点击下面的按钮，可以切换到按钮对应的表单。切换过程中显示目标窗体，并分别上下移动目标窗体和原窗体，让用户可以短时间同时查看，然后返回原位和隐藏原来的形式。隐藏的方式不同，线框模式是改变线框的颜色，另外两种模式是调整模型的透明度。这里的线框是根据模型的轮廓生成的，由3D引擎自动计算绘制，非常方便。//选择显示机型functionselect(data){constname=data.getDisplayName();constmoveData=dm3d.getDataByTag(名称);constnormalP=normalPlane.p3();ht.Default.startAnim({duration:1000,easing:t=>{return1-(--t)\*t\*t\*t;},action:(v,t)=>{if(name==='linePlane'){moveData.s('wf.color','rgba(64,173,152,'+v+')');}else{moveData.s('shape3d.opacity',v);}moveData.p3(normalP\[0\],normalP\[1\]+(4500-normalP\[1\])\*v,normalP\[2\]);isShow.p3(normalP\[0\],normalP\[1\]+(2500-normalP\[1\])\*v,normalP\[2\]);hiddenRing(v);},finishFunc:()=>{isShow.s('shape3d.透明',true);ht.Default.startAnim({duration:1000,easing:t=>{return1-(--t)\*t\*t\*t;},action:(v,t)=>{if(isShow.getTag()==='linePlane'){isShow.s('wf.color','rgba(64,173,152,'+(1-v)+')');}else{isShow.s('shape3d.opacity',1-v);}moveData.p3(normalP\[0\],4500+(normalP\[1\]-4500)\*v,normalP\[2\]);isShow.p3(normalP\[0\],2500+(normalP\[1\]-2500)\*v,normalP\[2\]);显示环（v）；},finishFunc:()=>{isShow=moveData;if(moveData.getTag()==='normalPlane'){moveData.s('shape3d.transparent',false);}isAnim=false;}});}});}通过3D引擎，我们可以生成三维图形，也可以添加导入的模型。坐标轴收敛的原点为图形的锚点，调整锚点后将无人机前方的旋转环调整到环的中心，操纵rotation属性进行旋转。系统中线框状态下的无人机是一个图像中心左侧的球体是这样生成的。如果我们将图形的透明度调整为0，则只会显示线框的样式。内部结构线框图模式下，你会发现按钮上方有一个小按钮，点击它可以进入无人机的另一种状态，在这里我们不仅可以看到线框图，还可以触摸无人机内部结构，检查它的每一个部件。进入的过程会隐藏场景中的其他图形，显示内部结构。//内部模式函数moveToInternal(){constwidth=background.getWidth();//获取背景的当前宽度constbeginLeft=-(width/2-960);//计算两边节点的起始位置constbeginRight=width/2+960;ht.Default.startAnim({duration:2000,easing:t=>{returnt;},action:(v,t)=>{linePlane.s('wf.color','rgba(64,173,152,'+(1-v)+')');hiddenRing(v);},finishFunc:()=>{dm3d.each(e=>{e.s('3d.visible',false)})linePlane\_internal.each(e=>{e.s('3d.visible',true);})ht.Default.startAnim({duration:1000,easing:t=>{return1-(--t)\*t\*t\*t;},动作：(v,t)=>{title.setY(-50+(70+50)\*v);returnButton.setY(1095+(1020-1095)\*v);leftShape.setX(beginLeft+130\*v);rightShape.setX(beginRight-130\*v);}})}})}下面我们来探讨一下进入内部模式时如何从四周慢慢进入窗口界面的图形是如何实现的？如今，终端的屏幕分辨率多种多样。很多网页在开发初期都会选择响应式布局或者自适应布局。HTforWeb的二维拓扑组件除了提供矢量绘图外，还提供了一套匹配的布局方式。从上图中我们可以看出，红框内的部分是初始加载界面，红框周围的部分是移入内部模式的部分。系统Pages中的加载与此不同正是因为添加了布局方式。首先，我们选中红框内的背景图片作为整个页面的根节点，修改其fullscreen属性为fill，并为其添加全屏锁定方法。其次，将根节点设置为剩余节点的吸附节点，并对剩余节点修改合适的布局方式。这样，背景图就会填满整个界面，而周围节点的位置会一直保持在背景图之外，不会显示在加载界面中。内部模式将周围的节点移动到界面中，也是通过修改位置来实现的，但是由于全屏锁定模式设置为垂直，改变了背景的宽度，左侧节点的移动获取当前界面的显示宽度后，还需要获取右侧。来计算移动位置。总结如今，随着信息化的飞速发展，智能化工具已经成为新的生产力，出现在我们的生活中。同时，工业互联网的概念也应运而生，将人、数据、设备链接在一起，可视化的界面可以很好的展示数据和设备，便于管理，更安全高效。HTforWeb提供了两种可视化模式，2D和3D。它功能强大且易于学习和使用。有兴趣的同学也可以体验一下。
