javascript - 在javascript中使用DeviceOrientation事件时解决云台锁定的最简单方法-如何制作完美的水平仪/气泡级应用程序

Question

从...开始...

window.addEventListener("deviceorientation", handleDeviceTilt);
function handleDeviceTilt(event){
// Here we can use event.beta, event.gamma
// Note that we don't need event.alpha because that's just the compass as we
// don't need to know which way is north to build a simple bubble-level app
// or similar apps.
}

...在这种情况下 beta和 gamma只要手机或平板电脑与地面平行(比如放在 table 上)，这些值就很好用。但是当手机或平板电脑与墙壁平行时，我们无法获得现实的值(value)。 gamma当设备直立/垂直(即纵向模式)时会变得特别疯狂，这是握住移动设备的最常见方式。
请通过查看立方体 HERE 来观察 Android 设备的问题。

我们需要计算真实 Angular ，以便我们可以在应用程序中准确使用倾斜信息。问题是，

What would be the simplest way to calculate the real angles like realBeta and realGamma (perhaps by using Math.cos() andMath.sin() or by some other method) in order to unlock the so calledgimbal lock? Can this be done without matrices and/or quaternions? My guess is "yes" because the "distortedness" in gamma is proportional in some way to beta. If quaternions are the only solution then how exactly do we get realGamma or actualGamma or fixedCorrectGamma using them?

注 1:PlayStore 上有一个水平仪应用程序，可以完美显示设备的真实倾斜 Angular 。所以有证据证明它是可行的。然而，截至 2021 年，似乎没有可用于此类用 javascript 编写的应用程序的开源代码。
注2:此问题已被提及 here .
注 3:精度是必需的。我们越接近精确的 Angular 越好。 alpha为简单起见可以省略。
这有什么用？
通过解决这个问题，我们可以使用 deviceorientation制作类似的东西，


...或者例如，我们可以在垂直赛车游戏中使用 Gamma 来驾驶汽车。


您可以通过访问 HERE 来观察实际问题。 (或通过查找类似的东西)在您的移动设备上。打开显示 [ 的开关显示方位 Angular ] 并观察 γ ( gamma ) 为 beta接近90度。还可以查看当您尝试将设备保持在完全直立的位置时 Gyro-Cube 会发生什么。
最后的想法，

We may need some arcane mathmagics.

Answer 1

恐怕只能通过deviceorientation 获取您要查找的信息。由于您自己说的原因，事件不可能发生:万向节锁定。
有成群结队的数学家在这方面进行研究，我们可以从他们的研究中了解到，解决万向节锁定问题的唯一方法就是避免它:当我们开始靠得太近时，我们必须改变方法。
获得该 Angular 另一种方法(仅在手机几乎垂直时才有效，因此恰好在我们需要替代方法时)可以使用 devicemotion数据而不是 deviceorientation数据。

window.addEventListener("devicemotion", event => {
  const { x } = event.accelerationIncludingGravity;

  const radiantsRes = Math.asin(x / 9.80665);
  const degreesRes = (radiantsRes * 180) / Math.PI;

  console.log(degreesRes.toFixed(2), radiantsRes.toFixed(10))
});