Example using RelativeOrientationSensor with Chrome

I would like to include RelativeOrientationSensor as an orientation control for Android Chrome. But there seems to be little working examples. I discovered orientation controls is broken on Chrome in landscape because the angle stays at 0 so a bug with Chrome. It seems this API is broken the same. And trying to make a demo of this for a bug report.

I have found a work around creating an Eular , detecting the orientation type string of “landscape-primary”, and telling the camera to look at rather than changing its quartonian. Its not perfect and glitches out.

Here is a basic example of something that is working but seems dodgy still. I need it to work similar to the orientation controls. ITs pointless using the new api if I have to use angle orientation detection right ?

Can the camera be controlled directly from the quaternion ? Ive tried stuff like this but wont work. It rotates up and down not across in landscape.


const sensorRel = new RelativeOrientationSensor();
sensorRel.onreading = () => {

const q = sensor.quaternion;
_sensorQ.set(q[0], q[1], q[2], q[3]);

let angleOrder = null,
landscape = screen.orientation.type.indexOf("landscape") > -1;

landscape ? angleOrder = 'ZXY' : angleOrder = 'ZYX';

euler.setFromQuaternion(_sensorQ, angleOrder);

switch (screen.orientation.type) {

                case "portrait-primary":
                    longitude = -euler.z;
                    latitude = euler.x - Math.PI/2;
                case "landscape-primary":
                    longitude = -euler.z + Math.PI/2;
                    latitude = -euler.y - Math.PI/2;             

let targetX = Math.sin(Math.PI/2 - latitude) * Math.cos(longitude);
let targetY = Math.cos(Math.PI/2 - latitude);
let targetZ = Math.sin(Math.PI/2 - latitude) * Math.sin(longitude);
camera.lookAt(new THREE.Vector3(targetX, targetY, targetZ));