Adjusting Device Orientation Base State in Three.js

To change the base state from a phone lying face up to a phone held upright in portrait mode, you need to apply an offset rotation to compensate for the difference between these two orientations.

The key is to apply a rotation offset to the quaternion derived from the device orientation. Here's how you can modify your code:

JAVASCRIPTCopied
if (isMobile && !/iPad|Macintosh/i.test(navigator.userAgent)) {
    camera.position.set(0, 0, 0);

    // Create a quaternion for the offset rotation (90 degrees around X-axis)
    const offsetQuaternion = new THREE.Quaternion();
    offsetQuaternion.setFromEuler(new THREE.Euler(-Math.PI/2, 0, 0));

    // Mobile device controls (using device orientation)
    window.addEventListener("deviceorientation", (event) => {
        const alpha = (event.alpha * Math.PI) / 180;
        const beta = (event.beta * Math.PI) / 180;
        const gamma = (event.gamma * Math.PI) / 180;

        // Create Euler angles from device orientation
        const euler = new THREE.Euler(beta, gamma, alpha, "YXZ");
        
        // Convert to quaternion
        const deviceQuaternion = new THREE.Quaternion();
        deviceQuaternion.setFromEuler(euler);
        
        // Apply the offset rotation
        // This multiplies the device quaternion by the offset quaternion
        const finalQuaternion = deviceQuaternion.multiply(offsetQuaternion);
        
        // Apply to camera
        camera.setRotationFromQuaternion(finalQuaternion);
    });

    // Disable OrbitControls 
    controls.enabled = false;
}

The key changes are:

1. Creating an offset quaternion that represents a -90 degree rotation around the X-axis (which transforms from lying flat to standing upright)
2. Multiplying the device orientation quaternion by this offset

You might need to adjust the exact rotation angle and axis depending on your coordinate system and desired orientation. If this specific offset doesn't work correctly, you may need to experiment with different values or even try:

JAVASCRIPTCopied
// Alternative approach - try different rotation orders or axes
offsetQuaternion.setFromEuler(new THREE.Euler(0, -Math.PI/2, 0, "XYZ"));
// or
offsetQuaternion.setFromEuler(new THREE.Euler(0, 0, -Math.PI/2, "XYZ"));

The order of multiplication also matters. If the above doesn't work, try:

JAVASCRIPTCopied
const finalQuaternion = new THREE.Quaternion().multiplyQuaternions(offsetQuaternion, deviceQuaternion);

This approach should help you achieve the desired base orientation while maintaining proper response to device movements.