Three.js 详解 Skeleton 骨架

在 Three.js 中，Skeleton 是一个用来管理骨骼系统的类，主要用于实现角色的骨骼动画。通过 Skeleton，你可以控制多个骨骼（bones）的变换，从而驱动网格（mesh）模型的运动。

Skeleton( bones : Array, boneInverses : Array ) bones —— 包含有一组bone的数组，默认值是一个空数组。 boneInverses —— （可选） 包含Matrix4的数组。 创建一个新的Skeleton.

Skeleton 有四个属性七个方法

属性

• bones : Array 包含有一组bone的数组。请注意，这是一份原始数组的拷贝，不是引用，所以你可以在不对当前数组造成影响的情况下，修改原始数组。 对应构造函数中 bones 数组的数据

• boneInverses : Array 包含有一组Matrix4，表示每个独立骨骼matrixWorld矩阵的逆矩阵。

    const bone1 = new THREE.Bone();
    const bone2 = new THREE.Bone();
    bone1.add(bone2);
    const skeleton = new THREE.Skeleton([bone1, bone2]);
    console.log(skeleton.boneInverses);  // 输出 bone bone2 每个骨骼的逆矩阵 [ { "elements": [ 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1 ] }, { "elements": [ 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1 ] } ]

• boneMatrices : Float32Array 当使用顶点纹理时，数组缓冲区保存着骨骼数据。这个数组以线性方式存储每个骨骼的 4x4 变换矩阵，每个矩阵占用 16 个浮点数。该数组的大小是 bones.length * 16。

    // 在这个例子中，`boneMatrices` 会包含 `bone1` 和 `bone2` 的 4x4 变换矩阵，以 `Float32Array` 的形式储存。
    const bone1 = new THREE.Bone();
    const bone2 = new THREE.Bone();
    bone1.add(bone2);
    const skeleton = new THREE.Skeleton([bone1, bone2]);
    // 更新骨骼矩阵
    skeleton.calculateInverses();
    skeleton.pose();
    console.log(skeleton.boneMatrices);  // 输出骨骼矩阵的 Float32Array { "0": 0, "1": 0, "2": 0, "3": 0, "4": 0, "5": 0, "6": 0, "7": 0, "8": 0, "9": 0, "10": 0, "11": 0, "12": 0, "13": 0, "14": 0, "15": 0, "16": 0, "17": 0, "18": 0, "19": 0, "20": 0, "21": 0, "22": 0, "23": 0, "24": 0, "25": 0, "26": 0, "27": 0, "28": 0, "29": 0, "30": 0, "31": 0 }

• boneTexture : DataTexture 当使用顶点纹理时，DataTexture保存着骨骼数据。 在 Three.js 中，boneTexture 是 Skeleton 类的一个属性，它是一个 DataTexture 对象，用于在需要大量骨骼动画时将骨骼的变换矩阵存储在纹理中。通过使用 boneTexture，可以利用 GPU 来处理骨骼动画，从而提高渲染性能，特别是在有大量骨骼的情况下。如果场景中骨骼较少（通常少于 50 个），boneTexture 可能不会自动启用，这种情况下没有问题，因为 CPU 处理已经足够快。

方法

• clone () : Skeleton 返回一个当前Skeleton对象的克隆。

• calculateInverses () : undefined 如果没有在构造器中提供，生成boneInverses数组。

  

    const bone1 = new THREE.Bone();
    const bone2 = new THREE.Bone();
    bone1.add(bone2);
    const skeleton = new THREE.Skeleton([bone1, bone2]);
    // 计算骨骼的逆矩阵
    skeleton.calculateInverses();
    console.log(skeleton.boneInverses);  // 输出骨骼的逆矩阵 [ { "elements": [ 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1 ] }, { "elements": [ 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1 ] } ]

• computeBoneTexture () : this 计算 DataTexture 的实例，以便更有效地将骨骼数据传递到着色器。纹理被分配给boneTexture。

    const bone1 = new THREE.Bone();
    const bone2 = new THREE.Bone();
    bone1.add(bone2);
    const skeleton = new THREE.Skeleton([bone1, bone2]);
    // 计算骨骼的逆矩阵
    skeleton.calculateInverses();
    console.log(skeleton.boneInverses);  // 输出骨骼的逆矩阵 [ { "elements": [ 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1 ] }, { "elements": [ 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1 ] } ]

• pose () : undefined 返回骨架的基础姿势。

• update () : undefined 在改变骨骼后，更新boneMatrices 和 boneTexture的值。 如果骨架被用于SkinnedMesh，则它将会被WebGLRenderer自动调用。

• getBoneByName ( name : String ) : Bone name —— 匹配Bone对象中.name属性的字符串。 在骨架中的骨骼数组中遍览，并返回第一个能够和name匹配上的骨骼对象。

    const bone1 = new THREE.Bone();
    bone1.name = 'spine';
    const bone2 = new THREE.Bone();
    bone2.name = 'left_arm';
    const skeleton = new THREE.Skeleton([bone1, bone2]);
    // 根据名称查找骨骼
    const foundBone = skeleton.getBoneByName('spine');
    console.log(foundBone);  // 输出为找到的骨骼对象（bone1）
    const missingBone = skeleton.getBoneByName('right_leg');
    console.log(missingBone);  // 输出 null，因为没有名为 'right_leg' 的骨骼 { "metadata": { "version": 4.6, "type": "Object", "generator": "Object3D.toJSON" }, "object": { "uuid": "193381dc-9ca6-4570-8927-e3ea2173fbc3", "type": "Bone", "name": "spine", "layers": 1, "matrix": [ 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1 ], "up": [ 0, 1, 0 ] } }

• dispose () : undefined 如果应用程序中的 Skeleton 实例已过时，则可以使用。该方法将释放内部资源。