Three.js使用PointerLockControls时相机Y轴位置为何偶发变动

问题现象 #

使用JavaScript结合Three.js开发第一人称3D游戏时，通过PointerLockControls控制相机，出现Y轴位置随机跳动的异常：

• 异常幅度极小，游戏画面中很难直接察觉，只有在渲染循环中打印camera.position属性时，才能观测到Y轴数值偶发变化
• 异常仅在按下WASD按键触发移动时出现
• 移动逻辑通过调用controls.moveForward()和controls.moveRight()实现，预期这两个方法不会修改Y轴位置

相关核心代码：

var controls = new THREE.PointerLockControls(camera, document.body);
document.onclick = function () {
    controls.lock();
}

function loop() {
    if (wDown) {
        controls.moveForward(0.1);
    }
    if (sDown) {
        controls.moveForward(-0.1);
    }
    if (dDown) {
        controls.moveRight(0.1);
    }
    if (aDown) {
        controls.moveRight(-0.1);
    }
    // 打印相机位置
    console.log(camera.position);
    renderer.render(scene, camera);
    requestAnimationFrame(loop);
}

原因说明 #

你对移动方法的理解没有问题，标准实现下moveForward()和moveRight()本身不会主动修改Y轴坐标，出现该问题的核心原因基本都是相机俯仰角（上下视角的旋转角度）没有做范围限制，数值累积超过±90度导致的：

• PointerLockControls计算移动方向时，是基于相机当前朝向生成位移向量的。当俯仰角转动超过±90度时，原本应该完全水平的移动向量会拆分出垂直方向的分量，触发移动时就会带动Y轴坐标变动
• 这类角度偏差通常幅度极小，所以画面上很难第一时间发现，只会表现为控制台输出的Y轴数值微小波动
• 如果你使用的是很早版本的Three.js，旧版PointerLockControls的位移计算没有强制将向量投影到水平平面，视角俯仰的分量会被带入位移计算，长期运行累积浮点误差也会出现Y轴偏移。

修复方案 #

1. 优先限制俯仰角范围（推荐） #

如果是r129以后的较新版本Three.js，PointerLockControls本身自带俯仰角限制属性，直接设置即可：

// 限制俯仰角范围，留0.01弧度（约0.5度）余量避免触发万向锁
controls.minPolarAngle = 0.01; // 最上视角限制，0为完全垂直向上看
controls.maxPolarAngle = Math.PI - 0.01; // 最下视角限制，Math.PI为完全垂直向下看

如果是旧版本没有自带属性，可以给controls加change事件回调手动限制角度：

controls.addEventListener('change', () => {
  camera.rotation.x = Math.max(
    -Math.PI/2 + 0.01, 
    Math.min(Math.PI/2 - 0.01, camera.rotation.x)
  );
});

2. 兜底锁死水平高度（可选） #

如果加完角度限制还是存在极微小的浮点误差，可以在每帧移动逻辑后强制把Y轴坐标重置为设定好的玩家高度，彻底杜绝Y轴异常变动：

const PLAYER_HEIGHT = 1.6; // 根据项目实际相机高度修改
function loop() {
    if (wDown) controls.moveForward(0.1);
    if (sDown) controls.moveForward(-0.1);
    if (dDown) controls.moveRight(0.1);
    if (aDown) controls.moveRight(-0.1);
    // 兜底锁Y轴
    camera.position.y = PLAYER_HEIGHT;
    console.log(camera.position);
    renderer.render(scene, camera);
    requestAnimationFrame(loop);
}

注意：如果后续要加入跳跃、上下楼梯等需要修改Y轴位置的逻辑，这个兜底方案需要配合碰撞检测、重力逻辑调整，不能一直强制锁死Y值。

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