当前位置：首页 > JavaScript

js实现ar

2026-03-14 09:26:48JavaScript

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

使用 WebXR API

WebXR 是浏览器提供的标准 API，支持 AR 和 VR 体验。通过 navigator.xr.requestSession('immersive-ar') 可以启动 AR 会话。需要设备支持（如 Chrome 的 ARCore 或 Safari 的 ARKit）。

async function startAR() {
  if (navigator.xr) {
    const session = await navigator.xr.requestSession('immersive-ar');
    session.addEventListener('end', () => {
      // 处理会话结束
    });
  } else {
    console.log('WebXR 不支持');
  }
}

使用 AR.js 框架

AR.js 是一个轻量级的 JavaScript AR 库，基于 Three.js 和 A-Frame，支持标记识别（如 QR 码）和基于位置的 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>

使用 Three.js 结合 AR 库

Three.js 是流行的 3D 渲染库，可结合 AR 工具（如 MindAR）实现无标记 AR。

import * as THREE from 'three';
import { MindARThree } from 'mind-ar/dist/mindar-image-three.prod.js';

const mindarThree = new MindARThree({
  container: document.body,
  imageTargetSrc: './targets.mind',
});
const { renderer, scene, camera } = mindarThree;
const anchor = mindarThree.addAnchor(0);
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
anchor.group.add(cube);
await mindarThree.start();
renderer.setAnimationLoop(() => {
  renderer.render(scene, camera);
});

使用 TensorFlow.js 实现自定义 AR

通过 TensorFlow.js 的物体检测模型（如 COCO-SSD），结合摄像头输入实现动态 AR 叠加。

js实现ar

import * as tfjs from '@tensorflow/tfjs';
import * as cocoSsd from '@tensorflow-models/coco-ssd';

const video = document.getElementById('webcam');
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

navigator.mediaDevices.getUserMedia({ video: true }).then((stream) => {
  video.srcObject = stream;
  video.onloadedmetadata = () => {
    detectObjects();
  };
});

async function detectObjects() {
  const model = await cocoSsd.load();
  setInterval(() => {
    model.detect(video).then((predictions) => {
      ctx.clearRect(0, 0, canvas.width, canvas.height);
      predictions.forEach((pred) => {
        // 在检测到的物体上绘制 AR 内容
        ctx.strokeRect(pred.bbox[0], pred.bbox[1], pred.bbox[2], pred.bbox[3]);
      });
    });
  }, 100);
}