P5JS实现球面包裹2D光线投射器算法异常问题求助

已确认的现有代码缺陷 #

• 角度单位不匹配：你定义的FOV为80（角度值），但JS原生cos()/sin()函数仅接收弧度值，直接传入角度计算会导致光线方向完全错误
• 球面光线步进逻辑错误：你当前直接给经纬度rx/ry叠加笛卡尔平面的方向偏移量，不符合球面测地线（大圆路径）的移动规则，投射的光线实际是在经纬度坐标系中走直线，映射到3D球面后是扭曲路径，完全不符合球面空间的光线传播逻辑
• 距离计算逻辑错误：现在直接用步进次数作为距离值，球面的真实距离应为两点圆心角×球半径，和步进次数无线性对应关系，会导致渲染的墙体高度完全失真
• 碰撞检测逻辑问题：现有立方体碰撞检测是在3D笛卡尔空间做AABB盒判断，你当前定义的立方体坐标-51/sr到51/sr乘以sr后范围为-51到51，等于x轴方向横跨整个球体，根本不是放置在球面上的小物体
• pDist函数语法错误：用了异或运算符^计算平方，JS中^是按位异或运算符，不是平方运算，应该用Math.pow()或者变量自乘计算

修复方案指导 #

1. 统一角度单位：所有角度运算前先转换为弧度，比如将FOV定义修改为const FOV = 80 * Math.PI / 180，所有方向角计算全部使用弧度值
2. 修正球面光线步进逻辑：不要直接修改经纬度，在3D空间计算光线的大圆路径方向向量，每次步进后将点重新投影回球面，参考代码片段如下：

// 球面光线步进核心逻辑示例
function castRay(startLon, startLat, dirAngle) {
  // 起始点转3D单位向量
  let pos = [
    Math.cos(startLat) * Math.cos(startLon),
    Math.cos(startLat) * Math.sin(startLon),
    Math.sin(startLat)
  ];
  // 计算球面切线方向的两个正交单位向量
  let east = [
    -Math.cos(startLon) * Math.sin(startLat),
    -Math.sin(startLon) * Math.sin(startLat),
    Math.cos(startLat)
  ];
  let north = [
    -Math.sin(startLon),
    Math.cos(startLon),
    0
  ];
  // 合成光线的方向向量
  let dir = [
    Math.cos(dirAngle) * north[0] + Math.sin(dirAngle) * east[0],
    Math.cos(dirAngle) * north[1] + Math.sin(dirAngle) * east[1],
    Math.cos(dirAngle) * north[2] + Math.sin(dirAngle) * east[2]
  ];
  const stepSize = 0.01;
  let dist = 0;
  // 最大检测距离为半个球面周长，避免无限循环
  while(dist < Math.PI * sr) {
    // 沿切线方向步进
    pos[0] += dir[0] * stepSize;
    pos[1] += dir[1] * stepSize;
    pos[2] += dir[2] * stepSize;
    // 将点拉回球面上
    let len = Math.hypot(pos[0], pos[1], pos[2]);
    pos[0] /= len; pos[1] /= len; pos[2] /= len;
    dist += stepSize * sr;
    // 此处替换为你的碰撞检测逻辑
    let worldPos = [pos[0]*sr, pos[1]*sr, pos[2]*sr];
    if(checkCollision(worldPos)) return [dist, hitObject];
  }
  return [Infinity, null];
}

3. 碰撞检测适配：如果是放置在球面上的物体，优先用经纬度范围做碰撞判断，比3D空间AABB检测效率更高、适配性更好
4. 渲染距离修正：用光线碰撞点和相机点的球面距离（圆心角×sr）代替当前的步进次数，再计算墙体高度

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