Three.js中独立相机仰角控制失效问题求助

问题根源 #

直接单独设置camera.rotation.x和camera.rotation.y会触发欧拉角的旋转顺序冲突（默认欧拉角旋转顺序为XYZ），偏航（Y轴）旋转会改变X轴的空间指向，导致俯仰（X轴）旋转的实际效果受偏航角度干扰，出现异常。

修复方案 #

用独立变量存储偏航（Yaw）和俯仰（Pitch）角度，再通过四元数或指定旋转顺序的欧拉角统一更新相机旋转，彻底避免轴之间的相互影响。

修改后的代码示例 #

// 提前定义全局/组件级旋转变量，初始值为0
let cameraYaw = 0;
let cameraPitch = 0;

// 每帧执行的代码
const yRotationPerFrame = (scaleSensitivity(leftStick.x) * framePeriod) / 15;
const forwardVelocity = scaleSensitivity(leftStick.y, 5);
const sidewaysVelocity = -scaleSensitivity(rightStick.x, 5);
const elevationAngle = -rightStick.y / 40;

// 更新独立旋转变量，可选限制俯仰角度防止过度翻转
cameraYaw -= yRotationPerFrame;
cameraPitch = Math.max(-0.8, Math.min(0.8, elevationAngle));

// 推荐：用四元数组合旋转，避免万向锁问题
camera.quaternion.setFromEuler(new THREE.Euler(cameraPitch, cameraYaw, 0, 'YXZ'));

// 备选：用指定旋转顺序的欧拉角更新
// camera.rotation.set(cameraPitch, cameraYaw, 0, 'YXZ');

forwardVector.set(0, 0, forwardVelocity);
sideVector.set(sidewaysVelocity, 0, 0);
direction
  .subVectors(forwardVector, sideVector)
  .applyQuaternion(camera.quaternion); // 对应四元数使用applyQuaternion方法
setLinearVelocity({ x: direction.x, y: velocity.y, z: direction.z });

关键说明 #

1. 独立旋转变量：把偏航、俯仰角度分开存储，避免直接修改相机欧拉角单个分量引发的顺序冲突。
2. 指定旋转顺序：采用YXZ旋转顺序，先应用俯仰（X轴）再应用偏航（Y轴），确保两个旋转轴的空间指向互不干扰。
3. 四元数优先：四元数能更稳定地表达3D旋转，规避欧拉角的万向锁问题，是第一人称视角旋转的最优选择。

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