如何为Three.js中导入的GLTF模型添加碰撞检测？

针对你导入Blender GLTF建筑模型后碰撞失效的问题，直接给你几个可落地的解决方案：

1. 拆解GLTF模型层级，给单个Mesh加碰撞 #

GLTF导出的模型通常是嵌套层级（比如Scene > Group > Mesh），直接给整个模型容器加碰撞体没用——碰撞库（你用的useBox属于react-three-fiber的Cannon生态）需要作用在具体的Mesh节点上。遍历模型找到所有Mesh：

gltf.scene.traverse((child) => {
  if (child.isMesh) {
    // 这里给每个Mesh单独加碰撞体
  }
})

2. 选对碰撞体类型，别硬套Box #

坡道、楼梯属于不规则形状，用Box碰撞体肯定会穿模，换这两种方式：

• 复杂形状用Trimesh碰撞体：直接基于模型的三角网格生成碰撞，精准匹配形状（性能比Box稍差，但建筑是静态物体影响不大）

  import { useTrimesh } from '@react-three/cannon'
  
  function CollidableMesh({ mesh }) {
    const [ref] = useTrimesh(() => ({
      args: [mesh.geometry.attributes.position.array],
      type: 'static' // 建筑设为静态，不会被玩家推动
    }))
    return <primitive object={mesh} ref={ref} />
  }
  

• 规则部件拆分用组合Box：比如楼梯可以拆成多个Box碰撞体堆叠，性能更好，适合对精度要求不高的场景。

3. 同步碰撞体与模型的变换参数 #

GLTF模型可能带有缩放、位移、旋转，碰撞体必须同步这些参数才会和模型对齐：

• 要么把碰撞体作为Mesh的子节点，自动继承变换；
• 要么在创建碰撞体时手动传入参数：

  const [ref] = useTrimesh(() => ({
    args: [child.geometry.attributes.position.array],
    type: 'static',
    position: child.position,
    rotation: child.rotation,
    scale: child.scale
  }))
  

4. 开启碰撞体可视化排查 #

打开react-three-fiber的Physics debug模式，直接看到碰撞体的线框，确认是否和模型匹配：

<Canvas>
  <Physics debug> {/* 开启后会显示所有碰撞体的线框 */}
    {/* 你的GLTF模型和玩家对象 */}
  </Physics>
</Canvas>

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