开发Three.js WebGL VR体验：如何检测VR头显而非支持VR的手机？

核心思路 #

不要仅依赖"是否支持VR"的通用检测，而是通过WebXR API的细粒度设备信息、会话类型、输入源特征来区分专业VR头显和移动设备的VR模式。

具体实现方案 #

1. 优先检测沉浸式VR会话支持 + 设备名称过滤

移动设备的VR模式大多只支持inline或immersive-ar会话，而专业VR头显支持immersive-vr会话。结合设备名称关键词进一步过滤：

async function validateVRHeadset() {
  if (!navigator.xr) return false;

  // 仅允许支持沉浸式VR会话的设备
  const supportsImmersiveVR = await navigator.xr.isSessionSupported('immersive-vr');
  if (!supportsImmersiveVR) return false;

  try {
    const xrDevice = await navigator.xr.requestDevice();
    // 覆盖主流VR头显品牌关键词，可根据需求补充
    const validHmdBrands = ['oculus', 'vive', 'index', 'pico', 'htc', 'valve', 'windows mixed reality'];
    return validHmdBrands.some(brand => 
      xrDevice.displayName.toLowerCase().includes(brand)
    );
  } catch (err) {
    // 用户拒绝授权或无匹配设备
    return false;
  }
}

// 使用示例
validateVRHeadset().then(isValid => {
  if (!isValid) {
    document.body.innerHTML = '<h1>此体验仅支持专业VR头显设备</h1>';
    return;
  }
  // 初始化Three.js VR体验
  initVR();
});

2. 结合输入源特征二次验证

在启动VR会话后，检查输入源类型——专业VR头显通常带有手柄追踪或头部追踪输入源，而移动设备VR多依赖触摸/陀螺仪：

async function initVR() {
  const session = await navigator.xr.requestSession('immersive-vr');
  
  // 检查输入源是否符合VR头显特征
  const hasValidInput = session.inputSources.some(source => 
    source.hand || source.targetRayMode === 'tracked-pointer'
  );

  if (!hasValidInput) {
    await session.end();
    document.body.innerHTML = '<h1>请使用带追踪手柄的VR头显访问</h1>';
    return;
  }

  // 继续初始化Three.js场景
  // ...
}

3. 辅助检测外部显示设备

专业VR头显会被识别为独立的视频输出设备，可通过媒体设备枚举辅助验证：

async function hasExternalVRDisplay() {
  try {
    const devices = await navigator.mediaDevices.enumerateDevices();
    return devices.some(device => 
      device.kind === 'videooutput' && 
      device.label.toLowerCase().includes('vr')
    );
  } catch (err) {
    // 用户未授权媒体设备访问，跳过此检测
    return true;
  }
}

注意事项 #

• 不要过度过滤：允许手机连接VR头显的场景（如Oculus Link），避免误判。
• 设备名称可能存在本地化差异，需根据目标用户群体补充关键词。
• 给未通过验证的用户明确提示，引导其使用正确设备。

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