如何在网络浏览器中检测设备是否具有陀螺仪？

Question

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

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

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

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

所以，这绝对是可能的，但我搜索了很多也还没有找到。如果有人能提供帮助就太好了。

非常感谢。

编辑：

在只有加速度计的设备上，例如 MOTO E，所有值均为空 - DeviceOrientationEvent 和 rotationRate - 除了 accelerationIncludingGravity 的唯一例外。但是，我之前测试的设备没有陀螺仪，但仍然为 DeviceOrientationEvent 提供 alpha、beta、gamma 值，似乎有 2 加速度计根据 the "sensors" details on GSM Arena。这就是我怀疑它能够提供 DeviceOrientationEvent 数据的方式，尽管嘈杂。看起来 2 个加速度计不足以提供旋转速率 ;)

Answer 1

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

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

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

希望对您有所帮助！

编辑：

只是一个小提示：这里使用了 DeviceMotionEvent，因为旋转速率（和加速度等）只能从此事件中访问。 OP 仅尝试了 DeviceOrientationEvent，因此值得一提。

Answer 2

现代解决方案：

if (window.DeviceOrientationEvent) {
  // gyro exist
}

source

如何在网络浏览器中检测设备是否具有陀螺仪？

How do I detect if a device has a gyroscope in a web browser?

javascript

3d

mobile

accelerometer

gyroscope

编辑：

编辑：