如何检测设备是不是在 Web 浏览器中有陀螺仪？

Posted 2023-02-19

【中文标题】如何检测设备是不是在 Web 浏览器中有陀螺仪？

【英文标题】：How do I detect if a device has a gyroscope in a web browser?如何检测设备是否在 Web 浏览器中有陀螺仪？

【发布时间】：2016-02-23 08:13:37

【问题描述】：

我正在使用 THREE.js 并创建一个网络应用程序，用户可以在其中旋转设备，并且场景将相应移动。类似于this。

我在区分带有陀螺仪和不带有陀螺仪的设备时遇到了问题。

检测根本没有方向传感器的设备很容易。 DeviceOrientationEvent 的所有 alpha、beta、gamma 值均为空。但是，如果移动设备没有陀螺仪，它仍然会在 DeviceOrientationEvent 中给出 alpha、beta、gamma 值强>。问题是这些值非常嘈杂，并在场景中造成大量抖动。所以，我想禁用这些设备的设备方向。但是，到目前为止，我还没有找到如何确定数据是来自陀螺仪还是加速度计（这是我对数据来自哪里的猜测）。

我不知道它是否有帮助，但是可以在 here 看到一个很好的例子来说明如何处理这个问题。 （按底部的轴状图标；您必须在没有陀螺仪和陀螺仪的设备上看到它才能看到差异）。他们对没有陀螺仪的设备所做的只是更新 pitch 和 roll。 yaw 不会在您随手机旋转时更新。

所以，这绝对是可能的，但即使经过大量搜索，我还没有发现如何。如果有人能提供帮助，那就太好了。

非常感谢。

编辑：

在只有加速度计的设备上，例如 MOTO E，所有值都为空 - DeviceOrientationEvent 和 rotationRate - 唯一的例外是加速度包括重力。但是，我之前测试的设备没有陀螺仪，但仍然为 DeviceOrientationEvent 提供 alpha、beta、gamma 值，根据 @ 似乎有 2 个加速度计987654323@。这就是我怀疑它能够提供 DeviceOrientationEvent 数据的方式，尽管 嘈杂。看起来 2 个加速度计不足以提供旋转速率；）

【参考方案1】：

如果要检查是否存在陀螺仪，请检查只有陀螺仪可以测量的参数。例如，旋转速度是只有陀螺仪才能测量的。

看一下说明陀螺仪是否存在的示例代码：

var gyroPresent = false;
window.addEventListener("devicemotion", function(event)
    if(event.rotationRate.alpha || event.rotationRate.beta || event.rotationRate.gamma)
        gyroPresent = true;
);

希望这会有所帮助！

编辑：

请注意：这里使用 DeviceMotionEvent 是因为只能从该事件中访问rotationRate（和加速度等）。 OP 只尝试了 DeviceOrientationEvent，因此值得一提。

【讨论】：

哇！这创造了奇迹...... :D 非常感谢！我没想过检查任何其他事件。我在互联网上找不到任何东西来解决这个问题。再次感谢。

【参考方案2】：

现代解决方案：

if (window.DeviceOrientationEvent) 
  // gyro exist

source

【讨论】：

它不工作。在没有陀螺仪的桌面浏览器中试试这个。你会得到真实的。