当前位置：首页 > JavaScript

js 实现 ar

2026-02-01 17:52:47JavaScript

JavaScript 实现 AR（增强现实）的方法

在 JavaScript 中实现增强现实（AR）通常依赖于特定的库或框架，这些工具提供了必要的功能来识别标记、跟踪摄像头输入以及在现实世界中叠加虚拟内容。以下是几种常见的实现方式：

使用 AR.js

AR.js 是一个轻量级的 JavaScript 库，基于 WebXR 和 Three.js，能够在浏览器中实现 AR 功能，无需安装额外应用。

安装与引入

<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
<script src="https://raw.githack.com/AR-js-org/AR.js/master/aframe/build/aframe-ar.js"></script>

基本示例

<a-scene embedded arjs>
  <a-marker preset="hiro">
    <a-box position="0 0.5 0" material="color: red"></a-box>
  </a-marker>
  <a-entity camera></a-entity>
</a-scene>

此代码会在识别到 Hiro 标记时显示一个红色立方体。

使用 Three.js 与 WebXR

Three.js 是一个强大的 3D 图形库，结合 WebXR API 可以实现更复杂的 AR 效果。

初始化场景

import * as THREE from 'three';
import { ARButton } from 'three/examples/jsm/webxr/ARButton';

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(70, window.innerWidth / window.innerHeight, 0.01, 20);
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.xr.enabled = true;
document.body.appendChild(renderer.domElement);

// 添加 AR 按钮
document.body.appendChild(ARButton.createButton(renderer));

// 添加立方体
const geometry = new THREE.BoxGeometry(0.5, 0.5, 0.5);
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
cube.position.set(0, 0, -1);
scene.add(cube);

// 启动渲染循环
renderer.setAnimationLoop(() => {
  renderer.render(scene, camera);
});

使用 8th Wall

8th Wall 是一个商业级 AR 平台，支持基于 Web 的 SLAM（即时定位与地图构建）和图像识别。

示例代码

// 初始化 8th Wall
Xr8.init();
Xr8.addCameraPipelineModules([ Xr8.CameraPixelArray.pipelineModule() ]);

// 创建场景
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera();
const renderer = new THREE.WebGLRenderer();
document.body.appendChild(renderer.domElement);

// 启动 AR
Xr8.run({
  canvas: renderer.domElement,
  ownRunLoop: true,
  cameraConfig: { direction: Xr8.XrConfig.camera().BACK },
});

使用 A-Frame

A-Frame 是一个基于 WebGL 的框架，简化了 3D 和 AR 内容的创建。

AR 场景示例

<a-scene vr-mode-ui="enabled: false" arjs="sourceType: webcam; debugUIEnabled: false;">
  <a-box position="0 0.5 -2" rotation="0 45 0" color="#4CC3D9"></a-box>
  <a-marker-camera preset="hiro"></a-marker-camera>
</a-scene>