最新版Chrome浏览器在Three.js中无法支持WebXR问题求助

针对你遇到的问题，从几个核心方向排查：

1. 必须使用支持AR的移动设备 #

WebXR AR功能依赖硬件层面的AR支持：

• 安卓设备需要支持ARCore（大部分新款安卓手机都支持，可在Google Play确认是否安装ARCore服务）
• iOS设备需要支持ARKit（iPhone 6s及以上机型）
• 桌面Chrome不支持AR模式，只能测试VR或用移动设备访问

2. 确保页面通过HTTPS加载 #

WebXR API强制要求生产环境必须使用HTTPS（localhost本地开发除外）：

• 如果是部署到服务器，切换到HTTPS协议
• 本地开发可以用localhost或127.0.0.1访问，不要用本地IP（比如192.168.x.x）

3. 调整Three.js代码配置 #

• 移除相机手动位置设置：AR模式下XR会自动管理相机姿态，手动设置camera.position.z = 5可能导致冲突，删掉这行代码
• 显式配置AR会话参数：给ARButton添加必要的XR特性配置，示例：

  const btn = ARButton.createButton(renderer, {
    requiredFeatures: ['immersive-ar'],
    optionalFeatures: ['dom-overlay'],
    domOverlay: { root: document.body }
  });
  

• 添加兼容性检测日志：在init函数里加入手动检测代码，确认浏览器是否支持AR会话：

  navigator.xr.isSessionSupported('immersive-ar').then(supported => {
    console.log('AR会话支持状态:', supported);
  });
  

  如果返回false，说明设备/浏览器确实不支持；返回true但按钮仍提示不支持，再排查其他问题

4. 检查浏览器XR相关设置 #

• 安卓Chrome：访问chrome://flags，确保WebXR AR Module和WebXR Device API处于启用状态
• iOS：使用Safari或最新版Chrome，确保系统版本支持ARKit（iOS 11及以上）

内容的提问来源于stack exchange，提问作者鲁亦霖