Three.js——骨骼动画

在Three.js中，骨骼动画通常是通过结合使用骨骼系统（Rigging System）和动画（Animation）来实现的。骨骼动画是一种使得模型的部分或全部骨骼根据某些规则移动的技术。

以下是一个使用Three.js创建骨骼动画的基本示例：

// 假设你已经有了Three.js的场景（scene）、相机（camera）和渲染器（renderer）
 
// 导入骨骼和动画相关的文件
import { SkeletonHelper, Mesh, Bone, AnimationMixer, Clip, LoopPingPong } from 'three';
 
// 导入你的模型和骨骼动画资源
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader.js';
import modelGltf from './model.gltf';
 
// 创建骨骼和动画的加载器
const loader = new GLTFLoader();
 
// 加载骨骼动画资源
loader.load(modelGltf, (gltf) => {
    // 获取模型
    const mesh = gltf.scene;
    scene.add(mesh);
 
    // 获取动画混合器
    const mixer = new AnimationMixer(mesh);
 
    // 获取动画片段
    const clip = AnimationClip.findByName(gltf.animations, '动画名称');
 
    // 播放动画
    const action = mixer.clipAction(clip);
    action.play();
 
    // 骨骼帮助器可以帮助调试骨骼动画
    const skeletonHelper = new SkeletonHelper(mesh);
    scene.add(skeletonHelper);
 
    // 渲染循环
    function animate() {
        requestAnimationFrame(animate);
        mesh.rotation.x += 0.005;
        mesh.rotation.y += 0.01;
 
        // 更新动画
        if (mixer) mixer.update(clock.getDelta());
 
        renderer.render(scene, camera);
    }
    animate();
});

在这个例子中，我们首先导入了Three.js的骨骼动画相关类，例如SkeletonHelper、Mesh、Bone、AnimationMixer和Clip。然后我们使用GLTFLoader加载了带有骨骼动画的模型。加载完成后，我们获取了模型、骨骼的动画混合器，并找到了要播放的动画片段。接着，我们将动画片段添加到动画混合器中，并设置动画循环播放。最后，我们添加了一个骨骼帮助器到场景中，以帮助调试骨骼动画。在渲染循环中，我们更新了动画状态，并进行了渲染。