Web AR开发快速上手：10分钟创建你的第一个增强现实应用

2026-02-07 04:49:47作者：胡唯隽

你是否曾想过在浏览器中轻松实现增强现实效果？无需复杂的原生开发，只需几行代码就能让3D模型在摄像头前栩栩如生。本文将带你从零开始学习Web AR技术，在10分钟内完成你的第一个AR应用，即使是零基础也能快速入门。

概念解析：什么是Web AR？

Web AR（Web-based Augmented Reality）是一种基于网页的增强现实技术，它允许用户通过浏览器直接访问AR体验，无需下载额外的应用程序。与传统的AR应用相比，Web AR具有以下优势：

跨平台兼容：支持iOS、Android、Windows等主流系统
即开即用：通过URL分享，用户点击链接即可体验
开发简单：使用HTML、CSS、JavaScript即可开发
部署便捷：无需应用商店审核，直接部署到服务器即可

AR.js是当前最流行的Web AR框架之一，它能够在移动设备上实现60fps的流畅体验。这个轻量级库基于Three.js和A-Frame框架，支持标记跟踪、位置跟踪等多种AR功能。

实战演练：两种入门方式

根据你的技术背景，可以选择以下两种方式之一开始Web AR开发之旅。

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

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

步骤1：创建基础HTML文件

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

<!DOCTYPE html>
<html>
<head>
    <meta name="viewport" content="width=device-width, user-scalable=no">
    <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>
</head>
<body>
    <a-scene arjs>
        <a-marker preset="hiro">
            <a-box position="0 0.5 0" rotation="0 45 0" color="#4CC3D9"></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-marker>
        <a-camera-static></a-camera-static>
    </a-scene>
</body>
</html>

步骤2：理解核心代码

<a-scene arjs>：定义AR场景容器
<a-marker preset="hiro">：使用默认的HIRO标记
3D物体：立方体、球体、圆柱体
<a-camera-static>：静态相机设置

步骤3：运行应用

将文件保存为ar-demo.html，使用本地服务器打开文件。打印或显示HIRO标记在手机屏幕上，将摄像头对准标记即可看到3D物体。

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

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

步骤1：创建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>
        // 在这里添加JavaScript代码
    </script>
</body>

步骤2：添加Three.js核心逻辑

// 初始化场景
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'
});

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

// 添加3D物体
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshNormalMaterial();
const cube = new THREE.Mesh(geometry, material);
cube.position.y = 0.5;
scene.add(cube);

// 渲染循环
function animate() {
    requestAnimationFrame(animate);
    cube.rotation.x += 0.01;
    cube.rotation.y += 0.01;
    renderer.render(scene, camera);
}

animate();