三维场景中常用的路径动画

前言

在三维场景中,除了用逼近真实的模型代表现实中的设备、标识物外,通常还会使用一些动画来表示模型在现实中一些行为和作用。常见的动画比如路径动画、旋转动画、发光动画、流动动画等。本文将为大家介绍几种常用的路径动画。首先,最简单的自然是直线路径动画。

直线路径动画

比如以下场景,地铁需要从上一站A驶入当前站B,在此过程中,我们将AB组合成一条路径(假设路径为直线),使用动画,不停的设置地铁(模型)的在路径上的位置,就可以实现地铁从A站-B站的动画过程。

const points = [A, B];
// 创建路径
let path = new mono.Path();
points.forEach((point, i) => {
  const { x, y, z } = point;
  if (i == 0) {
    path.moveTo(x, y, z);
  } else {
    path.lineTo(x, y, z);
  }
});
// 动画
const instance = new mono.Animate({
    form: 0,
    to:1,
    dur:3000,
    delay,
    reverse:false,
    repeat: 1,
    easing,
    onPlay,
    onUpdate: (val) => {
      // 获取路径上的点
      const point = path.getPointAt(val);
      // 设置实体位置
      entity.setPosition(point);
    },
    onDone,
});
instance.play();

动画效果:
三维场景中常用的路径动画-LMLPHP

至此,直线路径动画就实现了。那么现在想想,现实场景中不可能只有直线运动这种场景,比如小车巡检,就属于一个折线场景,那么我们就需要使用折线动画来完成。

折线路径动画

小车在房间内不间断的通过巡检监控,记录设备状态及检测相关数据。模拟小车巡检动画,我们需要采集巡检小车核心点位:A、B、C、D。同样的将ABCD组合成路径,不停的设置小车(模型)位置

const points = [A, B, C, D];
// 创建路径
let path = new mono.Path();
points.forEach(...);
// 动画
const instance = new mono.Animate({
    ...
    onUpdate: (val) => {
      // 获取路径上的点
      const point = path.getPointAt(val);
      // 设置实体位置
      entity.setPosition(point);
    },
    onDone,
});
instance.play();

动画效果:折线路径
三维场景中常用的路径动画-LMLPHP

当然,巡检过程可能是一个循环的闭合路径,所以可以满足使用四个点创建闭环路径,行形成闭环路径动画

折线路径闭环动画

const points = [A, B, C, D];
// 创建路径
let path = new mono.Path();
points.forEach(...);
// 闭环路径
path.closePath()
// 动画
const instance = new mono.Animate({
    ...
});
instance.play();

动画效果:闭环路径
三维场景中常用的路径动画-LMLPHP

上面的折线动画是完成了,但是转弯的时候似乎略显生硬,接下来我们再尝试如何让转弯更自然。

圆润的折线路径动画

其实很简单,在已有的折线动画基础上,对路径先进行一步拐角处理,让路径整体显得很趋于自然。

const points = [A, B, C, D];
// 创建路径
let path = new mono.Path();
points.forEach(...);
// 闭环路径
path.closePath()
// 获取平滑路径, 让转弯更自然
path = mono.PathNode.prototype.adjustPath(path, 20, 1);
// 动画
const instance = new mono.Animate({
    ...
});
instance.play();

动画效果:转弯更加的自然
三维场景中常用的路径动画-LMLPHP
实现了圆润的折线路径动画后,貌似看起来已经完工了。其实再仔细观察下,可以发现,在转弯的时候,模型没有同步转向,那么我们需要如何处理呢。

模型与路径动画同步旋转

在折线动画中,将模型绕对应的旋转旋转方向即可

const points = [A, B, C, D];
// 创建路径
let path = new mono.Path();
points.forEach(...);
// 闭环路径 获取平滑路径, 让转弯更自然
...
// 旋转向量
const rotate = new mono.Vec3();
// 动画
const instance = new mono.Animate({
    onUpdate: (val) => {
      // 位置
      ...
      // 模型同步旋转
      const tangent = path.getTangentAt(val);
      var normal = new mono.Vec3(0, 0, -1);
      rotate.rotationTowards(normal, tangent);
      entity.setRotation(rotate);
    }
});
instance.play();

动画效果:可以看到小车上的摄像头是一直朝向设备

三维场景中常用的路径动画-LMLPHP
那么,直线路径动画和折线路径动画介绍完了。从上面动画截图中可以看出,我们是在一个固定的位置查看动画,那么,能让镜头沿着路径一起移动么

镜头沿路径动画一起移动

显然,镜头是可以沿着路径同时移动的。通常用于巡航(自动巡检)中.主要是在折线动画的基础上,同步设置镜头动画的位置和朝向点。

const points = [....];
// 创建路径
let path = new mono.Path();
points.forEach(...);
// 闭环路径 获取平滑路径, 让转弯更自然
...
// 镜头初始位置
  const pos = camera.p(),
    target = camera.t();
  const length = pos.clone().sub(target).length();
// 动画
const instance = new mono.Animate({
    onUpdate: (val) => {
      // 模型
      ...
      // 镜头沿路径动画
      const tangent = path.getTangentAt(value);
      point = path.getPointAt(value);
      ntarget = point.clone().add(tangent.multiplyScalar(length));
      camera.p(point);
      camera.lookAt(ntarget);
    }
});
instance.play();

动画效果:
三维场景中常用的路径动画-LMLPHP

既然能让镜头沿着路径同步移动,那么是否能让镜头与路径保持平行移动呢

镜头与路径保持平行一起移动

保持平行移动,其实是在点位的基础上,将镜头位置设置到对应距离点位置。以下是基于动画链完成的某流水线作业动画,需要路径动画同时,镜头同步移动。对动画链有兴趣的可参考前文《基于路径集合的三维动画链

const points = [....];
// 创建路径
let path = new mono.Path();
points.forEach(...);
// 闭环路径 获取平滑路径, 让转弯更自然
...
// 镜头相对于目标动画模型的距离
const dis = 550
// 动画
const instance = new mono.Animate({
    onUpdate: (val) => {
      // 模型
      ...
      // 镜头平行X轴动画
      point = path.getPointAt(value);
      camera.setPosition(point.clone().add(new mono.Vec3(0, dis, dis)));
      camera.lookAt(point);
    }
});
instance.play();

动画效果:
三维场景中常用的路径动画-LMLPHP

案例说明

上面举例说明动画的示意图,来自两个案例,一个是地铁站三维可视化,可以认为是一个轨道交通方面的;另外一个是实验室车间 流水线可视化,主要用于流水线,设备监控等三维可视化呈现。

结语

至此,路径动画已经介绍的差不多了。利用常用的动画能够让整个三维场景更丰满,写实。希望在项目中可以多多利用起来。

关注公众号“ITMan彪叔” 可以及时收到更多有价值的文章。另外如果对可视化感兴趣,可以和我交流,微信541002349.

02-22 19:35