在 VRView for web 中禁用 Gyroscope/Device 方向读取
Disable Gyroscope/Device Orientation reading in VRView for web
我有一个用于虚拟房屋参观的网络应用程序。目前,我正在使用 VRView 进行这些游览,效果非常好,但是我 运行 遇到陀螺仪问题,需要尽快修复。
VRView 会根据用户的设备方向自动旋转相机。当用户转动他们的 phone 时,虚拟房屋之旅也会转动,因此用户能够“环顾”房屋。这对大多数用例来说都很好,但是低端设备在处理此类更改时会遇到问题。我需要一种方法让用户禁用自动旋转,只需轻扫他们的 phone 即可环顾四周。
我已经尝试了权限 api 并试图撤销对陀螺仪的访问,但由于浏览器与那个 api 的兼容性,它不起作用。我在 VRView 库中也找不到任何关于此的文档。非常感谢任何帮助。
tldr;
你说得对,这似乎无法通过他们的 API 获得。看起来您可能需要分叉库并进行一些调整。如果您想沿着这条路走下去,我建议您分叉回购协议,看看您是否可以成功禁用运动发射器,然后看看您是否可以使用 webvr-polyfill 来启动拖动控件。也可以直接通过 webvr-polyfill 禁用基于陀螺仪的旋转。
更深入的解释:
运动信息正在两个位置发布到 VR View iframe(我相信它们随后将它们提供给 webvr-polyfill 控件):
https://github.com/googlearchive/vrview/blob/bd12336b97eccd4adc9e877971c1a7da56df7d69/scripts/js/device-motion-sender.js#L35
https://github.com/googlearchive/vrview/blob/bd12336b97eccd4adc9e877971c1a7da56df7d69/src/api/iframe-message-sender.js#L45
当浏览器的 UA(用户代理)标志指示它不能使用陀螺仪控件时,您需要在其中包含一个标志以禁用此功能(或禁用 iframe 中的侦听器)。
通常,要启用拖动旋转,我认为您需要为拖动事件的开始和结束编写一个侦听器,将这些事件转换为相机旋转。 (类似于此人的建议:https://github.com/googlearchive/vrview/issues/131#issuecomment-289522607)
但是,控件似乎是通过 web-vr-polyfill 导入的。 'window.WebVRConfig' 对象来自 web-vr-polyfill,如果我没看错的话。
看这里:https://github.com/googlearchive/vrview/blob/bd12336b97eccd4adc9e877971c1a7da56df7d69/src/embed/main.js#L77
上面的代码看起来像是 VR View 在检测到某个标志(在本例中为 'YAW_ONLY' 属性)时正在调整 WebVRConfig。我相信你必须做类似的事情。
https://github.com/immersive-web/webvr-polyfill
请参阅此处了解 YAW_ONLY 属性:https://github.com/immersive-web/webvr-polyfill/blob/e2958490653bfcda4df83881d554bcdb641cf45b/src/webvr-polyfill.js#L68
请参阅此处了解在 webvr-polyfill 中调整控件的示例:
https://github.com/immersive-web/webvr-polyfill#using
我有一个用于虚拟房屋参观的网络应用程序。目前,我正在使用 VRView 进行这些游览,效果非常好,但是我 运行 遇到陀螺仪问题,需要尽快修复。
VRView 会根据用户的设备方向自动旋转相机。当用户转动他们的 phone 时,虚拟房屋之旅也会转动,因此用户能够“环顾”房屋。这对大多数用例来说都很好,但是低端设备在处理此类更改时会遇到问题。我需要一种方法让用户禁用自动旋转,只需轻扫他们的 phone 即可环顾四周。
我已经尝试了权限 api 并试图撤销对陀螺仪的访问,但由于浏览器与那个 api 的兼容性,它不起作用。我在 VRView 库中也找不到任何关于此的文档。非常感谢任何帮助。
tldr;
你说得对,这似乎无法通过他们的 API 获得。看起来您可能需要分叉库并进行一些调整。如果您想沿着这条路走下去,我建议您分叉回购协议,看看您是否可以成功禁用运动发射器,然后看看您是否可以使用 webvr-polyfill 来启动拖动控件。也可以直接通过 webvr-polyfill 禁用基于陀螺仪的旋转。
更深入的解释:
运动信息正在两个位置发布到 VR View iframe(我相信它们随后将它们提供给 webvr-polyfill 控件): https://github.com/googlearchive/vrview/blob/bd12336b97eccd4adc9e877971c1a7da56df7d69/scripts/js/device-motion-sender.js#L35 https://github.com/googlearchive/vrview/blob/bd12336b97eccd4adc9e877971c1a7da56df7d69/src/api/iframe-message-sender.js#L45
当浏览器的 UA(用户代理)标志指示它不能使用陀螺仪控件时,您需要在其中包含一个标志以禁用此功能(或禁用 iframe 中的侦听器)。
通常,要启用拖动旋转,我认为您需要为拖动事件的开始和结束编写一个侦听器,将这些事件转换为相机旋转。 (类似于此人的建议:https://github.com/googlearchive/vrview/issues/131#issuecomment-289522607)
但是,控件似乎是通过 web-vr-polyfill 导入的。 'window.WebVRConfig' 对象来自 web-vr-polyfill,如果我没看错的话。 看这里:https://github.com/googlearchive/vrview/blob/bd12336b97eccd4adc9e877971c1a7da56df7d69/src/embed/main.js#L77
上面的代码看起来像是 VR View 在检测到某个标志(在本例中为 'YAW_ONLY' 属性)时正在调整 WebVRConfig。我相信你必须做类似的事情。
https://github.com/immersive-web/webvr-polyfill
请参阅此处了解 YAW_ONLY 属性:https://github.com/immersive-web/webvr-polyfill/blob/e2958490653bfcda4df83881d554bcdb641cf45b/src/webvr-polyfill.js#L68
请参阅此处了解在 webvr-polyfill 中调整控件的示例: https://github.com/immersive-web/webvr-polyfill#using