本帖最后由 一只鲸鱼 于 2020-9-3 10:21 编辑
前言
近年来，四轴飞行器的发展越发迅速，既可民用于航拍，又可军用于侦察，涉及行业广泛，也被称为“会飞的照相机”。但作为军事使用，四轴飞行器的各项性能要求更加严格、重要。
本系统则是通过 图扑软件（ Hightopo） 的 HT for Web 产品来搭建的一款 四轴飞行器 3D 可视化系统，通过对四轴飞行器及其信息的全景展示来模拟四轴飞行器状态的监控。
实现过程
加载界面采用 2D 拓扑组件进行绘制，全矢量化图标，与传统的 png、jpg 等格式的图片相比，完美适配移动端、PC 端、大屏等各种尺寸及分辨率屏幕，不会出现失真情况。 四轴飞行器及周边信息面板采用 3D 引擎进行场景搭建，用户可从场景任意位置对四轴飞行器进行查看。 动画过程采用产品提供的动画函数 ht.Default.startAnim 来驱动图形属性值的改变，应用其 Time-Based 的方式，只需要指定动画周期 duration 的毫秒数，由系统去计算帧数或 action 函数被调用的次数，以保证更加高效、平滑的进行动画过程。
界面
加载界面中通过动态改变图形的属性值来展现加载进度，加载完毕后通过动画的 finishFunc 调用 hidden2d 方法来改变图形的透明度，在此之后通过 moveCamera 将场景内视角拉近，从而实现淡出到淡入的效果（即离开加载界面进入到 3D 场景中）。与此同时改变图形在 3D 场景中位置来实现各形态的四轴飞行器合为一体以及将对应按钮分离。
2D 界面的制作是绘制了一张图纸，而 ** 则是制作了一个图标，一个图标可以在图纸中进行多次使用，并可展示不同的样子。下图中右侧的四个 ** 就是同一个图标，分别展示了不同的裁切方式以及透明度，系统中 ** 的进度条效果就是动态的去改变图标的裁切比例来实现，而界面的淡出效果则是改变透明度。整个图标的制作是绘制不同的图形组合而成，这些图形我们也可以去改变颜色，形成左侧的 ** 样式。
四轴飞行器形态切换
四轴飞行器主体形态分为三种：实体模式、线框模式和热力模式。通过点击下方按钮，可切换至按钮所对应的形态。切换的过程中，将目标形态进行显示，并分别上下移动目标形态和原形态，使用户可以短暂的进行同时查看，之后再回归原位并将原形态进行隐藏。隐藏的方式则有所不用，线框模式是改变线框颜色，其余两种模式则是调整模型的透明度。这里的线框是根据模型的轮廓生成的，通过 3D 引擎自动计算描绘，非常便捷。
内部结构
接下来，我们探索一下进入内部模式时，从四周缓缓移入窗口的图形又是怎么实现的
总结
现如今，信息化快速发展，智能化工具成为了新生产力出现在我们的生活中。与此同时，工业互联网的概念也随之诞生，将人、数据、设备联系到了一起，而可视化界面则可以很好的将数据和设备进行展示，方便管理的同时也更加安全、高效。
| 
楼主
