A-Frame 1.4.0在iOS设备上不显示VR按钮问题求助

问题描述 #

我正在开发一款支持Google Cardboard的浏览器端小型VR应用，基于A-Frame框架。遇到以下问题：

• 使用A-Frame 1.4.0时，VR按钮完全不显示，甚至官网的HelloVR示例也无法看到进入VR模式的按钮；
• 降级到A-Frame 1.3.0后，VR按钮显示，但点击进入Cardboard模式后出现空白白屏；
• 测试环境：iPhone 12 mini（iOS 16.3），Chrome 110.0.5481.114、Safari 16、Firefox 110.2均出现相同问题。

浏览器日志 #

A-Frame 1.4.0日志

LOGA-Frame Version: 1.4.0 (Date 2022-12-26, Commit #60a324a2)
LOGTHREE Version (https://github.com/supermedium/three.js): ^0.147.0
LOGWebVR Polyfill Version: ^0.10.12
WARNINGwebvr-polyfill: Invalid timestamps detected: Timestamp from devicemotion outside expected range.
LOG%ccore:a-assets:warn %cAsset loading timed out in %c  color: orange color: inherit color: orange 3000 ms
WARNINGTHREE.WebGLRenderer: Texture marked for update but image is incomplete
...

A-Frame 1.3.0日志

LOGA-Frame Version: 1.3.0 (Date 2022-02-04, Commit #cc3516ce)
LOGTHREE Version (https://github.com/supermedium/three.js): ^0.137.0
LOGWebVR Polyfill Version: ^0.10.12
WARNINGwebvr-polyfill: Invalid timestamps detected: Timestamp from devicemotion outside expected range.
LOG%ccore:a-assets:warn %cAsset loading timed out in %c  color: orange color: inherit color: orange 3000 ms
WARNINGTHREE.WebGLRenderer: Texture marked for update but image is incomplete
WARNINGTHREE.WebGLRenderer: Can't change size while VR device is presenting.
...

解决方案尝试 #

1. 处理iOS权限限制

   • iOS 16+对devicemotion和deviceorientation接口新增了权限要求，需用户主动授权。在页面中添加权限请求代码，注意必须由用户交互（比如点击按钮）触发：

     if (typeof DeviceMotionEvent.requestPermission === 'function') {
       document.querySelector('.permission-btn').addEventListener('click', async () => {
         const permission = await DeviceMotionEvent.requestPermission();
         if (permission === 'granted') {
           // 权限获取成功后初始化VR场景
         }
       });
     }
     

2. 替换WebVR Polyfill

   • 旧版WebVR Polyfill对iOS 16兼容性差，改用WebXR Polyfill替代。下载最新版WebXR Polyfill脚本引入到HTML中，初始化时添加配置：

     const polyfill = new WebXRPolyfill();
     

3. 调整A-Frame场景配置

   • 禁用场景渲染器的自动尺寸调整，避免进入VR时的尺寸冲突：

     <a-scene renderer="antialias: true; autoResize: false">
       <!-- 场景内容 -->
     </a-scene>
     

   • 延长资源加载超时时间，避免因资源未加载完成导致白屏：

     <a-assets timeout="10000">
       <!-- 模型、纹理等资源定义 -->
     </a-assets>
     

4. 浏览器特定适配

   • Chrome iOS：在chrome://flags中搜索开启"WebXR Device API"；
   • Safari iOS：目前WebXR支持有限，优先使用Chrome或Firefox for iOS，并确保浏览器为最新版本。

总结 #

核心问题大概率是iOS 16的传感器权限限制和旧版WebVR Polyfill的兼容性问题。先处理权限请求，再替换Polyfill，基本能解决VR按钮不显示和白屏问题。

内容的提问来源于stack exchange，提问作者benny b