I'm creating a small project using three.js where the camera is inside a textured sweater. Rotating the camera is to be done using the orientation of the phone in space. At first glance, my solution works fine, but as the device approaches the vertical position (angle Beta approaches 90 degrees), the image goes crazy and rotates unexpectedly. It looks like the device has rotated 360 degrees around one of the axes (corresponding to the alpha angle).

我正在用Three.js创建一个小项目，相机放在一件有纹理的毛衣里。旋转相机是使用手机在太空中的方向来完成的。乍一看，我的解决方案运行良好，但随着设备接近垂直位置(Beta角接近90度)，图像变得疯狂并意外旋转。它看起来像是设备已经围绕其中一个轴(对应于Alpha角度)旋转了360度。

createScene() {
    const scene = new THREE.Scene();
    console.log('scene', scene);

    // create a new Three.js perspective camera
    const camera = new THREE.PerspectiveCamera(
      75, // field of view
      window.innerWidth / window.innerHeight, // aspect ratio
      0.1, // near plane
      1000 // far plane
    );

    // create a new Three.js renderer
    const renderer = new THREE.WebGLRenderer();

    // set the renderer size to the window dimensions
    renderer.setSize(window.innerWidth, window.innerHeight);

    // get the container element for the background
    const backgroundContainer = document.querySelector('.vr-sphere');

    if (backgroundContainer == null) 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);

    // invert the geometry to render it inside out
    geometry.scale(-1, 1, 1);

    const material = new THREE.MeshBasicMaterial({
      map: texture,
    });

    const sphere = new THREE.Mesh(geometry, material);

    scene.add(sphere);

    // set the camera's position in the scene
    camera.position.set(0, 0, 0);

    // enable VR mode based on DeviceOrientation API
    if (window.DeviceOrientationEvent) {
      window.addEventListener('deviceorientation', (event) => {
        let alpha = event.alpha ? THREE.MathUtils.degToRad(event.alpha) : 0; // Z
        let beta = event.beta ? THREE.MathUtils.degToRad(event.beta) : 0; // X'

        if (alpha && beta) {
          if (beta >= 0 && beta <= 180) {
            // up/down rotation
            camera.rotation.set(-Math.PI / 2 + beta, 0, 0);
            // left/right rotation
            sphere.rotation.y = -alpha;
        }
      });
    }

    function animate() {
      // request the next frame of the animation
      requestAnimationFrame(animate);

      renderer.render(scene, camera);
    }

    animate();

  }

I've read that the solution to this problem can be to use quanterions or rotation matrices. I tried implementing them using three.js built-in functions but the effect was the same. Has anyone encountered a similar problem and knows how to solve it?

我读到过，这个问题的解决方案可以是使用四元数或旋转矩阵。我尝试使用Three.js内置函数来实现它们，但效果是一样的。有没有人遇到过类似的问题，并知道如何解决？

You found the problem: use quaternions.

您发现了问题：使用四元数。

I wrote this class that you're free to reuse or modify (citation is welcome), to add device orientation controls to three.js project.

我编写了这个类，您可以自由重用或修改(欢迎引用)，将设备方向控件添加到Three.js项目中。

Instead of DeviceOrientationEvent, I use AbsoluteOrientationSensor

我使用的不是DeviceOrientationEvent，而是绝对定向传感器

The crucial part is here:

关键的部分在这里：

// Retrieve device absolute rotation quaternion
const q1 = new THREE.Quaternion().fromArray(this.sensor.quaternion)

// Ispired by https://gist.github.com/kopiro/86aac4eb19ac29ae62c950ad2106a10e
// Apply rotation around x axis (camera points toward the back of the phone, not up)
// and then update camera quaternion
const q2 = new THREE.Quaternion().setFromAxisAngle( new THREE.Vector3(1, 0, 0), -Math.PI/2 )
this.camera.quaternion.multiplyQuaternions(q2, q1)