问题标签 [deviceorientationevent]

我在 iOS 13.4.1 上的 Safari 中加载了一个网页。网页调用DeviceOrientationEvent.requestPermission()，在.catch下面.then我看到了这个错误：

NotAllowedError：请求设备方向或动作访问需要用户手势提示

但是，没有弹出请求权限。

有谁知道我错过了什么？

DeviceMotionEvent API 似乎提供了参考世界坐标系的加速度数据。

x- 表示从西到东轴的 x 轴上的加速度

y- 表示从南到北的 y 轴上的加速度

z- 表示从下到上轴 z 轴上的加速度

但是，我想参考设备的坐标系来使用这些数据。

这个 API 是否提供这种格式？

否则，是否可以通过从DeviceOrientationEvent（可能不提供“绝对”数据）获取方向来转换此数据？

absolute- 一个布尔值，指示设备是绝对提供方向数据（即，参考地球坐标系）还是使用设备确定的任意坐标系。

如果是这样，我必须使用什么数学公式？看起来我必须将矢量 (x, y, z) 旋转设备方向角度，但我不知道该怎么做。

我正在尝试使用接收到的数据DeviceOrientationEvents来动画（旋转）使用three.js 中的相机DeviceOrientationControls。控件会在每个动画帧上更新，并且一切正常。但是，如果我开始滚动，则 noDeviceOrientationEvent会再次触发，直到滚动的惯性完成。

我已经通过从处理程序内登录到控制台确认这些事件在滚动期间不会被触发（或至少不会被调度）DeviceOrientationEvent。我可以看到事件定期触发，直到我开始滚动，然后停止，然后从滚动惯性完成的那一刻开始恢复触发。

手动停止惯性中间滚动（通过触摸屏幕）也会导致deviceorientation事件恢复。

我已禁用scroll脚本中的所有其他事件处理程序。我已将所有触摸事件处理程序设为被动，也尝试将它们设为非被动，并且还尝试在我的脚本中完全禁用所有触摸事件处理程序。

在这一点上，我相当确定这可能是滚动线程的处理（与主线程分开运行）和 IMU 数据的处理如何在浏览器中调度/排队的函数，因此可能没有很好的解决方案，但我在这里问，以防我在自己的故障排除中忽略了一些东西。这似乎不是 three.js 或DeviceOrientationControlsinthree.js 的问题，但我已将其标记为 three.js，以防万一有人在尝试类似的事情时遇到此问题。

我在滚动时启用的独特案例DeviceOrientationControls是滚动驱动“相机装备”（旋转和位置动画的空对象）的动画，同时移动手机旋转相机本身。（这有点像在有轨电车中移动时能够转头环顾四周。）

我的测试是在 iPhone 11 Pro、iOS 13.5.1、Chrome iOS 84 和 Safari 上进行的。我没有在安卓上测试过。

从...开始...

...在这种情况下beta，gamma只要手机或平板电脑与地面平行（比如放在桌子上），这些值就很好用。但是当手机或平板电脑与墙壁平行时，我们无法获得现实的价值。gamma当设备直立/垂直（即纵向模式）时会变得特别疯狂，这是握住移动设备的最常见方式。

请通过查看此处的立方体来观察 Android 设备的问题

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

为了解锁所谓的万向节锁，计算realBeta和realGamma（可能通过使用Math.cos()和 或通过其他方法）之类的真实角度的最简单方法是什么？Math.sin()这可以在没有矩阵和/或四元数的情况下完成吗？我的猜测是“是”，因为 gamma 中的“失真”在某种程度上与 beta 成正比。如果四元数是唯一的解决方案，那么我们究竟如何获得realGamma或actualGamma使用fixedCorrectGamma它们？

注 1：PlayStore 上有一个水平仪应用程序，可以完美显示设备的真实倾斜角度。所以有证据证明它是可行的。然而，截至 2021 年，似乎没有可用于此类用 javascript 编写的应用程序的开源代码。

注2：这里已经提到了这个问题。

注 3：精度是必需的。我们越接近精确的角度越好。alpha为简单起见可以省略。

这有什么用？

通过解决这个问题，我们可以deviceorientation用来制作类似的东西，

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

您可以通过在移动设备上访问此处（或通过查找类似内容）来观察实际问题。打开显示 [显示方向角度] 的开关，观察 γ ( gamma)beta接近 90 度。还可以查看当您尝试将设备保持在完全直立的位置时 Gyro-Cube 会发生什么。

最后的想法，

我们可能需要一些神秘的数学魔法。

我为 @on:clock 回调设置了以下设置，该回调旨在询问用户对 iOS Safari 设备的 DeviceOrientationEvent API 的权限：

由于我在 Vue 3 + Tyepscript 世界中执行此操作，因此我设置deviceOrientationPermissionState了一个 ref（更多关于 refs 的信息：https ://v3.vuejs.org/guide/reactivity-fundamentals.html ）

这段代码正常工作，在 Safari iOS 或 webkit iOS 浏览器中加载时，要求获得许可，并且在回调时我可以访问设备的方向。

但是，打字稿不喜欢。

打字稿给了我这个错误：

当我尽我的 Typescript 知识修复错误时，代码不再有效。

所以......我开始将接口声明为：

但是，打字稿仍然不喜欢东西。

谁能告诉我我做错了什么，如何在 Safari 上进行这项工作，并让我和 Typescript 保持最好的伙伴关系？

根据 caniuse 的说法，我应该能够deviceorientation通过三星浏览器读取（设备的倾斜数据），但不能。我尝试在三星设备上查看https://sensorbox.glitch.me/null并且所有值都返回。我希望它可以与 Chrome 一起使用。但是，不仅三星浏览器而且 Chrome 都不会在三星设备上读取任何内容。

以前在这里报告过类似的问题， Samsung Galaxy Tab 上缺少 DeviceMotionEvent 和 DeviceOrientationEvent

有没有办法解决这个问题？如果不是，那么我想我们都必须编写一些仅限三星的后备代码，除非某些三星软件更新解决了这个问题。

注意：如果您有三星设备，请在评论中测试并报告您的结果。人们想知道是否只有部分或所有三星移动设备会执行此操作。