three.js加载Blender导出glTF模型后raycaster射线检测失效问题

该问题与Blender glTF导出配置、模型属性直接相关，排查方向和标准导出配置如下： #

优先排查模型本身问题 #

• 法线方向错误：Blender中进入模型编辑模式，开启法线可视化开关，若法线朝向模型内部，全选面后按Shift+N重新对齐法线，确保所有法线朝向外侧。射线检测默认仅识别正面，法线反向会导致无法命中。
• 非网格对象未转换：曲线、文字、 metaball 等非网格类型对象，导出前需右键→转换→网格，否则不会生成可供射线检测的三角面数据。
• 修改器未应用：添加了固体化、细分、阵列等修改器的模型，导出前需点击修改器面板的「应用」按钮，或在导出配置中开启自动应用修改器。

Blender导出glTF/GLB适配three.js标准配置 #

导出时选择「glTF 2.0 (.glb/.gltf)」格式，按以下参数配置：

通用配置 #

• 格式：优先选glTF Binary (.glb)，单文件体积更小，加载更便捷
• 应用变换：必勾选，将模型的位移、旋转、缩放参数烘焙到几何体数据中，避免three.js中出现变换偏差
• 选中项导出：仅需要导出部分对象时勾选，否则默认导出所有可见对象

包含配置 #

• 可见对象：勾选，仅导出视图层可见的对象
• 摄影机、灯光：无使用需求时取消勾选，降低文件体积

几何数据配置 #

• 位置：必勾选，是渲染和射线检测的核心基础数据
• 法线：必勾选，影响光照表现和射线检测的正面判定
• UV：有纹理贴图需求时勾选
• 顶点色：用到顶点色数据时勾选，否则可关闭
• 面：必勾选，关闭后不会导出三角面数据，无法触发射线检测
• 应用修改器：勾选，自动将所有未应用的修改器效果烘焙到导出的几何体中

材质配置 #

• 导出模式：选择「glTF 标准材质（金属度/粗糙度）」，和three.js的PBR材质体系完全兼容
• 背面剔除：无单面透明需求时保持勾选，若需要双面显示可在three.js中单独设置材质属性

three.js侧适配优化 #

如果按上述配置导出后仍然无法触发射线检测，可在模型加载完成后添加以下代码验证：

// 遍历模型所有网格对象
myGltf.scene.traverse(child => {
  if (child.isMesh) {
    // 临时设置双面显示，排除法线反向/单面材质问题
    child.material.side = THREE.DoubleSide
    // 强制更新几何体边界计算，避免射线检测边界判定异常
    child.geometry.computeBoundingBox()
    child.geometry.computeBoundingSphere()
  }
})

内容的提问来源于stack exchange，提问作者Michaël