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

标签 javascript mobile 3d accelerometer gyroscope

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

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

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

我不知道它是否有帮助,但是 here 是一个很好的例子,说明了这是如何处理的。 (按下底部的轴状图标;您必须在没有陀螺仪和陀螺仪的设备上看到它才能看到差异)。他们对没有陀螺仪的设备所做的只是更新pitchroll。当您用手机旋转时,偏航 不会更新。

所以,这绝对是可能的,但我在搜索了很多之后还没有发现如何。如果有人能提供帮助,那就太好了。

非常感谢。

编辑:

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

最佳答案

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

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

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

希望这对您有所帮助!

编辑:

请注意:此处使用了 DeviceMotionEvent,因为旋转速率(和加速度等)只能从此事件中访问。 OP 仅尝试了 DeviceOrientationEvent,因此值得一提。

关于javascript - 如何在网络浏览器中检测设备是否具有陀螺仪?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/33833492/

相关文章:

javascript - 在 Woocommerce 可变产品的 jQuery 中获取选定的变化价格

JavaScript 滚动条推荐

javascript - 无法在 Node js 中设置超时

Jquery Mobile css 和 js 在 Dynamic jquery mobile PopUp 之后无法正确加载 - c# .net MVC

css - 移动优化 - 根据屏幕大小有条件地加载 HTML

c++ - 每轴网格属性(颜色),它是如何工作的?

javascript - 循环步进器标题并添加除最后一项之外的分隔线

java - 如何在使用 retrofit 2 时显示旋转图标以获取异步 Restful 调用的响应

c++ - 寻找 3D 速度 vector

ios - 动画 3D 模型以错误的方式跟随 ARKit Scene 的运动