近年来，无人机的成长更加迅速，既可民用于航拍，又可军用于侦察，涉及行业广泛，也被称为“会飞的照相机”。但作为军事使用，无人机的各项性能要求越发严格、重要。本系统则是通过 Hightopo 的  HT for Web  产品来搭建的一款 无人机 3D 可视化系统，通过对无人机及其信息的全景展示来模拟无人机状态的监控。

系统中包罗 4 种展示模式：实体模式 、热力模式、线框模式和内部模式，通过飞机下方操纵按钮即可进行模式切换。

预览地点：

加载界面给与 2D 拓扑组件进行绘制，全矢量化图标，，与传统的 png、jpg 等格局的图片对比，完美适配移动端、PC 端、大屏等各类尺寸及辨别率屏幕，不会呈现掉真情况。

无人机及周边信息面板给与 3D 引擎进行场景搭建，用户可从场景任意位置对无人机进行检察。

动画过程给与产品供给的动画函数 ht.Default.startAnim 来驱动图形属性值的转变，应用其 Time-Based 的方法，只需要指定动画周期 duration 的毫秒数，由系统去计算帧数或 action 函数被挪用的次数，以保证越发高效、平滑的进步履画过程。

加载界面中通过动态转变图形的属性值来展现加载进度，加载完毕后通过动画的 finishFunc 挪用 hidden2d 要领来转变图形的透明度，在此之后通过 moveCamera 将场景内视角拉近，从而实现淡出到淡入的效果（即分开加载界面进入到 3D 场景中）。与此同时转变图形在 3D 场景中位置来实现各形态的无人机合为一体以及将对应按钮疏散。

// 加载进度 function loadAnim(){ ht.Default.startAnim({ duration: 6000, easing: t => { return 1 - (--t) * t * t * t; }, action: (v, t) => { loge.s(‘clip.percentage‘, v); percentText.s(‘text‘, Math.floor(v * 100)); }, finishFunc: () => { hidden2d() } }) } // 隐藏 2d 图纸 function hidden2d(){ ht.Default.startAnim({ duration: 500, easing: t => { return t; }, action: (v, t) => { dm2d.each(e => { e.s(‘opacity‘, 1 - v); }) }, finishFunc: () => { dm2d.setBackground(‘‘); g3d.moveCamera(eye, center, {duration: 3000, easing: t => {return 1 - (--t) * t * t * t;}}); planeFit(); buttonSeparate(); } }) }

2D 界面的制作是绘制了一张图纸，而 logo 则是制作了一个图标，一个图标可以在图纸中进行多次使用，并可展示差此外样子。下图中右侧的四个 logo 就是同一个图标，分袂展示了差此外裁切方法以及透明度，系统中 logo 的进度条效果就是动态的去转变图标的裁切比例来实现，而界面的淡出效果则是转变透明度。整个图标的制作是绘制差此外图形组合而成，这些图形我们也可以去转变颜色，形成左侧的 logo 样式。

无人机主体形态分为三种：实体模式、线框模式和热力模式。通过点击下方按钮，可切换至按钮所对应的形态。切换的过程中，将方针形态进行显示，并分袂上下移动方针形态和原形态，使用户可以短暂的进行同时检察，之后再回归原位并将原形态进行隐藏。隐藏的方法则有所不用，线框模式是转变线框颜色，其余两种模式则是调解模型的透明度。这里的线框是按照模型的轮廓生成的，通过 3D 引擎自动计算描绘，非常便捷。

// 选择展示机型 function select(data){ const name = data.getDisplayName(); const moveData = dm3d.getDataByTag(name); const normalP = normalPlane.p3(); ht.Default.startAnim({ duration: 1000, easing: t => { return 1 - (--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.transparent‘, true); ht.Default.startAnim({ duration: 1000, easing: t => { return 1 - (--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]); showRing(v); }, finishFunc: () => { isShow = moveData; if(moveData.getTag() === ‘normalPlane‘){ moveData.s(‘shape3d.transparent‘, false); } isAnim = false; } }); } }); }