Three.js第一人称相机自轴旋转问题求助

我完全理解你想亲手实现第一人称旋转逻辑、不依赖现成控件的想法——这绝对是吃透Three.js相机变换逻辑的好途径！你的问题核心在于直接修改camera.rotation是基于世界坐标系的绝对旋转，当相机离开原点后，它的局部坐标系和世界坐标系不再重合，自然就会出现“绕环境轴旋转”的错觉。

问题根源拆解 #

你之前的代码直接给camera.rotation.x/y赋值固定计算的角度，这相当于告诉相机“不管你现在在哪，都绕世界的X/Y轴转到这个角度”。但第一人称视角需要的是绕相机自身的局部轴旋转——比如抬头低头是绕自己的水平轴（局部X轴），左右转头是绕自己的垂直轴（局部Y轴）。

修正方案：改用局部相对旋转 #

我们需要做两个关键调整：

1. 把鼠标的绝对位置改为移动增量（避免旋转跳变，实现平滑跟随）
2. 使用Three.js提供的局部旋转方法，绕相机自身轴旋转

修改后的完整代码示例

// 初始化鼠标相关变量
let mouseX = 0;
let mouseY = 0;
let lastMouseX = 0;
let lastMouseY = 0;
let deltaX = 0;
let deltaY = 0;
const rotationSpeed = 0.001; // 调整这个值控制旋转灵敏度，按需微调

function viewKeys() {
  // 监听鼠标移动
  document.addEventListener("mousemove", MouseMove, true);
  // 鼠标按下时初始化上一帧位置（防止首次移动跳变）
  document.addEventListener("mousedown", (event) => {
    lastMouseX = event.clientX - divOffsetWidth;
    lastMouseY = event.clientY - divOffsetHeight;
  });
}

function MouseMove(event) {
  // 获取相对div中心的鼠标位置
  mouseX = event.clientX - divOffsetWidth;
  mouseY = event.clientY - divOffsetHeight;
  
  // 计算当前帧与上一帧的鼠标移动增量
  deltaX = mouseX - lastMouseX;
  deltaY = mouseY - lastMouseY;
  
  // 更新上一帧的鼠标位置，为下一帧计算做准备
  lastMouseX = mouseX;
  lastMouseY = mouseY;
}

function viewAnimate() {
  // 绕相机自身X轴旋转（俯仰：抬头/低头），deltaY的符号控制旋转方向
  camera.rotateX(deltaY * rotationSpeed);
  // 绕相机自身Y轴旋转（偏航：左转/右转），deltaX的符号控制旋转方向
  camera.rotateY(deltaX * rotationSpeed);
  
  // 可选：限制俯仰角度，防止相机翻转（比如上下转超过90度）
  camera.rotation.x = Math.max(-Math.PI/2, Math.min(Math.PI/2, camera.rotation.x));
  
  // 重置增量，避免下一帧重复应用当前移动量
  deltaX = 0;
  deltaY = 0;
}

关键细节说明 #

• camera.rotateX()和camera.rotateY()：这两个方法是基于相机当前的局部坐标系进行旋转，不管相机移动到世界的哪个位置，旋转都是以自身为中心，完美符合第一人称视角的需求。
• 鼠标增量计算：用deltaX/deltaY记录每帧的移动距离，而不是直接用绝对位置，能让旋转更平滑，避免鼠标一移动就跳转到某个角度的问题。
• 俯仰角度限制：添加Math.max/min可以防止相机上下翻转到不合理的角度，提升体验。

如果之后你想深入理解旋转的底层逻辑，也可以研究Three.js的四元数（camera.quaternion），它是处理3D旋转更高效的方式，但rotateX/Y已经足够满足你的基础需求啦。

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