工控网首页
>

应用设计

>

无人机3D可视化系统的实现

无人机3D可视化系统的实现

2020/9/3 10:09:04

前言

近年来,无人机的发展越发迅速,既可民用于航拍,又可军用于侦察,涉及行业广泛,也被称为“会飞的照相机”。但作为军事使用,无人机的各项性能要求更加严格、重要。

本系统则是通过 图扑软件( Hightopo) 的 HT for Web 产品来搭建的一款 无人机 3D 可视化系统,通过对无人机及其信息的全景展示来模拟无人机状态的监控。

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


实现过程

  • 加载界面采用 2D 拓扑组件进行绘制,全矢量化图标,与传统的 png、jpg 等格式的图片相比,完美适配移动端、PC 端、大屏等各种尺寸及分辨率屏幕,不会出现失真情况。

  • 无人机及周边信息面板采用 3D 引擎进行场景搭建,用户可从场景任意位置对无人机进行查看。

  • 动画过程采用产品提供的动画函数 ht.Default.startAnim 来驱动图形属性值的改变,应用其 Time-Based 的方式,只需要指定动画周期 duration 的毫秒数,由系统去计算帧数或 action 函数被调用的次数,以保证更加高效、平滑的进行动画过程。

界面

科技多元化:基于 HTML5 WebGL 的无人机 3D 可视化系统


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

科技多元化:基于 HTML5 WebGL 的无人机 3D 可视化系统


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

无人机形态切换

科技多元化:基于 HTML5 WebGL 的无人机 3D 可视化系统


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

通过 3D 引擎,我们可以生成立体图形,也可以添加导入的模型,图形的位置由 x、y、z 三个方向的坐标来确认,而坐标轴汇聚的圆点则是图形的锚点,无人机前方旋转的圆环则是将锚点调整到圆环中心后,操纵 rotation 属性进行转动 。在系统中线框状态的无人机则是像图中左侧的球体这样生成的,如果我们将图形的透明度调为 0,则只显示线框的样式。

科技多元化:基于 HTML5 WebGL 的无人机 3D 可视化系统


内部结构

科技多元化:基于 HTML5 WebGL 的无人机 3D 可视化系统


在线框模式下,大家会发现按钮的上方出现了一个小按钮,点击它就可以进入到无人机的另一个状态,在这里我们除了可以看到线框,还能够接触到无人机的内部结构,查看它的每一个部件。进入的过程会将场景内的其它图形隐藏,将内部结构显示出来。

// 内部模式
function moveToInternal(){
  const width = background.getWidth();   // 获取背景当前宽度
  const beginLeft = -(width / 2 - 960);   // 计算两侧节点起始位置
  const beginRight = width / 2 + 960;
  ht.Default.startAnim({
    duration: 2000,
    easing: t => {
      return t;
    },
    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 => {
          return 1 - (--t) * t * t * t;
        },
        action: (v, t) => { 
          title.setY(-50 + (70 + 50) * v);
          returnButton.setY(1095 + (1020 - 1095) * v);
          leftShape.setX(beginLeft + 130 * v);
          rightShape.setX(beginRight - 130 * v);
        }
      })
    }
  })
}

审核编辑(
王静
)
投诉建议

提交

查看更多评论
其他资讯

查看更多

大数据+可视化,智慧工厂这样做事半功倍

工业4.0:无人机3D可视化系统的应用

能源管理可视化破冰而出

图扑智慧农业效率事半功倍

100%省力让城市管廊运维变得轻松