Three.js中Raycast点击无法识别导入FBX模型网格问题求助

问题排查及解决方法 #

按优先级从高到低调整即可修复问题：

1. 核心错误：标准化设备坐标Y轴计算错误
   Three.js要求标准化设备坐标（NDC）的Y轴取值范围为「屏幕顶部为1，底部为-1」，而浏览器clientY的取值规则是「屏幕顶部为0，底部为窗口高度」，你当前代码未加负号，计算出的射线方向完全偏离可视区域，因此永远检测不到物体。
   正确的坐标转换代码为：

cursor.y = - (event.clientY / window.innerHeight) * 2 + 1;

2. FBX网格未预计算包围信息
   射线检测会优先用几何体的包围球做粗过滤，如果导入的FBX几何体没有预生成包围信息，会直接被过滤掉。在遍历网格时补充计算即可：

object.traverse(function(child){
    if(child.isMesh){
        child.geometry.computeBoundingBox();
        child.geometry.computeBoundingSphere();
        meshes.push(child);
    }
})

3. 法线朝向导致的检测失效
   默认Three.js材质只会检测正面相交，如果你的FBX网格法线是朝内的，就会检测不到，可以手动设置为双面检测：

child.material.side = THREE.DoubleSide;

4. 可选优化：开启递归检测
   如果FBX网格存在嵌套子层级，调用intersectObjects时可以传入第二个参数true开启递归检测，避免漏掉子网格：

var intersects = raycaster.intersectObjects(meshes, true);

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