当前位置：首页 > JavaScript

js 实现ar

2026-03-02 08:41:23JavaScript

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

JavaScript 可以通过多种库和框架实现增强现实（AR）功能。以下是几种常见的方法：

使用 WebXR API

WebXR 是浏览器提供的 API，支持 AR 和 VR 体验。通过 navigator.xr.requestSession('immersive-ar') 可以启动 AR 会话。

js 实现ar

if (navigator.xr) {
  navigator.xr.requestSession('immersive-ar').then((session) => {
    // 设置 AR 场景
  });
}

使用 Three.js 和 AR.js

AR.js 是一个轻量级的 AR 库，结合 Three.js 可以实现基于标记的 AR 体验。

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

// 初始化场景
const scene = new THREE.Scene();
const camera = new THREE.Camera();
scene.add(camera);

// 添加 AR 标记
const markerRoot = new THREE.Group();
scene.add(markerRoot);

使用 A-Frame

A-Frame 是一个 WebVR 框架，支持 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-scene>

使用 8th Wall

8th Wall 是一个商业 AR 平台，提供跨平台的 AR 解决方案。

import { XRExtras } from 'https://cdn.jsdelivr.net/npm/@8thwall/xrextras/dist/xrextras.js';

XRExtras.Loader.showLoading({ splash: true });
XRExtras.Main.init().then(() => {
  // 初始化 AR 场景
});

使用 Model Viewer

Model Viewer 是 Google 提供的库，支持在网页中展示 3D 模型并支持 AR。

<script type="module" src="https://unpkg.com/@google/model-viewer/dist/model-viewer.min.js"></script>

<model-viewer 
  src="model.glb" 
  ar 
  ar-modes="webxr scene-viewer quick-look" 
  camera-controls>
</model-viewer>