HTML5方向轴跳动问题

Question

我正在制作一个网络应用程序，需要知道手机围绕深度轴的方向：就像手机如果像时钟表盘上的指针一样旋转时会在哪里。Beta轴可以告诉我这一点。

然而，当我将手机保持竖直模式面对我时，当我前后倾斜手机（Rolodex上的顶部卡片的方式），所有值都会跳动。请参见视频：

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

我在两部手机上都试过了，结果一致。如何获取那个beta轴的值而不跳动？我确信有一种数学方法可以消除这些跳动，但我不确定该从哪里开始。

- eje211

Answer 1

我本来想放弃了，但是我想，“咦，我在Unity中从来没有遇到过这种问题。当然，Unity有四元数。” 这个想法让我想到JavaScript一定有一个四元数库，的确 有。

这让我想到了这段代码：我只需将“上方”旋转到手机方向转换为四元数并抓取z轴即可。

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];
});

这正是我所需的结果！

- eje211