【亲测免费】 AR.js 安装与配置完全指南

2026-01-21 05:11:05作者：蔡丛锟

一、项目基础介绍及主要编程语言

AR.js 是一个轻量级的Web增强现实库，支持图像追踪、基于位置的AR以及标记追踪等功能。这个项目由@jeromeetienne创建，现由AR.js组织维护。它特别适用于通过HTML和JavaScript在网页上快速实现AR体验，无需复杂的原生应用开发。AR.js主要基于A-Frame和_three.js_，采用JavaScript作为核心编程语言。

二、关键技术和框架

A-Frame: 一个基于HTML的VR框架，使AR的内容创建变得简单直观。
three.js: 强大的WebGL 3D库，用于构建3D场景和效果。
Image Tracking: 利用图像识别技术，允许用户通过扫描特定图片触发AR内容。
Location-based AR: 基于地理位置的AR，让AR体验可以根据用户的实际位置变化。
Marker Tracking: 使用预定义的标记（如二维码或自定义图案），触发AR效果。

三、安装和配置步骤

准备工作

确保环境：你需要有Node.js环境来运行本地服务器，推荐最新稳定版。
文本编辑器：选择任何你喜欢的代码编辑器，如Visual Studio Code、Atom等。
基本知识：了解基础的HTML、CSS和JavaScript将有助于理解示例代码。

安装步骤

克隆项目到本地

打开命令行工具，使用Git克隆仓库到你的电脑上。
```
git clone https://github.com/AR-js-org/AR.js.git
```

设置服务器环境（可选）

虽然可以直接从GitHub页面链接加载AR.js，但为了本地开发，建议搭建本地服务器：

确保全局安装了http-server，没有的话通过npm安装：
```
npm install -g http-server
```
进入AR.js目录并启动服务器：
```
cd AR-js
http-server
```
访问 http://localhost:8080 来查看文档或测试示例。

创建简单的AR体验

以图像跟踪为例，创建一个新的HTML文件，比如index.html，然后复制以下代码：

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="https://cdn.jsdelivr.net/gh/aframevr/aframe@1.3.0/dist/aframe-master.min.js"></script>
    <script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar-nft.js"></script>
    <style>
        /* 样式调整 */
    </style>
</head>
<body>
    <a-scene vr-mode-ui="enabled: false" arjs="debugUIEnabled: false;">
        <a-nft type="nft" url="trex" smooth="true">
            <a-entity gltf-model="url(trex.scene.gltf)" scale="0.01 0.01 0.01"></a-entity>
        </a-nft>
        <a-entity camera></a-entity>
    </a-scene>
</body>
</html>

注意事项

图像资源需正确指向，如果使用本地资源，请保证路径正确。
对于在线示例，可能需要CORS代理解决跨域问题，详细处理方法在AR.js官方文档中说明。
本地开发时确保通过HTTP服务器访问，否则浏览器安全策略可能会阻止AR功能。

测试AR体验

将上述HTML文件放在与服务器相同目录下。
在手机上打开网站，并允许摄像头权限。
扫描AR.js提供的图片样本或自定义图像追踪标记，观看AR内容激活。

至此，你已经成功设置了AR.js的基本开发环境，并可以开始探索更高级的AR应用开发。记住，AR.js的官方文档是你的朋友，里面包含了更详细的特性和高级用法。快乐地创建AR世界吧！

AR.js

Image tracking, Location Based AR, Marker tracking. All on the Web.

项目地址：https://gitcode.com/gh_mirrors/arj/AR.js

登录后查看全文