5分钟上手！AR.js+WebRTC打造跨设备AR多人互动体验

2026-02-05 04:56:50作者：董灵辛Dennis

你是否曾想过在手机浏览器里和朋友共享一个3D模型？是否希望通过摄像头让虚拟物体出现在现实空间并邀请他人一起互动？本文将带你用AR.js结合WebRTC技术，零成本实现实时多人AR互动，无需安装任何APP，手机扫码即可体验。

技术原理：AR.js与WebRTC如何协作

AR.js是一款轻量级Web增强现实（Augmented Reality, 增强现实）库，能在移动端浏览器实现60fps的流畅跟踪。其核心通过three.js/src/threex/artoolkitsource.js获取摄像头输入，结合aframe/src/system-arjs.js的标记识别系统，将虚拟内容叠加到现实场景中。

WebRTC（Web实时通信）则提供浏览器间点对点数据传输能力，通过three.js/examples/arcode.html中实现的WebRTC连接，可同步不同设备的AR场景状态。两者结合的架构如下：

graph TD
    A[摄像头输入] -->|AR.js| B[标记识别与3D渲染]
    B --> C{WebRTC数据通道}
    C -->|同步坐标/旋转| D[其他设备AR场景]
    D --> E[多人共享AR体验]

准备工作：环境搭建与资源获取

1. 获取项目代码

git clone https://gitcode.com/gh_mirrors/ar/AR.js
cd AR.js

2. 核心依赖文件说明

标记图片：data/images/hiro.png（AR.js默认识别图案）
AR基础库：three.js/src/threex/artoolkitcontext.js
WebRTC封装：three.js/examples/arcode.html（含WebRTC连接示例）

实战开发：3步实现多人AR互动

第1步：创建基础AR场景

新建multiplayer-ar.html，引入AR.js和WebRTC依赖（使用国内CDN）：

<!DOCTYPE html>
<html>
<head>
    <script src="https://cdn.bootcdn.net/ajax/libs/aframe/1.2.0/aframe.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/ar.js/3.3.4/aframe-ar.min.js"></script>
</head>
<body>
    <a-scene arjs>
        <!-- 摄像头背景 -->
        <a-entity camera></a-entity>
        <!-- 可交互的3D模型 -->
        <a-box id="sharedObject" position="0 0.5 0" rotation="0 45 0" color="#4CC3D9"></a-box>
    </a-scene>
</body>
</html>

第2步：添加WebRTC数据同步

修改<a-scene>标签，添加自定义组件实现状态同步：

<a-scene arjs>
    <a-entity camera></a-entity>
    <a-box id="sharedObject" position="0 0.5 0" rotation="0 45 0" color="#4CC3D9"></a-box>
    
    <script>
    // 初始化WebRTC连接
    const peer = new Peer();
    let conn;
    
    // 生成房间码
    document.querySelector('a-scene').addEventListener('loaded', () => {
        // 参考[three.js/examples/arcode.html](https://gitcode.com/gh_mirrors/ar/AR.js/blob/024318c67121bd57045186b83b42f10c6560a34a/three.js/examples/arcode.html?utm_source=gitcode_repo_files)的QR码生成逻辑
        generateRoomQRCode(peer.id);
    });
    
    // 同步物体位置旋转
    function syncObjectState(position, rotation) {
        const object = document.querySelector('#sharedObject');
        object.setAttribute('position', position);
        object.setAttribute('rotation', rotation);
    }
    </script>
</body>

第3步：实现多设备交互

添加触摸控制和状态同步逻辑：

// 触摸拖动控制（简化版）
document.querySelector('a-scene').addEventListener('touchmove', (e) => {
    const object = document.querySelector('#sharedObject');
    const currentPos = object.getAttribute('position');
    const newPos = {
        x: currentPos.x + e.touches[0].clientX * 0.01,
        y: currentPos.y,
        z: currentPos.z - e.touches[0].clientY * 0.01
    };
    object.setAttribute('position', newPos);
    
    // 发送更新到其他设备
    if (conn.open) {
        conn.send({
            type: 'update',
            position: newPos,
            rotation: object.getAttribute('rotation')
        });
    }
});

测试运行：从本地到公网访问

本地测试

启动HTTP服务器：

python -m http.server 8000

用手机浏览器访问http://<你的IP>:8000/multiplayer-ar.html，扫描页面生成的房间码QR码邀请好友加入。

性能优化建议

使用aframe/examples/mobile-performance.html中的优化配置
减少同步频率：每100ms发送一次位置更新而非实时传输
简化3D模型：优先使用aframe/demos/demo-aframe-logo/models/ply/中的低多边形模型

常见问题与解决方案

问题	解决方法	参考文件
标记识别不稳定	确保光照充足，使用高对比度标记	data/images/hiro.png
连接延迟高	部署到云服务器缩短路由距离	three.js/examples/arcode.html
模型加载缓慢	启用gzip压缩并优化纹理大小	aframe/src/component-anchor.js