AR.js开发环境搭建：从配置到第一个AR应用

2026-02-05 05:48:17作者：盛欣凯Ernestine

你是否曾想过在网页中轻松实现增强现实（Augmented Reality，AR）效果？无需复杂的原生开发，只需几行代码就能让3D模型在摄像头前栩栩如生。本文将带你从零开始搭建AR.js开发环境，完成你的第一个AR应用，全程仅需10分钟，即使是零基础也能快速上手。

准备工作：了解AR.js

AR.js是一个轻量级的Web增强现实库，能够在移动设备上实现60fps的流畅体验。它基于Three.js和A-Frame框架，支持标记跟踪、位置跟踪等多种AR功能。目前项目已迁移至新仓库AR-js-org/AR.js，但旧版本的CDN和链接仍然可用。

官方文档和示例代码是学习AR.js的最佳资源：

项目主页：README.md
A-Frame示例：aframe/examples/
Three.js示例：three.js/examples/

环境搭建：两种入门方式

AR.js提供了两种主要的开发方式，你可以根据自己的技术背景选择适合的方案。

方式一：基于A-Frame的零代码入门

A-Frame是一个基于WebGL的声明式3D框架，使用HTML标签即可创建AR场景，非常适合初学者。

创建一个新的HTML文件，复制以下代码：

<!-- 引入A-Frame和AR.js库 -->
<script src="https://cdn.jsdelivr.net/npm/aframe@1.4.2/dist/aframe.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/ar.js@3.4.3/aframe/build/aframe-ar.js"></script>

<!-- AR场景定义 -->
<a-scene arjs>
  <!-- 创建一个平面作为地面 -->
  <a-plane position="0 0 0" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
  
  <!-- 创建一个立方体 -->
  <a-box position="0 0.5 0" rotation="0 45 0" color="#4CC3D9" animation="property: rotation; to: 0 405 0; dur: 5000; loop: true"></a-box>
  
  <!-- 创建一个球体 -->
  <a-sphere position="-1 0.5 1" radius="0.3" color="#EF2D5E"></a-sphere>
  
  <!-- 创建一个圆柱体 -->
  <a-cylinder position="1 0.3 1" radius="0.2" height="0.6" color="#FFC65D"></a-cylinder>
  
  <!-- 设置相机 -->
  <a-camera-static></a-camera-static>
</a-scene>

将文件保存为ar-basic.html，用浏览器打开即可看到AR效果。

这种方式的核心代码来自A-Frame基础示例，通过<a-scene arjs>标签启用AR功能，所有3D物体都会自动跟踪默认的HIRO标记。

方式二：基于Three.js的自定义开发

如果你熟悉JavaScript和Three.js，可以使用更灵活的Three.js接口来自定义AR场景。

创建HTML文件，复制以下代码：

<!DOCTYPE html>
<meta name="viewport" content="width=device-width, user-scalable=no">
<script src="https://cdn.jsdelivr.net/npm/three@0.132.2/build/three.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/ar.js@3.4.3/three.js/build/ar.js"></script>

<body style="margin: 0;">
  <script>
    // 初始化场景、相机和渲染器
    const scene = new THREE.Scene();
    const camera = new THREE.Camera();
    const renderer = new THREE.WebGLRenderer({ alpha: true });
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    // 初始化AR工具包
    const arToolkitSource = new THREEx.ArToolkitSource({ sourceType: 'webcam' });
    const arToolkitContext = new THREEx.ArToolkitContext({
      cameraParametersUrl: 'data/data/camera_para.dat',
      detectionMode: 'mono'
    });

    // 初始化AR控制器
    arToolkitContext.init(() => {
      camera.projectionMatrix.copy(arToolkitContext.getProjectionMatrix());
    });

    // 创建标记控制器
    const markerControls = new THREEx.ArMarkerControls(arToolkitContext, camera, {
      type: 'pattern',
      patternUrl: 'data/data/patt.hiro',
      changeMatrixMode: 'cameraTransformMatrix'
    });

    // 添加3D物体
    const geometry = new THREE.CubeGeometry(1, 1, 1);
    const material = new THREE.MeshNormalMaterial({ transparent: true, opacity: 0.5 });
    const cube = new THREE.Mesh(geometry, material);
    cube.position.y = 0.5;
    scene.add(cube);

    // 渲染循环
    function animate() {
      requestAnimationFrame(animate);
      if (arToolkitSource.ready) {
        arToolkitContext.update(arToolkitSource.domElement);
        scene.visible = camera.visible;
      }
      cube.rotation.x += 0.01;
      cube.rotation.y += 0.01;
      renderer.render(scene, camera);
    }

    // 初始化并开始渲染
    arToolkitSource.init(() => {
      arToolkitSource.onResizeElement();
      arToolkitSource.copyElementSizeTo(renderer.domElement);
    });

    window.addEventListener('resize', () => {
      arToolkitSource.onResizeElement();
      arToolkitSource.copyElementSizeTo(renderer.domElement);
    });

    animate();
  </script>
</body>