ThreeJS类等距视角正交相机Raycasting射线检测异常问题求助

• 核心问题出在正交相机的参数配置错误：你将near裁剪面设置为负值，ThreeJS的Raycaster计算射线起点时会基于near值做偏移，负值会导致射线起点偏移到相机后方，和实际渲染的视口区域错位，因此无法正确命中目标网格。
• 次要问题是相机位置距离场景过近，结合旋转参数后进一步放大了射线范围和渲染范围的不匹配问题。

步骤1：调整相机参数 #

将near改为合理的正值，同时把相机沿视线方向后移，保证原有的类等距视觉效果不变：

// 修改near为正值，保留原有视口宽高比例
const camera = new THREE.OrthographicCamera( -sceneWidth / 2, sceneWidth / 2, sceneHeight / 2, -sceneHeight / 2, 0.1, 2000 );

camera.rotation.set(
    -Math.PI / 12,
  Math.PI / 12,
  Math.PI / 24
);
// 后移相机位置，你可以微调y、z数值匹配你想要的视觉效果
camera.position.set(0, 600, 600);
camera.zoom = 2;
camera.updateProjectionMatrix();

步骤2（可选优化）：开启材质双面渲染 #

避免因为面剔除导致的边缘检测失效，不影响现有渲染效果：

const whiteMaterial = new THREE.MeshBasicMaterial({
  side: THREE.DoubleSide
});

const redMaterial = new THREE.MeshBasicMaterial({
  color: 0xFF0000,
  side: THREE.DoubleSide
});

你原有屏幕坐标计算、射线检测的逻辑完全正确，不需要修改，调整完相机参数后点击检测即可完全正常。

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