当前位置：首页 > JavaScript

js 实现ar

2026-01-31 17:32:36JavaScript

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

在 JavaScript 中实现 AR（增强现实）通常依赖于特定的库或框架。以下是几种主流方法：

使用 Three.js 和 AR.js

Three.js 是一个流行的 3D 图形库，而 AR.js 是一个轻量级的 AR 库，支持基于标记和无标记的 AR。

import * as THREE from 'three';
import { ARjs } from '@ar-js-org/ar.js';

// 初始化场景、相机和渲染器
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 配置 AR.js
const arToolkitSource = new ARjs.Source({
  sourceType: 'webcam',
});

const arToolkitContext = new ARjs.Context({
  cameraParametersUrl: 'data/camera_para.dat',
  detectionMode: 'mono',
});

arToolkitSource.init(() => {
  arToolkitContext.init(arToolkitSource.domElement);
});

// 添加 AR 标记
const markerRoot = new ARjs.MarkerControls(arToolkitContext, camera, {
  type: 'pattern',
  patternUrl: 'data/pattern-marker.patt',
});

// 添加 3D 对象
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
markerRoot.add(cube);

// 渲染循环
function animate() {
  requestAnimationFrame(animate);
  renderer.render(scene, camera);
}
animate();

使用 WebXR API

WebXR 是浏览器原生支持的 AR/VR API，适合现代浏览器。

navigator.xr.requestSession('immersive-ar').then((session) => {
  const canvas = document.createElement('canvas');
  document.body.appendChild(canvas);
  const gl = canvas.getContext('webgl', { xrCompatible: true });

  session.updateRenderState({
    baseLayer: new XRWebGLLayer(session, gl),
  });

  const referenceSpace = await session.requestReferenceSpace('local');
  const pose = frame.getViewerPose(referenceSpace);

  function renderLoop(timestamp, frame) {
    session.requestAnimationFrame(renderLoop);
    // 渲染 AR 内容
  }
  session.requestAnimationFrame(renderLoop);
});

使用 A-Frame

A-Frame 是一个基于 WebGL 的 VR/AR 框架，语法简单。

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>