我用A-Frame写了个简单的VR场景,在桌面浏览器里跑得好好的,但一到手机上就黑屏,连模型都出不来。试过加vr-mode-ui="enabled: false"也没用,控制台也没报错,就是一片黑。
是不是漏了什么移动端适配的设置?或者需要额外引入什么polyfill?我的代码结构大概是这样的:
<a-scene>
<a-box position="0 1.5 -3" color="#4CC3D9"></a-box>
<a-entity camera look-controls></a-entity>
</a-scene>
第一个要确认的是你的页面是不是HTTPS协议部署的。移动端浏览器对WebGL和WebXR有安全限制,必须在HTTPS环境下才能正常初始化3D上下文。本地开发用localhost可以,但线上必须是https,不然直接静默失败,控制台都不一定给你报错。要做校验的话,可以在页面加载时检查
navigator.xr是否存在。第二个是你的HTML头部有没有加viewport标签,移动端没这个的话渲染尺寸会出问题。加上这个:
第三个问题比较隐蔽,A-Frame在移动端需要用户交互才能启动渲染循环。你那个
vr-mode-ui="enabled: false"只是把VR按钮隐藏了,但没解决根本问题。可以在场景里加个启动按钮,让用户点击后再初始化场景,或者监听loaded事件后手动调用scene.enterVR()。另外你的camera实体写法也有点问题,移动端建议加上
wasd-controls和正确的触摸控制:如果还是黑屏,打开Chrome远程调试,连上手机看控制台有没有WebGL上下文丢失的警告。有些低端机WebGL支持不完整,这种只能做降级处理了。