ThreeJS正交相机渲染模型截断及Raycaster失效问题求助

问题根源 #

原正交相机near=0时，裁剪平面位于z=0处，z<0的模型部分会被裁剪无法显示；修改near=-2000后，相机可视范围覆盖z从-2000到2000的区域，模型能完整渲染。但Raycaster失效的核心原因是未同步Raycaster与相机的状态，且射线生成逻辑有误，仅修改Raycaster的near/far参数不足以解决问题。

具体解决方案 #

1. 正确生成Raycaster射线 #

每次使用Raycaster进行交互检测时，必须将屏幕坐标转换为Three.js的标准化设备坐标（NDC），并通过setFromCamera方法基于当前相机生成射线——这个方法会自动适配正交相机的平行射线逻辑：

// 处理鼠标事件示例
handleMouseMove(event: MouseEvent) {
  const mouse = new THREE.Vector2();
  // 转换为标准化设备坐标（范围：x/-1~1，y/-1~1）
  mouse.x = (event.clientX / window.innerWidth) * 2 - 1;
  mouse.y = -(event.clientY / window.innerHeight) * 2 + 1;

  // 关键：用当前相机更新Raycaster的射线
  this.rayCaster.setFromCamera(mouse, this.camera); // this.camera是你的OrthoCamera实例

  // 执行相交检测
  const intersects = this.rayCaster.intersectObjects(this.animals.children, true);
  if (intersects.length > 0) {
    // 处理相交逻辑
  }
}

2. 同步Raycaster与相机的near/far参数 #

不要在构造函数中固定Raycaster的near/far值，而是在使用Raycaster前同步相机的参数，确保检测范围与相机可视范围一致：

// 在检测前同步参数
this.rayCaster.near = this.camera.near;
this.rayCaster.far = this.camera.far;

3. 验证物体位置与相机视锥体 #

即使模型能显示，也可以通过打印参数确认动物模型在Raycaster的检测范围内：

// 打印相机视锥体参数
console.log("相机参数:", this.camera.near, this.camera.far);
// 打印动物模型位置
this.animals.children.forEach(animal => {
  console.log("动物位置:", animal.position.z);
});

确保动物模型的z坐标在[camera.near, camera.far]区间内。

4. 避免手动生成射线（针对正交相机） #

正交相机的射线是平行于相机forward方向的，手动生成射线容易出错，务必使用setFromCamera方法，Three.js会自动处理正交/透视相机的差异。

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