ThreeJS入门（123）：THREE.Skeleton 知识详解，示例代码

作者： 还是大剑师兰特 ，曾为美国某知名大学计算机专业研究生，现为国内GIS领域高级前端工程师，CSDN知名博主，深耕openlayers、leaflet、mapbox、cesium，webgl，ThreeJS，canvas，echarts等技术开发，欢迎加微信（gis-dajianshi），一起交流。

文章目录

• • • 构造函数
    • 属性
    • 方法
    • 使用示例
    • 骨骼动画
    • 总结

THREE.Skeleton 是 Three.js 中用于管理骨骼动画的一个类。它提供了一种方式来定义和管理一组骨骼，这些骨骼可以被用来驱动模型的动画。THREE.Skeleton 通常与 THREE.Bone 一起使用，以创建复杂的角色动画。

构造函数

构造函数 new THREE.Skeleton(bones, bindMatrix) 接受两个参数来定义骨骼：

• bones：一个包含所有骨骼的数组，每个元素都是一个 THREE.Bone 实例。
• bindMatrix：一个可选的 THREE.Matrix4 对象，用于表示骨骼在绑定姿势下的全局矩阵。如果未提供，则默认为单位矩阵。

属性

THREE.Skeleton 的实例拥有以下属性：

• bones：一个包含所有骨骼的数组。
• bindMatrix：骨骼在绑定姿势下的全局矩阵。
• bindMode：一个布尔值，表示当前是否处于绑定模式。默认为 false。
• bindTarget：一个 THREE.Object3D 实例，表示与骨骼绑定的目标对象。

方法

THREE.Skeleton 的实例提供了一些方法来操作和更新骨骼：

• computeBindMatrix()：计算并设置绑定矩阵。
• update()：更新骨骼的状态。
• pose()：将骨骼恢复到其初始的绑定姿势。
• applyTo(mesh)：将骨骼应用到指定的网格对象上，使网格跟随骨骼的变换。

使用示例

假设你想创建一个带有骨骼的角色，并为其添加动画：

// 创建骨骼
const bones = [];

// 创建多个骨骼
for (let i = 0; i < 10; i++) {
    const bone = new THREE.Bone();
    bones.push(bone);
}

// 创建 Skeleton
const skeleton = new THREE.Skeleton(bones);

// 计算绑定矩阵
skeleton.computeBindMatrix();

// 创建几何体
const geometry = new THREE.BoxGeometry(1, 1, 1);

// 创建材质
const material = new THREE.MeshSkinMaterial({
    skinHelper: true,
    morphTargets: false,
    wireframe: false,
    skinning: true,
});

// 创建网格对象，并与骨骼绑定
const mesh = new THREE.SkinnedMesh(geometry, material);
mesh.add(skeleton.bones[0]);
mesh.bind(skeleton);

// 将网格添加到场景中
scene.add(mesh);

// 在渲染循环中更新骨骼
function animate() {
    requestAnimationFrame(animate);

    // 更新骨骼的位置
    skeleton.bones[0].position.x = Math.sin(Date.now() * 0.001) * 10;

    // 更新骨骼
    skeleton.update();

    // 更新网格
    mesh.updateMatrixWorld(true);

    renderer.render(scene, camera);
}
animate();

在这个例子中，我们创建了一个包含 10 个骨骼的 THREE.Skeleton，并将骨骼绑定到了一个 THREE.SkinnedMesh 上。通过更新骨骼的位置并在渲染循环中更新骨骼状态，我们可以看到网格随着骨骼的变化而变化。

骨骼动画

为了实现骨骼动画，通常需要导入一个包含骨骼动画序列的模型文件（如 .gltf, .glb, .fbx 等）。Three.js 支持导入这些格式的模型，并自动处理骨骼动画。你可以使用 GLTFLoader 或 FBXLoader 等加载器来加载这些模型。

// 使用 GLTFLoader 加载模型
const loader = new THREE.GLTFLoader();
loader.load('path/to/model.gltf', function (gltf) {
    const model = gltf.scene;

    // 添加到场景
    scene.add(model);

    // 在渲染循环中播放动画
    function animate() {
        requestAnimationFrame(animate);

        // 更新动画
        if (model.animations && model.animations.length > 0) {
            const mixer = new THREE.AnimationMixer(model);
            const action = mixer.clipAction(model.animations[0]);
            action.play();

            mixer.update(deltaTime); // deltaTime 是当前帧与前一帧之间的时间差
        }

        renderer.render(scene, camera);
    }
    animate();
});

在这个例子中，我们使用 GLTFLoader 加载了一个包含骨骼动画的模型，并使用 AnimationMixer 来播放动画。

总结

THREE.Skeleton 是 Three.js 中用于管理骨骼动画的一个类。通过定义一组骨骼并与网格绑定，你可以创建复杂的角色动画。理解和熟练使用 THREE.Skeleton 对于开发高质量的 Three.js 应用程序是非常有帮助的。在实际应用中，通常还需要结合使用动画混合器（AnimationMixer）来播放动画序列。

需要注意的是，Three.js 的版本可能会有所不同，因此具体的方法和属性可能会有所变化。在实际使用时，请参考最新的 Three.js 文档。