A-Frame场景中如何仅在VR头显存在时显示VR按钮？

默认情况下A-Frame会强制显示VR图标，哪怕当前设备没有兼容的VR头显。要实现仅在支持WebXR的VR设备下显示图标，直接借助WebXR API做检测即可，步骤如下：

1. 先隐藏默认的VR按钮
   通过CSS初始隐藏A-Frame内置的VR按钮：

.a-enter-vr-button {
  display: none;
}

2. 检测WebXR支持并控制显示
   在页面加载完成后，用WebXR API判断是否支持沉浸式VR会话，支持的话再显示按钮：

document.addEventListener('DOMContentLoaded', async () => {
  // 先判断浏览器是否支持WebXR API
  if (!navigator.xr) return;
  
  // 检测是否支持沉浸式VR会话
  const supportsVR = await navigator.xr.isSessionSupported('immersive-vr');
  if (supportsVR) {
    document.querySelector('.a-enter-vr-button').style.display = 'block';
  }
});

或者绑定到A-Frame场景的加载事件上，确保场景初始化完成后再操作：

document.querySelector('a-scene').addEventListener('loaded', async () => {
  const vrButton = document.querySelector('.a-enter-vr-button');
  if (!navigator.xr) {
    vrButton.style.display = 'none';
    return;
  }
  
  vrButton.style.display = await navigator.xr.isSessionSupported('immersive-vr') ? 'block' : 'none';
});

原理很简单：navigator.xr.isSessionSupported('immersive-vr')会异步检测当前设备是否能启动沉浸式VR会话——只有当用户连接了WebXR兼容的头显，且浏览器支持WebXR时，才会返回true，这时再显示VR图标即可。

内容的提问来源于stack exchange，提问作者Kieran F.