ThreeJS Raycaster坐标异常及模型相交检测盲区问题

最近在做Three.js项目时碰到个头疼的问题：明明加载的3D模型完整显示在画布上，但鼠标点击模型右侧某一块区域时，Raycaster始终报告没有相交。为了搞清楚原因，我做了一系列测试，下面把过程和结论整理出来。

测试的点击位置 #

我选了四个关键位置做测试：

• 模型正面中心区域（作为正常对照）
• 模型左侧边缘区域
• 模型右侧那块“失效”的区域
• 画布空白区域（作为无模型的对照）

第一组测试结果：鼠标坐标获取 #

这组结果是通过以下代码获取的鼠标标准化坐标（Three.js要求的NDC坐标）：

mouse.x = ( event.clientX / window.innerWidth ) * 2 - 1;
mouse.y = - ( event.clientY / window.innerHeight ) * 2 + 1;
console.log('Mouse x position is: ', mouse.x);
console.log('Mouse y position is: ', mouse.y);

对应的输出结果：

• 正面中心：Mouse x position is: 0.02
• 左侧边缘：Mouse x position is: -0.81
• 右侧失效区域：Mouse x position is: 0.76
• 画布空白：Mouse x position is: 0.95

从坐标来看，右侧失效区域的坐标在合理范围内，并没有超出画布的NDC区间（-1到1），所以排除鼠标坐标计算错误的可能。

第二组测试结果：Raycaster相交检测 #

接下来用Raycaster做相交检测，代码片段如下：

raycaster.setFromCamera(mouse, camera);
const intersects = raycaster.intersectObject(model, true);
console.log('Intersects length: ', intersects.length);

对应的检测结果：

• 正面中心：Intersects length: 1（正常检测到相交）
• 左侧边缘：Intersects length: 1（正常检测到相交）
• 右侧失效区域：Intersects length: 0（未检测到相交）
• 画布空白：Intersects length: 0（符合预期，无模型）

结论：失效区域的原因分析 #

结合测试结果，我总结了几个可能导致Raycaster未检测到相交的原因：

1. 模型面的法线方向问题 #

Three.js的MeshMaterial默认side属性是THREE.FrontSide，只会检测法线朝向相机的面。如果模型右侧的面法线是向内的（比如建模时翻转了面），Raycaster就会忽略这些面。可以尝试把材质的side改成THREE.DoubleSide来验证：

model.material.side = THREE.DoubleSide;

如果修改后能检测到相交，那就说明是法线方向的问题。

2. 模型几何体缺失 #

有可能在导出模型时，右侧那块区域的面被意外删除了，或者建模时根本没创建对应的几何体。可以把模型导入Three.js官方编辑器，查看几何体的面分布，确认是否存在面缺失的情况。

3. 相机视锥体裁剪 #

如果模型的右侧区域刚好处于相机视锥体的边缘，被裁剪掉了，Raycaster自然检测不到。可以检查相机的far值是否足够大，或者调整相机的位置、视场角，确保整个模型都在相机的可见范围内。

4. Raycaster参数设置问题 #

比如raycaster.far设置得太小，导致远处的模型区域无法被检测；或者调用intersectObject时第二个参数（递归检测子对象）设为了false，而失效区域刚好在未被检测的子网格上。可以检查这两个参数：

// 确保raycaster的far足够大
raycaster.far = 1000;
// 确保递归检测所有子对象
const intersects = raycaster.intersectObject(model, true);

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