AR - AR.js - basic

最新推荐文章于 2026-04-29 08:26:02 发布

原创最新推荐文章于 2026-04-29 08:26:02 发布 · 1.5k 阅读

1 ·

本内容遵循CC 4.0 BY-SA版权协议

AR 专栏收录该内容

2 篇文章

订阅专栏

AR.js是一个轻量级库，用于在Web上实现增强现实，基于three.js和jsartoolkit5。它支持基于标记的AR，并且能够处理多种标记类型。本文介绍了如何使用AR.js，包括初始化渲染器、场景、相机，处理arToolkitSource和arToolkitContext，以及创建ArMarkerControls来控制标记。最后，展示了如何在场景中添加3D对象并渲染到页面上。

简介

AR.js是一个用于Web增强现实的轻量级库，具有基于标记和基于位置的AR等功能。
基于Web的：这是一个纯Web解决方案，因此无需安装。基于three.js + jsartoolkit5的完整javascript。
AR.js使用artoolkit，因此它是基于标记的。 artoolkit是具有多年从事增强现实经验的软件。它可以做很多事情！
它支持多种标记：多种类型的标记图案 / 条形码同时具有多个独立的标记，或者多个标记充当单个标记供您选择。
three.js是一个出色的库，可以在Web上进行3D，three.js的作用是实现三维显示。
jsartoolkit 是实现摄像头的调用以及摄像头所获取影像的分析
artoolkit three.js与jsartoolkit本来毫无关系，而artoolkit将他们联系到一起
emscripten和asm.js可以将artoolkit c编译成javascript
chromium! thanks for being so fast!

示例：

https://jeromeetienne.github.io/AR.js/three.js/examples/basic.html

示例文件结构：

在这里插入图片描述

加载步骤：

初始化渲染器（画布）： var renderer = new THREE.WebGLRenderer({});
① 设置画布大小、颜色、位置等参数
② 嵌入画布到页面中：document.body.appendChild(renderer.domElement);
初始化场景和相机：
① 初始化场景：var scene = new THREE.Scene();
② 初始化相机：var camera = new THREE.Camera();
③ 在场景中添加相机：scene.add(camera);
处理arToolkitSource：
① var arToolkitSource = new THREEx.ArToolkitSource({sourceType: ‘webcam’}); 从网络摄像机读取
② arToolkitSource.init(function onReady() {onResize()}) 和 window.addEventListener(‘resize’, function () {onResize()})：监听页面并调整大小
初始化arToolkitContext：
① var arToolkitContext = new THREEx.ArToolkitContext({cameraParametersUrl: 加载相机参数})
② 将投影矩阵复制到相机
③ 在每一帧上更新artoolkit，更新scene.visible（如果看到标记），scene.visible = camera.visible;
创建ArMarkerControls，创建标记控制
① 初始化相机控制：当我们控制相机时，设置矩阵模式:‘摄像机变换矩阵’(changeMatrixMode: ‘cameraTransformMatrix’)
② 正如我们所做的更改matrixmode:‘cameraTransformMatrix’，从不可见的场景开始：scene.visible = false
在场景中添加对象 (通过three.js可以加载多种类型的模型，如fbx等)
渲染模型到页面上
① renderer.render(scene, camera);
② requestAnimationFrame(animate);