Three.js 从一个位置动画到另一个位置

Question

假设我有一个形状 atposition.x = 0并且我想在渲染循环中平滑地将其动画化为position.x = 2.435. 我该怎么做？

Answer 1

您可以使用三个AnimationMixer。下面的函数设置动画。示例jsFiddle。

const createMoveAnimation = ({ mesh, startPosition, endPosition }) => {
  mesh.userData.mixer = new AnimationMixer(mesh);
  let track = new VectorKeyframeTrack(
    '.position',
    [0, 1],
    [
      startPosition.x,
      startPosition.y,
      startPosition.z,
      endPosition.x,
      endPosition.y,
      endPosition.z,
    ]
  );
  const animationClip = new AnimationClip(null, 5, [track]);
  const animationAction = mesh.userData.mixer.clipAction(animationClip);
  animationAction.setLoop(LoopOnce);
  animationAction.play();
  mesh.userData.clock = new Clock();
  this.animationsObjects.push(mesh);
};