three.js集成VR提示不支持 本地WebXR运行异常排查

你遇到的VR不支持提示，核心诱因和WebXR的安全上下文限制直接相关，但需要分场景判断：
WebXR Device API 确实要求运行在安全上下文中，localhost/127.0.0.1这类本地回环地址属于浏览器默认认可的安全上下文，即使用HTTP协议访问也不会触发权限拦截；如果你实际访问时用的是本机局域网IP、自定义本地域名这类非回环地址，HTTP协议下会被直接判定为非安全环境，触发VR不支持的提示。

基础场景：仅在本机浏览器调试 #

• 直接使用http://localhost:8080或http://127.0.0.1:8080访问开发服务即可，不需要额外配置HTTPS。如果地址栏左侧出现「不安全」提示，检查是否误将localhost配置到了浏览器的非安全站点列表，或者使用了不支持WebXR的浏览器（建议用官方版Chrome/Edge调试）。
• 没有连接实体VR头显时，VRButton默认会显示不支持提示属于正常现象，可以安装WebXR API Emulator浏览器插件模拟VR运行环境，完成前端交互逻辑调试。

联调场景：需要用VR头显/其他设备访问本地服务 #

如果需要让同一局域网下的VR头显访问本地开发服务，直接给webpack-dev-server开启HTTPS支持即可：

1. 修改webpack配置文件中的devServer配置项：

// webpack.config.js
module.exports = {
  // 其余业务配置省略
  devServer: {
    // webpack-dev-server v4及以上版本用以下配置
    server: 'https',
    // v3及旧版本配置为 https: true
    host: '0.0.0.0',
    port: 8080
  }
}

2. 重启开发服务后，通过https://<本机局域网IP>:8080访问服务，首次打开时浏览器会提示自签名证书不受信任，点击「高级」-「继续访问」即可，本地开发阶段自签名证书会被判定为有效安全上下文，可正常调用WebXR相关API。

如果按上述配置后仍然提示VR不支持，检查以下遗漏项：

• 确认renderer1.xr.enabled = true的执行时机：该配置需要在WebGLRenderer初始化完成后立即执行，不要放在接口请求、延时器等异步回调中设置。
• 确认VR运行时安装正常：如果连接实体VR头显调试，需要提前安装对应头显的PC端运行环境（比如SteamVR、Oculus客户端），确保头显和PC连接正常。
• 检查页面是否被嵌入iframe：如果页面被嵌套在iframe中运行，需要给iframe添加allow="xr-spatial-tracking"权限属性，否则iframe内的页面无法获取WebXR权限。

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