Three.js关键帧动画不连续正放、倒放出现的部分问题

Three.js小白的学习之路。

这段时间工作上要制作一个开关门的关键帧动画。结果在实现过程中出现了倒放失败、倒放时动画直接回到初始状态等问题。下面来一一地分析。

一开始的想法是，在blender中为模型添加上相应的动画，然后再代码进行控制，正放就是timescale为1，倒放就是-1，每次动画只播放一次，动画结束后，让其停留在结束位置即可。动画时长为1s。

为此写下了以下代码：

const open = ref(true);
let mixer;
const actions = [];

new GLTFLoader().load("/openDoor.glb", (glb) => {
  const mesh = glb.scene;
  scene.add(mesh);
  mesh.rotateY(-Math.PI / 2);

  const aniList = glb.animations.filter((item) => item.name.startsWith("door"));

  mixer = new Three.AnimationMixer(mesh);

  aniList.forEach((item) => {
    const action = mixer!.clipAction(item);
    actions.push(action);
  });
});


const openDoor = () => {
  actions.forEach((action) => {
    action.play();
    action.timeScale = open.value ? 1 : -1;
    action.loop = Three.LoopOnce;
    action.clampWhenFinished = true; // 动画结束停留在结束位置
  });
  open.value = !open.value;
};

写了一个按钮，用于控制open的value，并执行相应的动画操作。设置了clampWhenFinished为true，使动画结束后留在结束位置。

效果如下：

发现，无法倒放。查询得知，使用了clampWhenFinished时，需要调用reset方法进行重置，才可以。于是加上之后的代码：

const openDoor = () => {
  actions.forEach((action) => {
    action.reset(); // 重置状态
    action.play();
    action.timeScale = open.value ? 1 : -1;
    action.loop = Three.LoopOnce;
    action.clampWhenFinished = true; // 动画结束停留在结束位置
  });

  open.value = !open.value;
};

效果如下：

 点击之后发现，门瞬间关闭，并不是我想象中的动画倒放。

于是我针对action的状态进行了查看：

const openDoor = () => {
  actions.forEach((action) => {
    action.reset();
    action.play();
    action.timeScale = open.value ? 1 : -1;
    action.loop = Three.LoopOnce;
    action.clampWhenFinished = true; // 动画结束停留在结束位置
    open &&
      setTimeout(() => {
        action!.paused = true;
      }, 500);
    !open && (action!.paused = true);
  });
  console.log(actions);

  open.value = !open.value;
};

我让其在0.5s时停止动画，倒放时立即停止。

观察到，即使立即停止，倒放点击时依然是直接回到了原始状态。打印结果如下图所示：

(0.5s停止)

(倒放直接停止)

可以看到，time清零了。

至此问题就已经看清楚了，是因为reset方法使time清0，导致倒放从0s->0s，等于立即结束。

因此解决方法有以下两种：

1.自己手动将时间设置到动画结束的时间

const openDoor = () => {
  actions.forEach((action) => {
    action.reset();
    action.play();
    action.timeScale = open.value ? 1 : -1;
    action.time = open.value ? 0 : action.getClip().duration; // 保证倒放正常播放
    action.loop = Three.LoopOnce;
    action.clampWhenFinished = true; // 动画结束停留在结束位置
  });
  open.value = !open.value;
};

2.探究一下clampWhenFinished属性

经过控制台打印可以看到(全过程动画结束后的控制台打印)，设置clampWhenFinished为true是，动画的paused变成了true，也就是动画暂停了。

因此可以猜测clampWhenFinished的原理就是在动画结束时的前一刻，使动画暂停，从而完成动画结束后停留在原位置的操作。因此我们在倒放时只需要手动的将paused属性置为false即可。

const openDoor = () => {
  actions.forEach((action) => {
    action.play();
    action.paused = false;
    action.timeScale = open.value ? 1 : -1;
    action.loop = Three.LoopOnce;
    action.clampWhenFinished = true; // 动画结束停留在结束位置
  });
  open.value = !open.value;
};

当然，这样就不需要使用reset方法了。

最终效果如图：