Three 之 Animation 初印象

Animation 初印象

动画效果

播放动画需要基本元素

AnimationMixer

一个对象所有动作的管理者

用于场景中特定对象的动画的播放器。一个对象可能有多个动作，Mixer 是用来管理所有动作的，它可以调度出对象的某个动作进行操控，如 mixer = new THREE.AnimationMixer(obj); mixer 就能管理 obj 对象的所有动画了。拥有 mixer 后，在 animate 函数中进行更新操作，用于更新该对象目前的状态。 mixer 可以让这个对象同时播放多个动作，因此需要在每帧中执行 update 方法

AnimationClip

一个对象的一个动作

动画剪辑（AnimationClip）是一个可重用的关键帧轨道集，它代表动画。

AnimationAction

用来管理单个动作，让这个动作开始暂停等等

AnimationActions 用来调度存储在 AnimationClips 中的动画。说明: AnimationAction的大多数方法都可以链式调用

使用方法

1. 加载一个对象，加载这个对象对应的 mixer 用于管理所有动作

mixer = new THREE.AnimationMixer(obj);

2. 加载出一个 action，用于处理单个（clip）动画集，并进行播放

mixer.clipAction(obj.animations[0]).play();

上文提到过 action 是可以链式操作了，clipAction 方法返回一个 action 对象

3. 在每一帧中更新对象的状态

mixer.update(delta);

实际代码

export function AnimationCommin() {
  const content = useRef();

  const scene = new THREE.Scene();
  scene.background = new THREE.Color(0xbfe3dd);
  const pointLight = new THREE.PointLight(0xffffff, 0.6);
  pointLight.position.set(150, 150, 150);
  scene.add(pointLight);
  scene.add(new THREE.AmbientLight(0xffffff, 2));
  const clock = new THREE.Clock();

  let mixer;

  useEffect(() => {
    const canvas = content.current;
    const renderer = new THREE.WebGLRenderer({ antialias: true, canvas });
    renderer.setPixelRatio(window.devicePixelRatio);
    renderer.setSize(canvas.clientWidth, canvas.clientHeight);

    const stats = new Stats();
    canvas.appendChild(stats.dom);

    const camera = new THREE.PerspectiveCamera(
      40,
      canvas.clientWidth / canvas.clientHeight,
      1,
      1000
    );
    camera.position.set(200, 200, 200);

    const controls = new OrbitControls(camera, canvas);
    controls.update();

    const loader = new FBXLoader();
    loader.load("/RumbaDancing.fbx", (obj) => {
      scene.add(obj);

      mixer = new THREE.AnimationMixer(obj);
      mixer.clipAction(obj.animations[0]).play();
    });

    animate();

    function animate() {
      requestAnimationFrame(animate);

      const delta = clock.getDelta();

      if (mixer) mixer.update(delta);

      controls.update();

      stats.update();

      renderer.render(scene, camera);
    }
  });
  return <canvas ref={content} />;
}