A-Frame结合AR.js实现手机摄像头加载GLTF模型

本文详解如何基于 A-Frame 1.5.0 与 AR.js 构建轻量级 WebAR 应用，解决 GLTF 模型自动加载阻塞页面、VR 模式黑屏、模型不可见等常见问题，并提供可直接运行的移动端适配代码。

在移动端通过浏览器调用摄像头展示 3D 模型（例如 GLTF 格式），是 WebAR 最常见的应用场景之一。然而，直接使用基础版 A-Frame 搭建，很快就会发现其局限性： 默认会启动 WebGL 渲染上下文，这意味着页面一加载，模型就开始预加载并初始化渲染——主线程被严重阻塞，滚动体验变得卡顿。更令人困扰的是，纯 VR 模式下没有真实世界的背景（即摄像头画面），因此天空盒直接呈现为黑屏。这并非 bug，而是设计如此：A-Frame 的 或默认背景仅适用于虚拟环境，与增强现实并不匹配。

要实现真正的「摄像头 + 3D 模型」叠加效果，必须引入 AR.js。它是一个专为 WebAR 优化的轻量级库，能够通过 location-based 或 marker-based 方式，将 A-Frame 场景锚定到现实空间，并自动接管 的渲染逻辑——摄像头流作为背景层，3D 内容以 WebGL 叠加其上。这样一来，模型与现实画面就能完美融合。

✅ 正确配置：AR.js + A-Frame 1.5.0（兼容版）

需要注意一点：AR.js 官方推荐搭配 A-Frame ≤1.4.x 使用，但实测表明，AR.js v3.4.0+ 已全面兼容 A-Frame 1.5.0。关键在于引入顺序与属性配置：

⚠️ 关键注意事项

• 禁止使用 预加载 GLTF： 会在 初始化阶段强制下载模型，相当于将阻塞时间提前。改为 gltf-model="url(...)" 属性实现延迟加载，可控性更高。
• 模型位置务必相对于 camera： 是 AR 场景的“观察者原点”，其子元素坐标系以摄像头为中心。设置为 position="0 0 -1"，模型便位于摄像头正前方 1 米处（Z 轴负方向为前）。切勿误设为 -2，否则模型会跑到用户身后，需要转身才能看到。
• 禁用所有 VR 控制组件：look-controls="enabled: false" 与 wasd-controls="enabled: false" 是必选项。若不关闭，它们会干扰手机陀螺仪与摄像头姿态的同步，导致画面出现异常晃动。
• 移除 ：在 AR 模式下，a-sky 会被摄像头画面覆盖，且可能引发 WebGL 渲染冲突。直接删除即可，无需额外处理。
• 移动端权限与 HTTPS：访问摄像头需要 HTTPS 环境（本地 localhost 除外）。真机测试前，务必确认浏览器已授权摄像头权限。