模型动画

多个动画

如果模型有多个动画剪辑，您可以为每个剪辑创建一个新的AnimationAction对象，并使用AnimationMixer对象控制它们的播放。
例如，如果您的模型有两个动画剪辑，您可以按以下方式创建和管理动画：

const mixer = new THREE.AnimationMixer(model)

// 获取第一个动画剪辑并创建新的AnimationAction对象
const clip1 = gltf.animations[0]
const action1 = mixer.clipActon(clip1)

// 获取第二个动画剪辑并创建新的AnimationAction对象
const clip2 = gltf.animation[1]
const action2 = mixer.clipAction(clip2)

// 开始播放第一个动画剪辑
action1.play()
// 在一定时间后停止第一个动画剪辑并播放第二个动画剪辑
setTimeout(function() {
  action1.stop();
  action2.play();
}, 5000);

在这个例子中，我们首先创建了一个新的AnimationMixer对象，然后获取了模型的第一个和第二个动画剪辑，并为每个剪辑创建了一个新的AnimationAction对象。然后我们使用.play()方法开始播放第一个动画剪辑。

在5秒后，我们使用.stop()方法停止第一个动画剪辑，并使用.play()方法开始播放第二个动画剪辑。

需要注意的是，每个动画剪辑都可以具有不同的播放速度、持续时间和循环方式，因此您需要在创建AnimationAction对象时设置相应的参数，以便正确控制动画的播放。

监听动画完成

以下是一个示例代码，用于监听第一个动画剪辑的结束事件并开始播放第二个动画剪辑：

// 获取第一个动画剪辑并创建新的AnimationAction对象
const clip1 = gltf.animations[0];
const action1 = mixer.clipAction(clip1);
// 监听第一个动画剪辑的结束事件
action1.clampWhenFinished = true;
action1.loop = THREE.LoopOnce;
action1.enable = true;
action1.paused = false;
action1.play();
action1.addEventListener('finished', () => {
  action1.stop();
  action2.play();
})

在这个例子中，我们首先创建了两个AnimationAction对象，一个用于第一个动画剪辑，另一个用于第二个动画剪辑。然后，我们使用.play()方法开始播放第一个动画剪辑，并使用addEventListener()方法添加一个名为“finished”的事件监听器，该监听器在第一个动画剪辑播放结束时触发。

在事件处理程序中，我们使用.stop()方法停止第一个动画剪辑，并使用.play()方法开始播放第二个动画剪辑。

需要注意的是，我们在第一个动画剪辑中设置了一些属性，例如clampWhenFinished、loop、enable和paused，以确保动画正确地播放和结束。这些属性可以根据您的实际需求进行调整。

多个动画循环

监听每个动画剪辑的结束事件，并在每个事件处理程序中启动下一个动画剪辑，并设置循环选项以使它们循环播放。

// 获取三个动画剪辑并创建新的AnimationAction对象
var clip1 = gltf.animations[0];
var action1 = mixer.clipAction(clip1);
var clip2 = gltf.animations[1];
var action2 = mixer.clipAction(clip2);
var clip3 = gltf.animations[2];
var action3 = mixer.clipAction(clip3);

// 设置第一个动画剪辑的循环选项
action1.setLoop(THREE.LoopOnce, 0);

// 监听第一个动画剪辑的结束事件
action1.clampWhenFinished = true;
action1.enable = true;
action1.paused = false;
action1.play();
action1.addEventListener('finished', function() {
  // 在第一个动画剪辑结束后开始播放第二个动画剪辑
  action1.stop();
  action2.setLoop(THREE.LoopOnce, 0);
  action2.clampWhenFinished = true;
  action2.enable = true;
  action2.paused = false;
  action2.play();
});

// 监听第二个动画剪辑的结束事件
action2.addEventListener('finished', function() {
  // 在第二个动画剪辑结束后开始播放第三个动画剪辑
  action2.stop();
  action3.setLoop(THREE.LoopOnce, 0);
  action3.clampWhenFinished = true;
  action3.enable = true;
  action3.paused = false;
  action3.play();
});

// 监听第三个动画剪辑的结束事件
action3.addEventListener('finished', function() {
  // 在第三个动画剪辑结束后重新开始第一个动画剪辑的循环播放
  action3.stop();
  action1.setLoop(THREE.LoopOnce, 0);
  action1.clampWhenFinished = true;
  action1.enable = true;
  action1.paused = false;
  action1.play();
});

在代码中，我们首先创建了三个AnimationAction对象分别对应着三个动画剪辑，然后为第一个动画剪辑设置了循环选项，以使其只播放一次。接着，我们监听了第一个动画剪辑的结束事件，并在事件处理程序中停止第一个动画剪辑，开始播放第二个动画剪辑，并为其设置了循环选项和其他属性。

然后，我们又监听了第二个动画剪辑的结束事件，在事件处理程序中停止第二个动画剪辑，开始播放第三个动画剪辑，并为其设置了循环选项和其他属性。

最后，我们又监听了第三个动画剪辑的结束事件，在事件处理程序中停止第三个动画剪辑，重新开始循环播放第一个动画剪辑，并为其设置了循环选项和其他属性。

需要注意的是，我们为每个动画剪辑设置了不同的循环选项，以适应您的需求。您可以根据实际情况调整这些选项，以便正确控制动画的播放。