修复Three.js相机控制仅初始视角正常的问题

我完全懂你遇到的这个糟心问题——就像老式街机摇杆那种“换个方向站，操作就全歪了”的情况！核心原因是你直接修改相机的rotation.x和rotation.y（欧拉角），当你转头后，相机的局部坐标系和世界坐标系不再对齐，上下拖动鼠标时，旋转的轴还是世界空间的X轴，自然就会出现反转或者错位的情况。

下面给你一个简单直接的修复方案，核心是改用基于方向向量的视角控制，让旋转始终贴合相机的当前朝向：

关键修改步骤 #

1. 调整全局视角变量的初始值（保证初始视角朝前）
2. 重写onMouseMove函数，用方向向量+lookAt来控制视角，替代直接设置欧拉角

修改后的全局变量 #

在你的全局变量声明部分，把yaw的初始值调整一下：

let pitch = 0, yaw = -Math.PI / 2; // 初始yaw设为-Math.PI/2，让相机默认朝前（Z轴负方向）

重写onMouseMove函数 #

替换你原来的onMouseMove函数：

function onMouseMove(event) {
    if (document.pointerLockElement) {
        const sensitivity = 0.002;

        // 更新视角角度
        yaw -= event.movementX * sensitivity;
        pitch -= event.movementY * sensitivity;
        // 限制上下视角范围，避免相机“翻跟头”
        pitch = Math.max(-Math.PI / 2, Math.min(Math.PI / 2, pitch));

        // 计算当前视角的方向向量
        const cameraDirection = new THREE.Vector3();
        cameraDirection.x = Math.cos(yaw) * Math.cos(pitch);
        cameraDirection.y = Math.sin(pitch);
        cameraDirection.z = Math.sin(yaw) * Math.cos(pitch);
        cameraDirection.normalize();

        // 让相机看向当前方向（基于自身位置）
        camera.lookAt(camera.position.clone().add(cameraDirection));
    }
}

为什么这个方案有效？ #

• 我们通过yaw（左右旋转）和pitch（上下旋转）计算出相机的目标方向向量，这个向量是基于世界坐标系的，但会跟随你转头的角度动态调整
• 用camera.lookAt()让相机始终看向自身位置加上这个方向向量的点，这样无论你转头到哪个方向，上下拖动鼠标都会正确地让相机抬头/低头，左右拖动也始终是绕世界Y轴旋转，完美解决视角错位的问题

如果你追求更高效的性能，也可以用四元数来实现（避免每次创建新的Vector3），代码如下：

function onMouseMove(event) {
    if (document.pointerLockElement) {
        const sensitivity = 0.002;

        yaw -= event.movementX * sensitivity;
        pitch -= event.movementY * sensitivity;
        pitch = Math.max(-Math.PI / 2, Math.min(Math.PI / 2, pitch));

        // 用四元数设置旋转，YXZ顺序避免万向锁问题
        const rotationQuaternion = new THREE.Quaternion();
        rotationQuaternion.setFromEuler(new THREE.Euler(pitch, yaw, 0, 'YXZ'));
        camera.setRotationFromQuaternion(rotationQuaternion);
    }
}

直接替换你的onMouseMove函数，再调整yaw的初始值，就能解决你遇到的所有视角控制问题啦！

备注：内容来源于stack exchange，提问作者Mason Fisher