JavaScript的增强现实（AR）是基于Web技术在浏览器中实时叠加虚拟3D内容到真实视频流的Web AR；AR.js是轻量开源框架，依托A-Frame与Three.js，支持Marker、定位及NFT跟踪，兼容主流移动浏览器。
JavaScript 的增强现实（AR）是指利用 Web 技术（主要是 JavaScript、HTML 和 WebGL）在浏览器中实时叠加虚拟 3D 内容到真实世界视频流上，无需下载原生 App。核心是通过手机摄像头捕获画面，结合传感器（陀螺仪、加速度计）或图像识别（如 marker 或平面检测），把 3D 模型、文字、动画等“锚定”在现实空间中 —— 这就是 Web AR。
AR.js 是什么：轻量、开源、纯 Web 的 AR 框架
AR.js 是一个基于 A-Frame 和 Three.js 的开源 JavaScript 库，专为 Web 端 AR 设计。它不依赖原生 SDK，所有逻辑运行在浏览器中，支持 Android（Chrome、Firefox、Edge）和 iOS（Safari 16.4+，需开启实验性 WebXR 功能）。特点是启动快、部署简单（静态页面即可）、兼容性强，适合快速原型、营销活动、教育演示等场景。
- 底层基于 WebXR API（取代旧版 ARKit/ARCore 原生桥接），但做了大量封装，降低使用门槛
- 支持多种跟踪方式：Marker（黑白二维码式标记图）、Location-based（基于 GPS/地理围栏）、NFT（自然特征跟踪，需额外训练）
- 默认与 A-Frame 深度集成，用 HTML 标签写 3D/AR 场景，例如 <a-box>、<a-gltf-model>
用 AR.js 开发一个基础 Marker AR 应用（5 分钟上手）
以最常用的 marker 跟踪为例，这是入门最快的方式：打印一张标准 Hiro marker（AR.js 官方提供），对准它就能显示 3D 模型。
-
准备环境：确保本地有 HTTP 服务（不能直接双击打开 HTML）。可用 Python：
python3 -m http.server 8000，然后访问http://localhost:8000 -
引入资源：在 HTML 中加载 A-Frame、AR.js 和其插件（如
arjs-location或arjs-threex不需要单独引，AR.js 已整合） -
写基础结构：用
<a-scene>启用 AR 模式，添加arjs="sourceType: webcam; debugUIEnabled: false;"；用<a-marker>定义识别区域（默认识别 Hiro marker）；内部放<a-box>或<a-gltf-model> - 测试：用手机浏览器（推荐 Chrome for Android 或 Safari iOS 16.4+）访问本地地址，对准打印好的 Hiro 图片，模型就会“贴”在 marker 上并随手机移动实时更新位姿
关键配置与常见问题处理
AR.js 默认行为适合快速验证，但实际项目常需调整参数或解决兼容性问题。
立即学习“Java免费学习笔记（深入）”；
-
更换 marker：修改
<a-marker preset="hiro">为自定义图片，需配合type="image"和url属性，并预加载图片（<a-assets>中声明） - iOS 兼容性：Safari 需手动启用实验性功能：设置 → Safari → 高级 → 实验性功能 → 打开 “WebXR” 和 “WebXR Augmented Reality Module”
-
性能优化：禁用 debug UI（
debugUIEnabled: false），减少模型面数，用 glTF 压缩格式（.glb），避免每帧 JS 计算过多逻辑 -
无 marker 方案：改用 location-based（
arjs="sourceType: webcam; trackingMethod: best; debugUIEnabled: false;"+<a-marker gps-entity-place="latitude: 35.6895; longitude: 139.6917;">），但精度受 GPS 限制，适合大尺度场景（如地标导览）
进阶方向：从展示走向交互
AR.js 支持事件监听和动态控制，可实现点击、旋转、缩放、动画触发等交互。
- 监听 marker 可见性：
document.querySelector('a-marker').addEventListener('markerFound', () => {...}) - 让模型响应点击：
<a-box raycaster="objects: [interactable]"; event-set__click="on: click; material.color: red" - 接入传感器数据：用
AFRAME.utils.device.isMobile判断设备，或监听window.addEventListener('deviceorientation', ...)做体感控制 - 结合后端：通过 fetch 加载远程模型、用户数据或位置信息，实现个性化 AR 内容
