标记跟踪是通过摄像头识别特定黑白图案（如Hiro标记）来定位虚拟内容的技术。AR.js利用该技术，在浏览器中实现轻量级Web AR，用户只需引入A-Frame与AR.js库，设置arjs场景并定义标记类型（如type="pattern"），即可在标记上叠加3D模型。自定义标记需使用AR.js生成器制作高对比度、非对称的.patt文件，并避免重复纹理以提升识别率。为优化性能，应使用现代移动浏览器、充足光照环境，并降低模型复杂度，同时关闭debugUI。尽管标记跟踪依赖固定图案，限制了自由度，但其低延迟、易部署特性，使其适用于教育、展览等场景，基础掌握后可扩展至多标记交互。
AR.js 是一个轻量级的 JavaScript 库，能够在网页中实现增强现实（AR）功能，尤其擅长基于标记的跟踪技术。它无需安装应用，直接在浏览器中运行，适合快速搭建 Web AR 项目。其中，标记跟踪是 AR.js 最基础也是最稳定的 AR 实现方式之一。
什么是标记跟踪？
标记跟踪指的是通过摄像头识别特定图案（即“标记”）来确定虚拟内容的位置和方向。AR.js 使用的是黑白方块标记，类似二维码，最常用的是 pattern-based markers 和 hiro marker。当摄像头检测到标记时，系统会在其上方叠加 3D 模型、动画或其他 HTML/CSS 元素。
这类标记具有高对比度和独特结构，便于算法快速识别和定位，即使在移动设备上也能实现实时跟踪。
如何使用 AR.js 实现标记跟踪？
要实现基本的标记跟踪，只需几个步骤即可在网页中运行 AR 内容：
立即学习“Java免费学习笔记（深入）”；
- 引入 AR.js 和 A-Frame（推荐搭配使用）
- 设置场景为 AR 模式，并启用标记检测
- 定义标记类型（如 hiro）
- 在标记上添加 3D 或 2D 虚拟内容
示例代码：
Plan Dubai Travel — Flights, Hotels, Burj Khalifa, Desert Safari, Malls & Itineraries
下载
规划您的迪拜之旅 — 哈利法塔观景、沙漠探险、迪拜购物中心购物、棕榈岛度假村及黄金市场砍价。还提供支持...
<script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/arjs3@4.3.0/aframe/build/aframe-ar-nft.js"></script>
<a-scene embedded arjs>
<a-marker type="pattern" url="path/to/pattern-hiro.patt">
<a-box position="0 0.5 0" material="color: red;"></a-box>
</a-marker>
<a-entity camera></a-entity>
</a-scene>
这段代码会在识别到 Hiro 标记时，在其表面渲染一个红色立方体。
自定义标记的制作与使用
除了内置的 Hiro 标记，你还可以创建自己的图案标记：
- 访问 AR.js Marker Generator 工具
- 上传或设计一个高对比度的黑白图像
- 生成对应的 .patt 文件并下载
- 在代码中通过 url 属性引用该文件
注意：标记应避免对称、重复纹理，确保四角清晰可辨，以提高识别准确率。
性能优化与兼容性建议
为了让 AR 体验更流畅，建议：
- 使用支持 WebGL 的现代手机浏览器（如 Safari on iOS 或 Chrome on Android）
- 保持环境光线充足，避免反光或模糊
- 控制 3D 模型复杂度，减少面数和纹理大小
- 开启
debugUIEnabled="false"关闭调试界面提升性能
基本上就这些。AR.js 的标记跟踪技术虽然不如 SLAM 那样自由，但胜在简单、稳定、低延迟，非常适合教育、展览、互动海报等场景。不复杂但容易忽略细节，比如标记方向和坐标系对齐。掌握好基础原理后，扩展到多标记或多模型也水到渠成。
