GLB加载的房间模型CannonJs碰撞检测失效问题排查

GLB模型碰撞失效、手动编写地面碰撞正常，本质是以下几个配置/步骤遗漏：

• 未给GLB模型注册物理碰撞体：npx gltfjsx 仅会生成ThreeJS渲染层的React组件，不会自动创建CannonJS所需的CANNON.Body实例和碰撞形状。你只是把模型的渲染网格加到了场景里，并没有把碰撞结构注册到CannonJS物理世界，自然无法触发碰撞。手动编写的地面因为你主动创建了物理Body和碰撞形状，所以可以正常工作。
• 物理体与渲染网格变换不同步：加载GLB后如果调整过模型的position、rotation、scale属性，生成物理体时没有将模型的世界矩阵应用到几何体顶点上，会导致碰撞体的位置、大小和实际渲染的模型完全错位，表现为碰撞失效。
• 碰撞形状选型错误：CannonJS对复杂凹网格的Trimesh碰撞支持很差，如果直接把整个房间模型的BufferGeometry传入生成CANNON.Trimesh，只要模型存在面法线反向、顶点索引顺序错误、非流形面、重叠面问题，就会出现穿模。手动编写的地面是规则的Box/Plane简单形状，不存在这类兼容问题。
• 碰撞过滤规则不匹配：如果给GLB生成的物理体设置的collisionFilterGroup和玩家控制器的collisionFilterMask没有对应，物理引擎会直接跳过两者的碰撞检测。

按以下顺序排查调整即可解决：

1. GLB加载完成后，遍历模型场景下的所有Mesh，过滤掉不需要参与碰撞的装饰网格，仅保留墙体、地面等碰撞结构。
2. 对每个待碰撞的Mesh，先调用updateWorldMatrix(true, true)更新世界矩阵，将几何体顶点从局部空间转换到世界空间，再根据网格形状生成对应碰撞体：
   • 地面、方正墙体等规则结构直接用CANNON.Box/CANNON.Plane生成碰撞形状，性能和稳定性最优
   • 形状稍复杂的结构用CANNON.ConvexPolyhedron生成凸包碰撞
   • 所有场景静态碰撞体的Body类型设为CANNON.Body.STATIC，质量设为0
3. 将所有生成的物理Body添加到CannonJS物理世界，检查碰撞分组配置，确保玩家碰撞体的mask覆盖场景静态物体的group。
4. 不要用整个房间模型生成单个Trimesh碰撞体，将墙体、地面拆分为独立的小碰撞体，大幅降低穿模概率。

如果不想手动处理上述繁琐的配置，可以选择更高效的实现方式：

• 基于React Three生态开发时，直接使用@react-three/cannon提供的useTrimesh钩子，它会自动处理几何体顶点转换、物理体挂载、世界同步逻辑，不需要手动编写Body绑定代码，能规避很多低级错误。
• 不要直接用渲染高模生成碰撞体：在Blender中给房间模型制作一套简化的低模碰撞结构，导出为单独GLB，加载后仅用于生成物理碰撞体、不参与渲染，稳定性和运行性能远高于直接用渲染网格生成碰撞体。
• 替换物理引擎为@react-three/rapier，它对凹多边形碰撞的支持远好于CannonJS，自带从ThreeJS Mesh自动生成碰撞体的能力，API更简洁，穿模问题更少，是目前ThreeJS生态下开发FPS游戏的主流选择。

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