I’m using three.js and DeviceMotion events to make a 3d gallery, where camera rotation on mobile is determined by device rotation (alpha, beta, gamma). Everything works as intended, except I want to change the “base” state from phone laying face up in portrait to phone being held up in portrait.

Here’s a very crude drawing of what I mean:

And here’s my code:

```
if (isMobile && !/iPad|Macintosh/i.test(navigator.userAgent)) {
camera.position.set(0, 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;
var euler = new THREE.Euler(beta, gamma, alpha, "YXZ"); // ' is the order of rotations
// console.log(
// `DeviceOrientationEvent: alpha ${alpha}, beta ${beta}, gamma ${gamma}`
// );
var quaternion = new THREE.Quaternion();
quaternion.setFromEuler(euler);
camera.setRotationFromQuaternion(quaternion);
});
// Disable OrbitControls
controls.enabled = false;
}
```

I’ve tried applying a shift to the alpha/beta/gamma values, as well as rotating the whole scene, but both seem to break the rotation. I apologize if the solution is really simple, I’m not the best with geometry