threejs 加载模型动画

要在 Three.js 中加载带动画的模型，需要使用以下步骤：

1. 导入 Three.js 库和其他必要的库文件。

<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r125/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/three/examples/js/loaders/GLTFLoader.js"></script>

2. 创建场景、相机和渲染器。

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

3. 加载模型和动画数据。

var loader = new THREE.GLTFLoader();
loader.load('model.gltf', function (gltf) {
    scene.add(gltf.scene);
    mixer = new THREE.AnimationMixer(gltf.scene);
    gltf.animations.forEach((clip) => {
        mixer.clipAction(clip).play();
    });
});

4. 在动画循环中更新动画状态。

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

在上述代码中，`model.gltf` 是包含模型和动画数据的 GLTF 文件路径。加载完成后，将模型添加到场景中，并为每个动画剪辑创建一个 `THREE.AnimationAction` 实例。然后，在动画循环中，使用 `THREE.AnimationMixer` 更新动画状态，并使用渲染器渲染场景。

注意：在加载模型和动画数据之前，你可能需要使用 Blender 或其他 3D 建模工具来创建和导出 GLTF 文件。