Frontend Development 14 min read

Getting Started with WebXR and AR using A‑Frame and Mind‑AR

This guide introduces WebXR’s 3DoF/6DoF concepts, walks through building a basic A‑Frame scene, then shows how to add Mind‑AR face‑tracking with WebAssembly, WebGL2/WebGPU and event listeners, and even wraps it in a React component, outlining the three core steps for creating performant web‑based AR experiences.

DaTaobao Tech

Sep 9, 2022

Getting Started with WebXR and AR using A‑Frame and Mind‑AR

The rise of the metaverse has brought VR and AR back into focus. WebXR Device API, as the successor of WebVR, offers a promising feature set for immersive web experiences.

Web standards are the only truly cross‑platform solution for the increasingly fragmented mobile ecosystem, making them essential for developers.

3DoF vs 6DoF – 3DoF (Three Degrees of Freedom) allows rotation only, while 6DoF (Six Degrees of Freedom) adds translation, enabling full spatial interaction.

Starting with a simple A‑Frame scene, you can create a 3D box and a sky background:

<!DOCTYPE html>
<html>
  <head>
    <script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
  </head>
  <body>
    <a-scene>
      <a-box position="0 0 -5" rotation="0 0 0" color="#d4380d"></a-box>
      <a-sky color="#1890ff"></a-sky>
    </a-scene>
  </body>
</html>

Rotating the box by 30° on the Y‑axis demonstrates 3DoF manipulation:

<!DOCTYPE html>
<html>
  <head>
    <script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
  </head>
  <body>
    <a-scene>
      <a-box position="0 0 -5" rotation="0 -30 0" color="#eb2f96"></a-box>
      <a-sky color="#1890ff"></a-sky>
    </a-scene>
  </body>
</html>

Adding a sphere and loading external assets creates a richer scene:

<!DOCTYPE html>
<html>
  <head>
    <script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
  </head>
  <body>
    <a-scene>
      <a-box position="0 0 -5" rotation="0 30 0" color="#eb2f96"></a-box>
      <a-sphere position="0 1.4 -5" radius="1" color="#389e0d"></a-sphere>
      <a-sky color="#1890ff"></a-sky>
      <a-assets>
        <a-asset-item id="glass" src="./model.glb"></a-asset-item>
      </a-assets>
      <a-entity position="0 1.5 -4" scale="5 5 5" gltf-model="#glass"></a-entity>
    </a-scene>
  </body>
</html>

To move from VR to AR, Mind‑AR can be added to an A‑Frame scene. The following HTML loads Mind‑AR face tracking and places a 3D glasses model on a detected face:

<!DOCTYPE html>
<html>
  <head>
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <script src="https://cdn.jsdelivr.net/gh/hiukim/[email protected]/dist/mindar-face.prod.js"></script>
    <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/hiukim/[email protected]/dist/mindar-face-aframe.prod.js"></script>
    <style>body{margin:0;} .example-container{position:absolute;width:100%;height:100%;overflow:hidden;}</style>
  </head>
  <body>
    <div class="example-container">
      <a-scene mindar-face embedded color-space="sRGB" renderer="colorManagement:true,physicallyCorrectLights" vr-mode-ui="enabled:false" device-orientation-permission-ui="enabled:false">
        <a-assets>
          <a-asset-item id="headModel" src="https://cdn.jsdelivr.net/gh/hiukim/[email protected]/examples/face-tracking/assets/sparkar/headOccluder.glb"></a-asset-item>
          <a-asset-item id="glassModel" src="./model.glb"></a-asset-item>
        </a-assets>
        <a-camera active="false" position="0 0 0"></a-camera>
        <a-entity mindar-face-target="anchorIndex:168">
          <a-gltf-model mindar-face-occluder position="0 -0.3 0.15" rotation="0 0 0" scale="0.06 0.06 0.06" src="#headModel"></a-gltf-model>
        </a-entity>
        <a-entity mindar-face-target="anchorIndex:10">
          <a-gltf-model rotation="0 0 0" position="0 -0.5 -0.6" scale="5.8 5.8 5.8" src="#glassModel" visible="true"></a-gltf-model>
        </a-entity>
      </a-scene>
    </div>
  </body>
</html>

Mind‑AR relies on WebAssembly (wasm), SIMD, and WebGL2/WebGPU for high‑performance computer‑vision pipelines. Event listeners such as arReady , arError , targetFound , and targetLost allow developers to react to the AR lifecycle.

For React users, Mind‑AR can be wrapped in a component:

import React, { useState } from 'react';
import 'mind-ar/dist/mindar-image.prod.js';
import 'aframe';
import 'mind-ar/dist/mindar-image-aframe.prod.js';
import './App.css';
import MindARViewer from './mindar-viewer';

function App() {
  const [started, setStarted] = useState(false);
  return (
Example React component with
MindAR
{!started &&
setStarted(true)}>Start
}
           {started &&
setStarted(false)}>Stop
}
{started && (
)}
);
}

export default App;

In summary, building Web AR involves three core steps: image/object recognition (often using TensorFlow.js models), 3D modeling of the overlay, and compositing the model with frameworks such as Three.js, Babylon.js, or A‑Frame. Optimizing these pipelines for mobile devices requires careful handling of WebGL/WebGPU, wasm, and SIMD, and future work may integrate digital‑twin concepts for data‑driven, intelligent interactions.

JavaScript AR A-Frame VR WebXR

Written by

DaTaobao Tech

Official account of DaTaobao Technology

0 followers

Reader feedback

How this landed with the community

Rate this article

Was this worth your time?

Discussion

0 Comments

Thoughtful readers leave field notes, pushback, and hard-won operational detail here.