Three.js如何让飞行相机始终平行地面 解决斜向操作Z轴滚转问题

你当前的写法将垂直、水平两个方向的鼠标增量直接拼成单四元数做乘法，存在两个核心问题：

1. 四元数set(x,y,z,w)方法传入非零的x、y分量时，生成的是绕三维空间中某条斜向轴的单次旋转，而非“先绕X轴俯仰、再绕Y轴偏航”的两次独立旋转，只要同一帧x、y增量都不为0（斜向拖鼠标），这个旋转就会自带绕Z轴的滚转分量。
2. 直接在相机当前四元数上做局部乘法，旋转参考系是相机自身局部坐标系，没有对世界坐标轴做锁定，滚转误差会逐帧累积，最终相机的right向量会完全偏离(1,0,0)，出现明显歪头。

要严格保证相机right向量始终为世界坐标(1,0,0)，核心是把偏航（水平转头）和俯仰（抬头低头）两个旋转完全解耦：偏航绕固定的世界Y轴旋转，俯仰绕与世界X轴平行的轴旋转，从计算逻辑上完全排除Z轴旋转的可能。
不要用单帧混合四元数的写法，分开维护两个独立的旋转角度值，每帧重新计算相机四元数即可，代码实现如下：

// 类成员提前声明两个旋转角度存储值，初始值设为0即可
this.pitch = 0; // 俯仰角，绕X轴
this.yaw = 0; // 偏航角，绕世界Y轴
// 提前声明复用的数学对象实例，避免每帧新建对象触发GC
this.tmpQuatX = new THREE.Quaternion();
this.tmpQuatY = new THREE.Quaternion();
this.worldXAxis = new THREE.Vector3(1, 0, 0);
this.worldYAxis = new THREE.Vector3(0, 1, 0);
// 相机实例按原有逻辑初始化即可
this.camera = new THREE.PerspectiveCamera(/* 你的原有相机参数 */);

// update方法中的核心旋转逻辑
// 1. 累加鼠标输入得到的旋转增量
this.yaw -= this.horizontalRotationSpeed * this.mouseMovement.movementX;
this.pitch -= this.verticalRotationSpeed * this.mouseMovement.movementY;

// 2. 限制俯仰角范围，避免视角翻到完全朝上/朝下后出现控制异常
const MAX_PITCH = Math.PI / 2 - 0.001; // 留微小余量避免刚好到90度出现万向节锁
this.pitch = Math.max(-MAX_PITCH, Math.min(MAX_PITCH, this.pitch));

// 3. 分别计算两个轴的旋转四元数
this.tmpQuatY.setFromAxisAngle(this.worldYAxis, this.yaw); // 偏航永远绕固定世界Y轴
this.tmpQuatX.setFromAxisAngle(this.worldXAxis, this.pitch); // 俯仰永远绕世界X轴

// 4. 组合四元数赋值给相机，注意乘法顺序：先应用偏航再应用俯仰
this.camera.quaternion.copy(this.tmpQuatY).multiply(this.tmpQuatX);

// 帧末尾清空累积的鼠标移动量，留待下一帧计算
this.mouseMovement.movementX = 0;
this.mouseMovement.movementY = 0;

• 逻辑完全基于three.js原生API实现，无额外依赖
• 两个轴向的旋转完全独立计算，没有任何绕Z轴的旋转逻辑，相机right向量会永久锁定为(1,0,0)，不会出现任何斜向拖鼠标导致的滚转问题
• 所有数学对象提前实例化复用，无运行时临时对象创建，性能与原写法持平
• 如果需要设置初始相机朝向，直接给yaw、pitch赋初始角度值即可，不需要修改核心计算逻辑

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