I'm trying to build a kind of AR app using THREE.js and I need to figure out how to position the camera relative to the earth.
In Android you have the option to access absolute orientation (so no problem here). In Safari, however, you get the orientation relative to some arbitrary point and a compass heading value - this tells you the angle at which the top of your phone is pointing on the X,Z plane.
I'm trying to figure out how to use this compass heading to convert the relative orientation to absolute orientation.
Additional info
So far I've figured how to rotate the camera according to the device's orientation using window.event('deviceorientation' and a bit of geometry.
I've already tried getting rid of the Y-axis orientation and adding the compass heading angle along the axis, but it rotates the camera even though it shouldn't.
The "bit of geometry":
const offset = new THREE.Quaternion().setFromAxisAngle(
new THREE.Vector3(-1, 0, 0),
Math.PI / 2
);
const eulerOrientation = new THREE.Euler(beta, alpha, -gamma, "YXZ")
return new THREE.Quaternion().setFromEuler(eulerOrientation).multiply(offset)