提问人：eje211 提问时间：4/26/2017 更新时间：5/1/2017 访问量：268
HTML5 方向轴跳转
HTML5 orientation axes jump
问：
我正在制作一个 Web 应用程序，我需要知道手机围绕深度轴的方向：比如如果手机像时钟面上的手臂一样旋转，它会在哪里。beta 轴告诉我这一点。
但是，当我以纵向模式将手机面向我时，当我来回倾斜手机时（Rolodex 上的顶部卡倾斜的方式），所有值都会跳跃。观看视频：
https://drive.google.com/file/d/0B5C3MHv2Hmc6VTI2RDlOSkJPVHc/view?usp=sharing
我已经在两部手机上尝试过，它们是一致的。如何在不跳转的情况下获得该 beta 轴值？我确信有一种数学方法可以抵消跳跃，但我不确定从哪里开始。
答：
6赞
eje211
4/29/2017
#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];
});
这给出了我需要的结果！
评论