HTML5方向轴跳转

Question

我正在制作一个网络应用程序,我需要知道手机在深度轴周围的方向:就像手机在时钟面上像手臂一样旋转时的位置.beta轴告诉我这个.

但是,当我以纵向模式对着我握住手机时,当我来回倾斜手机时(Rolodex顶部卡片倾斜的方式),所有值都会跳跃.观看视频:

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

我已经在两部手机上试过了它们并且它们是一致的.如何在没有跳跃的情况下获得beta轴值？我确信有一种数学方法可以抵消跳跃,但我不确定从哪里开始.

Answer 1

我正要放弃,我想,"哎呀,我从来没有和Unity那样的问题.当然,Unity有四元数." 这个想法让我觉得必须有一个用于JavaScript的Quaternion库,确实存在.

这让我想到了这个代码:我只是将"向上"旋转到手机方向转换为四元数并抓住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];
});

这给出了我需要的结果!