Three.js：为SkinnedMesh绘制包围盒遇适配问题求助

首先，你遇到的问题其实是THREE.BoxHelper的默认行为导致的——它只会计算模型初始绑定状态下的包围盒，不会考虑蒙皮动画对顶点位置的实时影响。当模型播放骨骼动画时，顶点会根据骨骼变换移动，但BoxHelper不会自动更新这些动态变化的顶点数据，所以才会出现包围盒和模型不匹配的情况。

下面给你几个可行的解决思路：

1. 实时计算动画后顶点的包围盒 #

这是精度最高的方案，你可以手动遍历蒙皮模型所有受动画影响的顶点，计算它们在世界空间中的位置，然后基于这些位置生成包围盒。具体步骤和示例代码如下：

• 初始化时创建空的THREE.Box3和对应的BoxHelper
• 在每一帧动画更新后，遍历模型的SkinnedMesh实例的顶点数据
• 通过顶点的骨骼权重和骨骼矩阵，计算出顶点的实时世界坐标
• 将每个顶点的世界坐标添加到Box3中，更新包围盒范围
• 最后同步更新BoxHelper的显示

// 初始化包围盒和辅助器
const dynamicBox = new THREE.Box3();
const boxHelper = new THREE.BoxHelper(new THREE.Mesh(), 0xff0000);
scene.add(boxHelper);

// 动画循环中实时更新
function animate() {
  requestAnimationFrame(animate);

  // 先让动画和模型矩阵更新
  trooper.updateMatrixWorld();
  // 清空之前的包围盒数据
  dynamicBox.makeEmpty();

  // 获取模型的顶点、骨骼索引和权重数据
  const geometry = trooper.geometry;
  const positionAttr = geometry.attributes.position;
  const skinIndexAttr = geometry.attributes.skinIndex;
  const skinWeightAttr = geometry.attributes.skinWeight;

  // 遍历所有顶点计算实时世界位置
  for (let i = 0; i < positionAttr.count; i++) {
    const vertex = new THREE.Vector3().fromBufferAttribute(positionAttr, i);
    const skinIndex = new THREE.Vector4().fromBufferAttribute(skinIndexAttr, i);
    const skinWeight = new THREE.Vector4().fromBufferAttribute(skinWeightAttr, i);

    const worldVertex = new THREE.Vector3();
    // 基于4组骨骼权重计算顶点最终位置
    for (let j = 0; j < 4; j++) {
      const weight = skinWeight.getComponent(j);
      if (weight === 0) continue;
      const bone = trooper.skeleton.bones[skinIndex.getComponent(j)];
      bone.updateMatrixWorld();
      const tempVertex = vertex.clone().applyMatrix4(bone.matrixWorld);
      worldVertex.add(tempVertex.multiplyScalar(weight));
    }

    // 扩展包围盒范围
    dynamicBox.expandByPoint(worldVertex);
  }

  // 更新辅助器的包围盒并刷新显示
  boxHelper.box.copy(dynamicBox);
  boxHelper.update();

  renderer.render(scene, camera);
}

2. 基于骨骼的近似包围盒（性能优先） #

如果实时计算所有顶点的性能开销太大，你可以退而求其次，计算所有骨骼的包围盒并合并成一个整体范围。这种方法性能更好，但包围盒会比实际模型稍大，适合对精度要求不高的场景：

function updateBoneBasedBox() {
  const boneBox = new THREE.Box3();
  trooper.skeleton.bones.forEach(bone => {
    bone.updateMatrixWorld();
    const bonePos = bone.getWorldPosition(new THREE.Vector3());
    // 根据骨骼尺寸调整扩展范围，这里用固定值示例
    boneBox.expandByPoint(bonePos.clone().addScalar(0.6));
    boneBox.expandByPoint(bonePos.clone().subScalar(0.6));
  });
  boxHelper.box.copy(boneBox);
  boxHelper.update();
}

3. 注意默认方法的局限性 #

你可能试过调用trooper.geometry.computeBoundingBox()，但这个方法只会重新计算模型初始绑定状态的包围盒，完全不会考虑动画带来的顶点位移，所以无法解决你的核心问题，仅适合不需要动画的静态蒙皮模型。

你可以根据自己场景的性能需求和精度要求，选择最适合的方案。

内容的提问来源于stack exchange，提问作者blockwork