Three.js星球第一人称相机旋转异常问题求助

看起来你已经搞定了星球表面的玩家移动逻辑，但相机旋转的坑确实容易踩——毕竟星球表面的局部坐标系是随玩家位置动态变化的，直接用世界空间旋转肯定会出问题。我之前做类似项目时也遇到过几乎一样的情况，核心问题是相机的旋转没有绑定到玩家当前的局部参考系，导致玩家移动后，相机的旋转轴还是原来的世界轴，自然会跳转到奇怪的位置。

问题根源拆解 #

玩家在星球表面移动时，其“上方向”始终是远离星球中心的法线方向，“前/右方向”是当前位置的切线平面方向。你的相机旋转（A/D水平转、上下箭头垂直转）必须基于这个动态变化的局部坐标系，而不是固定的世界坐标系（比如默认的Y轴上方向）。之前的尝试应该是直接修改了相机的rotation属性，或者用了世界空间的轴来旋转，这就导致玩家移动后参考系错位。

具体解决方案 #

我们需要维护相机的旋转状态（水平偏航Yaw、垂直俯仰Pitch），然后每一帧基于玩家当前的局部坐标系来计算相机的最终旋转。步骤如下：

1. 新增旋转状态变量

在代码开头定义相机的旋转角度，以及俯仰角的范围（你要求0=天底，180=天顶）：

// 相机旋转状态
let cameraYaw = 0;        // 水平旋转角度（A/D控制，绕玩家上轴）
let cameraPitch = 90;     // 垂直旋转角度（初始水平，上下箭头控制）
const pitchMin = 0;       // 天底限制
const pitchMax = 180;     // 天顶限制

2. 调整键盘事件处理

修改键盘监听逻辑，只更新旋转状态变量，不直接操作相机：

// 键盘按下事件
document.addEventListener('keydown', (e) => {
  keys[e.key.toLowerCase()] = true;
});

// 键盘松开事件
document.addEventListener('keyup', (e) => {
  keys[e.key.toLowerCase()] = false;
});

// 在动画循环中更新旋转状态
function updateCameraRotation() {
  // A/D键：更新水平偏航
  if (keys['a']) cameraYaw += 1;
  if (keys['d']) cameraYaw -= 1;

  // 上下箭头：更新垂直俯仰，限制范围
  if (keys['arrowup']) cameraPitch = Math.min(cameraPitch + 1, pitchMax);
  if (keys['arrowdown']) cameraPitch = Math.max(cameraPitch - 1, pitchMin);
}

3. 基于玩家局部坐标系计算相机旋转

在动画循环中，替换你原来的// TRIAL AND ERRORS HERE部分，用四元数来组合旋转（避免欧拉角的万向锁问题）：

function updateCamera() {
  // 1. 获取玩家当前的局部坐标系轴
  const playerPos = player.position.clone();
  const playerUp = playerPos.normalize().multiplyScalar(-1); // 玩家上方向：远离星球中心
  const playerForward = new THREE.Vector3(0, 0, 1).applyQuaternion(player.quaternion); // 玩家前方向
  const playerRight = new THREE.Vector3().crossVectors(playerUp, playerForward).normalize(); // 玩家右方向

  // 2. 创建旋转四元数：先绕玩家上轴转Yaw，再绕玩家右轴转Pitch
  const yawQuat = new THREE.Quaternion().setFromAxisAngle(playerUp, THREE.MathUtils.degToRad(cameraYaw));
  // 这里把Pitch从0-180转换为相对于水平的旋转（90度是水平，0是天底，180是天顶）
  const pitchQuat = new THREE.Quaternion().setFromAxisAngle(playerRight, THREE.MathUtils.degToRad(cameraPitch - 90));

  // 3. 组合旋转：玩家自身旋转 + 相机的Yaw/Pitch旋转
  const cameraQuat = new THREE.Quaternion().multiplyQuaternions(player.quaternion, yawQuat).multiply(pitchQuat);
  
  // 4. 应用到相机
  camera.quaternion.copy(cameraQuat);
  camera.position.copy(player.position);
}

4. 在动画循环中调用更新函数

把这两个更新函数加到你的animate循环里：

function animate() {
  requestAnimationFrame(animate);
  
  updatePlayer(); // 你原来的玩家移动更新
  updateCameraRotation(); // 新增的旋转状态更新
  updateCamera(); // 新增的相机位置/旋转更新
  
  renderer.render(scene, camera);
}

为什么这个方法有效？ #

• 我们始终基于玩家当前的局部轴（playerUp、playerRight）来计算旋转，确保相机的“水平旋转”始终是绕着玩家当前的“上方向”（星球法线），垂直旋转始终是绕着玩家当前的“右方向”（切线平面轴）。
• 用四元数组合旋转，避免了欧拉角常见的万向锁问题，旋转更平滑稳定。
• 分离了旋转状态（Yaw/Pitch）和相机的实际旋转计算，后续改成鼠标控制只需要修改cameraYaw和cameraPitch的更新逻辑即可，非常容易扩展。

后续鼠标控制扩展提示 #

如果要改成鼠标控制，只需要监听mousemove事件，根据鼠标的位移量来更新cameraYaw和cameraPitch：

let mouseX = 0;
let mouseY = 0;
document.addEventListener('mousemove', (e) => {
  const sensitivity = 0.1;
  cameraYaw += e.movementX * sensitivity;
  cameraPitch = Math.max(Math.min(cameraPitch - e.movementY * sensitivity, pitchMax), pitchMin);
});

这样无论玩家怎么移动，相机的视角都会始终跟随玩家的局部空间，再也不会出现跳转的问题了！

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