Three.js FPS视角X轴旋转异常求助：滚转及不稳定问题

问题背景 #

开发第一人称射击（FPS）控制器时，Y轴左右旋转功能正常，但X轴上下旋转出现滚转、不稳定现象，鼠标画圈操作时相机还会发生异常的左右旋转。尝试设置this.rotation.order = "YXZ"无法解决问题。

问题根源 #

原代码直接对单一四元数混合世界空间轴和局部空间轴的旋转操作，导致旋转空间混乱：

• Y轴旋转使用世界Y轴（符合FPS逻辑），但X轴旋转同样使用世界X轴，当玩家存在Y轴旋转时，世界X轴与玩家局部X轴方向不一致，进而引发滚转。
• 四元数乘法顺序未遵循FPS视角的旋转逻辑，加剧了旋转不稳定的问题。

修复方案 #

通过分离偏航（Y轴左右转）和俯仰（X轴上下看）角度，分别控制后再合并成最终旋转四元数，彻底解决旋转空间冲突问题：

1. 修改Player类构造函数 #

替换单一的rotation四元数，分离存储偏航和俯仰角度：

import * as THREE from '../three/src/Three.js'

class Player {
    constructor(moveSpeed, keys = { W: false, A: false, S: false, D: false, ' ': false, SHIFT: false }) {
        this.moveSpeed = moveSpeed;
        this.keys = keys;
        this.position = new THREE.Vector3();
        // 分离偏航（左右旋转）和俯仰（上下旋转）角度
        this.yaw = 0;
        this.pitch = 0;
        this.needToHandleMouseMove = false;
        this.needToHandleKeyboard = false;

        // 绑定事件处理器到实例
        this.handleKeyDown = this.handleKeyDown.bind(this);
        this.handleKeyUp = this.handleKeyUp.bind(this);
        this.handleMouseMove = this.handleMouseMove.bind(this);
    }

2. 重写鼠标移动事件处理器 #

直接更新偏航和俯仰角度，并限制俯仰范围避免过度旋转：

handleMouseMove(event) {
    if (this.needToHandleMouseMove) {
        let movementX = event.movementX || event.mozMovementX || event.webkitMovementX || 0;
        let movementY = event.movementY || event.mozMovementY || event.webkitMovementY || 0;

        // 更新角度：X轴移动控制偏航，Y轴移动控制俯仰
        this.yaw -= movementX * 0.002;
        this.pitch -= movementY * 0.002;

        // 限制俯仰角度在±80°左右（避免完全垂直）
        this.pitch = Math.max(-Math.PI/2 + 0.1, Math.min(Math.PI/2 - 0.1, this.pitch));
    }
}

3. 添加旋转四元数生成方法 #

通过YXZ顺序的欧拉角生成四元数，保证俯仰绕玩家局部X轴、偏航绕世界Y轴旋转：

// 获取当前玩家的最终旋转四元数
getRotationQuaternion() {
    const quaternion = new THREE.Quaternion();
    // YXZ顺序：先俯仰（X轴）再偏航（Y轴），避免万向锁
    quaternion.setFromEuler(new THREE.Euler(this.pitch, this.yaw, 0, 'YXZ'));
    return quaternion;
}

4. 更新移动逻辑中的旋转矩阵 #

使用新的旋转四元数生成移动方向矩阵：

checkForMovement() {
    let direction = new THREE.Vector3();
    let rotationMatrix = new THREE.Matrix4();
    // 使用分离角度生成的旋转四元数
    rotationMatrix.makeRotationFromQuaternion(this.getRotationQuaternion());

    if (this.keys.W) {
        direction.z -= 1;
    }
    if (this.keys.S) {
        direction.z += 1;
    }
    if (this.keys.D) {
        direction.x += 1;
    }
    if (this.keys.A) {
        direction.x -= 1;
    }
    if (this.keys[' ']) {
        direction.y += 1;
    }
    if (this.keys.SHIFT) {
        direction.y -= 1;
    }

    direction.normalize(); // 保证各方向移动速度一致
    direction.applyMatrix4(rotationMatrix);
    direction.multiplyScalar(this.moveSpeed);

    this.position.add(direction);
}

5. 同步相机旋转 #

在game.js的animate函数中，使用玩家新的旋转四元数同步相机：

function animate(time) {
    player.checkForMovement();

    // 使用玩家的旋转四元数更新相机
    camera.setRotationFromQuaternion(player.getRotationQuaternion());

    camera.position.copy(player.position);

    renderer.render(scene, camera);
};

效果验证 #

修改后：

• X轴上下旋转不再出现滚转，始终保持玩家视角的俯仰逻辑
• 鼠标画圈操作时相机不会发生异常左右旋转
• 旋转稳定性完全符合FPS游戏的视角控制预期

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