three.js中Raycaster失效问题排查与重力模拟替代方案咨询

一、现有代码的核心Bug #

1. Raycaster方向向量错误 #

你的Raycaster初始化存在致命问题：

const below = new THREE.Vector3(camera.position.x, -1000000, camera.position.y), 
cast = new THREE.Raycaster(camera.position, below), 
intersect = cast.intersectObject(plane);

THREE.Raycaster的第二个参数要求是单位方向向量，但你传入的是一个绝对坐标点，这会导致射线方向完全错误，无法正确检测地面。正确的向下方向应为new THREE.Vector3(0, -1, 0)（标准单位向量）。

2. 顶点更新未标记 #

修改平面顶点高度后，未通知Three.js更新几何体：

plane.geometry.verticesNeedUpdate = true; // 缺失该行代码

旧版Three.js不会自动识别顶点变化，会导致碰撞检测仍使用原始平面数据。

3. 相机位置调整逻辑不合理 #

当前逻辑if (intersect[0].distance < 3) camera.translateY(-1)会在距离过近时强制向下移动，反而引发穿模或检测失效。正确做法是将相机固定在地面上方指定高度：

if (intersect.length > 0) {
  const groundY = intersect[0].point.y;
  // 保持相机在地面上方3单位
  if (camera.position.y < groundY + 3) {
    camera.position.y = groundY + 3;
  } else {
    // 应用重力
    camera.position.y -= 0.5;
  }
} else {
  // 无地面时自由下落
  camera.position.y -= 0.5;
}

二、无需Raycaster的更可靠方案 #

既然地面高度由Perlin噪声生成，可直接计算相机当前x/z坐标对应的地面高度，完全规避射线检测的问题，性能更优且精度完全匹配地面：

实现步骤 #

1. 封装地面高度计算函数：

function getGroundHeight(x, z) {
  // 平面大小10000，细分500，网格单元大小为20
  const gridSize = 10000 / 500;
  // 将世界坐标转换为噪声函数输入范围（与生成平面时的逻辑对齐）
  const noiseX = (x + 5000) / gridSize;
  const noiseZ = (z + 5000) / gridSize;
  
  let n = 0.0, a = 1.0, f = 0.005;
  for (let o = 0; o < 3; o++){
    let v = a*Noise2D(noiseX*f, noiseZ*f);
    n += v;
    a *= 0.5;
    f *= 2.0;
  }
  n += 1; 
  n /= 2; 
  return n * 1000; // 与生成顶点时的高度计算逻辑一致
}

2. 在渲染循环中直接控制相机高度：

const render = () => {
  requestAnimationFrame(render);
  
  const groundY = getGroundHeight(camera.position.x, camera.position.z);
  // 应用重力并保持地面上方高度
  if (camera.position.y > groundY + 3) {
    camera.position.y -= 0.5; // 重力加速度可按需调整
  } else {
    camera.position.y = groundY + 3;
  }
  
  renderer.render(scene, camera);
}

三、其他优化建议 #

• 移除代码中无效的wwwww字符（位于DirectionalLight设置代码后）。
• 第一人称移动应基于相机朝向，当前translateX/Z是世界空间移动，需改用camera.getWorldDirection获取局部方向后转换为世界移动向量。
• 鼠标控制中避免访问私有属性camera.rotation._x，改用公开属性camera.rotation.x。

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