HTML5 orientation jumps

Question

I am creating a web application for which I need to know the orientation of the phone around the depth axis: for example, if the phone were, if it rotated, like hands on the front of the watch. This beta axis tells me that.

However, when I hold the phone in portrait mode face to face, when I tilt the phone back and forth (the way the top card on the Rolodex will be tilted), all the values ​​jump. Watch the video:

https://drive.google.com/file/d/0B5C3MHv2Hmc6VTI2RDlOSkJPVHc/view?usp=sharing

I tried this on two phones and they are consistent. How can I get the value of this axis without a jump? I'm sure there is a mathematical way to compensate for jumps, but I'm not sure where to start.

Answer 1

I was about to give up, and I thought: “Gee, I never had such problems with Unity. But, of course, Unity has quaternions.” This thought made me think that for JavaScript there should be a Quaternion library, but there is .

This led me to this code: I just rotate up to the orientation of the phone converted to a quaternion and grab the z axis:

let quaternion = new Quaternion();
let radian = Math.PI / 180;

$(window).on('deviceorientation', function(event) {
    event = event.originalEvent;
    quaternion.setFromEuler(
        event.alpha * radian,
        event.beta * radian,
        event.gamma * radian);
    let vector3 = quaternion.rotateVector([0, 1, 0]);
    let result = vector3[2];
});

This gives exactly the result that I need!