GLTF带SkinnedMesh模型的正确包围盒与射线检测问题求助

问题核心 #

导入含SkinnedMesh的GLTF模型时，BoxHelper生成的包围盒仅覆盖绑定姿态的顶点，无法适配蒙皮动画后的顶点偏移，进而导致射线检测因包围盒剔除而失效。动态加载场景下无法手动定义包围盒，也不希望依赖frustumCulled=false的临时方案。

根源分析 #

SkinnedMesh的默认boundingBox基于绑定姿态生成，Three.js不会自动根据骨骼变换更新该包围盒。BoxHelper依赖对象的原始包围盒计算，因此无法覆盖动画后的顶点范围。

解决方案 #

通过动态计算SkinnedMesh动画状态下的顶点包围盒，再合并所有子对象的包围盒，实现完整的包围盒覆盖：

1. 遍历并更新所有SkinnedMesh的包围盒 #

递归遍历模型子对象，对每个SkinnedMesh：

• 强制更新世界矩阵与骨骼变换，确保顶点位置是动画后的状态
• 遍历顶点并应用骨骼变换，计算真实的包围盒并更新到几何体

2. 生成全局包围盒 #

使用Box3.expandByObject合并所有子对象（含已更新的SkinnedMesh）的包围盒，再用BoxHelper可视化。

3. 修复射线检测 #

更新包围盒后，射线检测会正确识别SkinnedMesh的实际位置。若仍有问题，可批量禁用SkinnedMesh的frustumCulled，或确保射线检测时开启recursive参数。

完整代码示例 #

loader.load(filename, function (gltf) {
  const mgroup = new THREE.Group();
  // 迁移模型子对象到自定义组
  while (gltf.scene.children.length > 0) {
    const child = gltf.scene.children[0];
    if (child.isObject3D) mgroup.add(child);
  }
  scene.add(mgroup);

  // 递归处理SkinnedMesh，更新动画包围盒
  const processSkinnedMesh = (obj) => {
    if (obj.isSkinnedMesh) {
      // 强制更新骨骼与世界矩阵
      obj.updateMatrixWorld(true);
      
      const skinnedBounds = new THREE.Box3();
      const tempVertex = new THREE.Vector3();
      const positionAttr = obj.geometry.attributes.position;
      
      // 遍历所有顶点，应用骨骼变换后扩展包围盒
      for (let i = 0; i < positionAttr.count; i++) {
        tempVertex.fromBufferAttribute(positionAttr, i);
        obj.skinnedMesh.transformVector(tempVertex, tempVertex);
        skinnedBounds.expandByPoint(tempVertex);
      }
      
      // 更新几何体的包围盒
      obj.geometry.boundingBox = skinnedBounds;
      // 可选：禁用视锥体剔除，避免动画时被误裁剪
      obj.frustumCulled = false;
    }
    // 递归处理子对象
    obj.children.forEach(processSkinnedMesh);
  };

  processSkinnedMesh(mgroup);

  // 创建覆盖所有子对象的包围盒助手
  const aabbHelper = new THREE.BoxHelper(mgroup);
  scene.add(aabbHelper);

  // 射线检测示例（开启递归检测子对象）
  const raycaster = new THREE.Raycaster();
  // 假设mouse为标准化设备坐标
  raycaster.setFromCamera(mouse, camera);
  const hits = raycaster.intersectObject(mgroup, true);
  if (hits.length) {
    // 处理检测结果
  }
});

优化提示 #

• 若模型有多个动画片段，需在每一帧动画更新后重新计算SkinnedMesh的包围盒（放入渲染循环）。
• 顶点遍历的性能开销可通过仅计算几何体原始包围盒的8个顶点来优化，减少计算量。

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