three.js加载动画设置

在three.js中加载动画需要用到以下三个类：

1. `GLTFLoader`：用于加载gltf文件，它是three.js官方提供的一个加载器。

2. `AnimationMixer`：用于管理动画的混合器，每个模型只需创建一个AnimationMixer对象即可。

3. `AnimationAction`：用于控制动画的播放、停止、暂停等操作。

下面是一个加载gltf模型并播放动画的示例代码：

import * as THREE from 'three';
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';

const loader = new GLTFLoader();

loader.load('model.gltf', function (gltf) {

  const model = gltf.scene;

  const mixer = new THREE.AnimationMixer(model);
  const action = mixer.clipAction(gltf.animations[0]);
  action.play();

  scene.add(model);

  function animate() {
    requestAnimationFrame(animate);
    mixer.update(deltaTime);
    renderer.render(scene, camera);
  }

  animate();

}, undefined, function (error) {
  console.error(error);
});

在上述代码中，我们先创建了一个GLTFLoader对象，并通过它加载了一个gltf模型。在加载成功的回调函数中，我们获取到了模型的根节点，创建了一个AnimationMixer对象，并使用它来管理模型的动画。通过clipAction方法可以获取到动画的Action对象，并对其进行播放等操作。最后，将模型添加到场景中，并在animate函数中更新AnimationMixer对象的状态。

需要注意的是，在动画播放时需要在循环渲染的函数中调用mixer.update方法来更新AnimationMixer对象的状态，同时需要传入deltaTime参数以便计算动画的进度。