JavaScript Canvas 3D Projection问题：物体自旋转异常求助

问题核心原因 #

你遇到的异常是因为物体旋转时错误地使用了自身局部坐标系作为旋转中心，而非以固定相机的世界坐标为中心。当鼠标控制环视时，本该是所有物体围绕相机做整体旋转，但如果代码中误将旋转逻辑绑定到物体自身，就会出现物体同时绕自身旋转的现象。

具体修复步骤 #

1. 统一以相机为旋转中心 #

所有物体的旋转操作必须基于相机的固定位置执行，步骤如下：

• 先将物体坐标转换为相机局部空间（以相机为原点）
• 在该空间内执行旋转计算
• 再转换回世界空间更新物体位置

示例代码：

// 全局存储鼠标控制的场景旋转角度
let sceneYaw = 0; // 水平旋转量
let scenePitch = 0; // 垂直旋转量

// 鼠标移动时更新全局旋转角度
document.addEventListener('mousemove', (e) => {
  if (mouseLocked) {
    sceneYaw += e.movementX * 0.01;
    scenePitch += e.movementY * 0.01;
    // 限制垂直旋转范围，避免视角翻转
    scenePitch = Math.max(-Math.PI/2, Math.min(Math.PI/2, scenePitch));
  }
});

// 更新物体位置（围绕相机旋转）
function updateMeshPosition(mesh, camera) {
  // 处理水平旋转（Y轴）
  const tempX = mesh.x - camera.x;
  const tempZ = mesh.z - camera.z;
  mesh.x = tempX * Math.cos(sceneYaw) - tempZ * Math.sin(sceneYaw) + camera.x;
  mesh.z = tempX * Math.sin(sceneYaw) + tempZ * Math.cos(sceneYaw) + camera.z;

  // 处理垂直旋转（X轴）
  const tempY = mesh.y - camera.y;
  const tempZAfterYaw = mesh.z - camera.z;
  mesh.y = tempY * Math.cos(scenePitch) - tempZAfterYaw * Math.sin(scenePitch) + camera.y;
  mesh.z = tempY * Math.sin(scenePitch) + tempZAfterYaw * Math.cos(scenePitch) + camera.z;
}

2. 分离视角控制与物体自身变换 #

确保物体的自身旋转（如果有的话）和场景环视旋转完全独立：

• 场景环视仅通过全局旋转角度控制所有物体绕相机的整体运动
• 物体自身的旋转逻辑单独维护，仅在需要时触发（比如物体自身的动画）

3. 修正投影计算逻辑 #

透视投影时必须基于相机的固定位置计算顶点相对坐标，避免混入物体自身的偏移：

function projectVertex(x, y, z, camera) {
  // 计算顶点相对于相机的位置
  let relX = x - camera.x;
  let relY = y - camera.y;
  let relZ = z - camera.z;

  // 应用场景旋转（模拟相机环视）
  // 先处理水平旋转
  const rotatedX = relX * Math.cos(sceneYaw) + relZ * Math.sin(sceneYaw);
  const rotatedZ = -relX * Math.sin(sceneYaw) + relZ * Math.cos(sceneYaw);
  // 再处理垂直旋转
  const rotatedY = relY * Math.cos(scenePitch) - rotatedZ * Math.sin(scenePitch);
  const finalZ = relY * Math.sin(scenePitch) + rotatedZ * Math.cos(scenePitch);

  // 透视投影转换
  const fov = 90;
  const scale = fov / (fov + finalZ);
  const screenX = canvas.width / 2 + rotatedX * scale;
  const screenY = canvas.height / 2 - rotatedY * scale;

  return { x: screenX, y: screenY };
}

关键注意点 #

相机固定的场景下，“FPS环视”的本质是整个场景围绕相机做整体旋转，而非相机自身移动。所有物体的位置更新必须严格遵循“以相机为中心”的旋转逻辑，不能让物体的局部变换干扰整体场景的旋转。

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