基于 HTML5 + WebGL 的无人机 3D 可视化系统

UltraLAB

2019-12-31

前言

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

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

预览地址：http://www.hightopo.com/demo/Drones/

实现过程

加载界面采用 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 样式。