使用设备姿态控制Three.js相机：设备垂直时出现异常旋转

问题描述 #

开发基于Three.js的全景项目，相机置于纹理球内部，通过DeviceOrientation API控制姿态。设备接近垂直状态（Beta角接近90°）时，画面出现无规则跳变旋转，类似绕Alpha轴完成360°旋转。尝试用四元数/旋转矩阵解决，但使用Three.js内置函数后问题依旧。

问题原因 #

1. 万向锁问题：直接使用欧拉角（rotation属性）控制旋转，当Beta角接近90°时，Alpha轴与Gamma轴重合，导致旋转逻辑失效，出现跳变。
2. 姿态映射不完整：原代码仅处理Beta（上下）和Alpha（左右）轴，忽略了Gamma轴（设备左右倾斜）的影响，且分离控制相机和球体旋转，姿态转换逻辑不连贯。

解决方案 #

改用四元数处理姿态，结合正确的坐标系转换和旋转顺序，避免万向锁；同时直接控制相机姿态，保持球体静止，逻辑更清晰。

修改后的代码 #

createScene() {
    const scene = new THREE.Scene();

    // 创建透视相机
    const camera = new THREE.PerspectiveCamera(
        75,
        window.innerWidth / window.innerHeight,
        0.1,
        1000
    );
    camera.position.set(0, 0, 0);

    // 创建渲染器并挂载
    const renderer = new THREE.WebGLRenderer();
    renderer.setSize(window.innerWidth, window.innerHeight);
    const backgroundContainer = document.querySelector('.vr-sphere');
    if (!backgroundContainer) return;
    backgroundContainer.appendChild(renderer.domElement);

    // 加载纹理并创建全景球体
    const loader = new THREE.TextureLoader();
    const texture = loader.load('../../assets/images/oil_painting_van_gogh_starry_night.jfif');
    const geometry = new THREE.SphereGeometry(500, 60, 40);
    geometry.scale(-1, 1, 1); // 反转几何体实现内向外渲染
    const material = new THREE.MeshBasicMaterial({ map: texture });
    const sphere = new THREE.Mesh(geometry, material);
    scene.add(sphere);

    // 设备姿态监听与相机控制
    if (window.DeviceOrientationEvent) {
        // 初始化目标四元数用于平滑过渡
        const targetQuaternion = new THREE.Quaternion();
        
        window.addEventListener('deviceorientation', (event) => {
            const alpha = event.alpha ? THREE.MathUtils.degToRad(event.alpha) : 0;
            const beta = event.beta ? THREE.MathUtils.degToRad(event.beta) : 0;
            const gamma = event.gamma ? THREE.MathUtils.degToRad(event.gamma) : 0;

            // 构建适配Three.js坐标系的欧拉角，指定YXZ旋转顺序避免万向锁
            const euler = new THREE.Euler(-beta, -alpha, gamma, 'YXZ');
            targetQuaternion.setFromEuler(euler);
        });

        function animate() {
            requestAnimationFrame(animate);
            // 平滑过渡相机姿态，避免抖动
            camera.quaternion.slerp(targetQuaternion, 0.1);
            renderer.render(scene, camera);
        }
        animate();
    }
}

关键修改点 #

• 加入Gamma轴处理：完整映射设备的三维姿态，解决倾斜时的画面偏移问题。
• 使用四元数控制姿态：通过Quaternion替代欧拉角，彻底避免万向锁导致的跳变。
• 指定YXZ旋转顺序：该顺序更适配设备姿态的映射逻辑，进一步降低万向锁风险。
• 姿态平滑过渡：用slerp方法实现相机姿态的缓动更新，提升画面流畅度。
• 统一控制相机姿态：不再旋转球体，直接通过相机姿态变化实现全景视角切换，逻辑更直观。

额外注意事项 #

• 部分浏览器要求HTTPS协议（localhost除外）才能访问DeviceOrientation API，需确保部署环境符合要求。
• 若仍存在姿态偏移，可调整欧拉角的符号或旋转顺序，适配不同设备的坐标系差异。

内容的提问来源于stack exchange，提问作者Mikołaj Kaczmarski