Three.js Raycaster无法检测平面相交问题求助

问题描述 #

使用Three.js的Raycaster进行平面网格相交检测时，已知发射点的XY坐标处于平面范围内，但intersects始终返回空数组。核心代码如下：

const origin = new THREE.Vector3(...point, -100),
      direction = new THREE.Vector3(0, 0, 1)    // 已归一化向量
const raycaster = new THREE.Raycaster( origin, direction );
const intersects = raycaster.intersectObject( dem );  // dem为PlaneGeometry创建的Mesh

const length = 2000;
const hex = 0xff0000;

const arrowHelper = new THREE.ArrowHelper( direction, origin, length, hex );
      cx3d.addObject( arrowHelper );

if( intersects.length ){
  console.log( intersects[0] )
}

常见排查与解决方法 #

• 检查平面网格的面朝向：
  PlaneGeometry默认面法线指向Z轴正方向，Raycaster默认仅检测正面（THREE.FrontSide）。若平面被旋转导致法线方向与射线方向相反，或射线从平面背面发射，需开启背面检测：

  // 允许Raycaster检测背面
  raycaster.params.Mesh.checkBackfaces = true;
  // 或设置材质为双面渲染
  dem.material.side = THREE.DoubleSide;
  

• 确认射线范围覆盖网格：
  检查Raycaster的near和far参数，确保射线的有效范围包含目标网格的位置。可显式设置为默认值避免异常：

  raycaster.near = 0;
  raycaster.far = Infinity;
  

• 验证网格的世界坐标：
  确认目标网格的实际世界位置是否在射线路径上，可通过以下代码查看：

  const worldPos = new THREE.Vector3();
  dem.getWorldPosition(worldPos);
  console.log('Mesh世界坐标:', worldPos);
  

• 确保方向向量严格归一化：
  虽然new THREE.Vector3(0,0,1)本身是归一化向量，但如果方向向量是动态计算的，需确保执行direction.normalize()避免射线计算异常。

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