threejs gltf动画

Three.js是一个基于WebGL的JavaScript库，用于创建互动的3D图形和动画在浏览器中。GLTF（GL Transmission Format）是一个用于交换3D模型的数据格式，它支持动画，纹理和其他细节。

在Three.js中使用GLTF动画的过程大致如下：

1. 加载模型：首先，你需要使用Three.js的`GLTFLoader`加载包含动画的GLTF文件。这个库可以自动处理模型和动画数据。

const loader = new THREE.GLTFLoader();
loader.load('model.gltf', function(gltf) {
  scene.add(gltf.scene);
});

2. 使用动画：加载完成后，你可以通过访问`gltf.scene.animations`来获取所有的动画。每个动画对象有一个`clip`属性，表示该动画的播放序列。

const animation = gltf.scene.animations;
animation.play(); // 开始播放动画

3. 控制动画：你可以设置动画的速度、循环次数等。例如，`animation.timeScale`调整动画速度，`animation.loop`设置是否循环播放。

animation.timeScale = 0.5; // 速度减半
animation.loop = true; // 循环播放

4. 绑定到对象：确保你的3D对象（比如Mesh）有一个动画混合器（AnimationMixer），然后将动画绑定到该对象上。

const mixer = new THREE.AnimationMixer(scene);
const clipAction = mixer.clipAction(animation);
clipAction.setTarget(object); // 将动画绑定到对象