Skip to main content
graphwiz.ai
← Back to Posts

A-Frame WebXR: Build VR Experiences in 15 Minutes

XRWebXR
aframewebxrvrthree.jsweb

A-Frame WebXR: Build VR Experiences in 15 Minutes

A-Frame abstracts Three.js into declarative HTML, making VR development accessible to web developers. Built by Mozilla, it's the fastest way to create WebXR content.

Why A-Frame?

Advantage Description
HTML syntax Write 3D scenes with HTML tags
Entity-Component Flexible composition system
VR-native Works in browser and headsets
Inspector Visual editor included
Community 1000+ components available

Quick Start

Basic HTML

<!DOCTYPE html>
<html>
<head>
  <script src="https://aframe.io/releases/1.4.0/aframe.min.js"></script>
</head>
<body>
  <a-scene>
    <a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
    <a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
    <a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
    <a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
    <a-sky color="#ECECEC"></a-sky>
  </a-scene>
</body>
</html>

That's it. Open in a browser, click VR mode, put on a headset.

Core Primitives

Basic Shapes

<a-box color="red"></a-box>
<a-sphere color="blue"></a-sphere>
<a-cylinder color="green"></a-cylinder>
<a-plane color="gray"></a-plane>
<a-cone color="yellow"></a-cone>

Media

<!-- 360 image -->
<a-sky src="panorama.jpg"></a-sky>

<!-- 360 video -->
<a-videosphere src="video.mp4"></a-videosphere>

<!-- 3D model -->
<a-entity gltf-model="model.glb"></a-entity>

Entity-Component System

A-Frame uses ECS architecture:

<a-entity
  position="0 1 -3"
  rotation="0 45 0"
  scale="1 1 1"
  material="color: red; metalness: 0.7"
  geometry="primitive: box; width: 2"
></a-entity>

Custom Components

Register Component

AFRAME.registerComponent('rotate-on-hover', {
  init: function() {
    this.el.addEventListener('mouseenter', () => {
      this.el.setAttribute('rotation', '0 90 0');
    });
    this.el.addEventListener('mouseleave', () => {
      this.el.setAttribute('rotation', '0 0 0');
    });
  }
});

Use Component

<a-box rotate-on-hover color="blue"></a-box>

Animation

Built-in Animation

<a-box
  position="0 1 -3"
  color="tomato"
  animation="property: rotation; to: 0 360 0; loop: true; dur: 2000">
</a-box>

Multiple Animations

<a-entity
  animation__rotate="property: rotation; to: 0 360 0; loop: true; dur: 2000"
  animation__scale="property: scale; to: 1.2 1.2 1.2; loop: true; dir: alternate; dur: 1000">
</a-entity>

Interaction

Cursor Component

<a-entity camera look-controls>
  <a-entity
    cursor="fuse: true; fuseTimeout: 500"
    position="0 0 -1"
    geometry="primitive: ring; radiusInner: 0.02; radiusOuter: 0.03"
    material="color: black; shader: flat">
  </a-entity>
</a-entity>

Click Events

<a-box
  class="interactive"
  event-set__mouseenter="scale: 1.2 1.2 1.2"
  event-set__click="color: blue">
</a-box>

Physics

Add physics with the physics component:

<script src="https://unpkg.com/aframe-physics-system@1.4.0/dist/aframe-physics-system.min.js"></script>

<a-scene physics>
  <a-box
    dynamic-body
    position="0 4 -3"
    color="red"></a-box>
  <a-plane
    static-body
    position="0 0 -3"
    rotation="-90 0 0"
    width="10"
    height="10"
    color="#7BC8A4"></a-plane>
</a-scene>

Inspector

Press Ctrl + Alt + I to open the visual inspector. Edit entities visually, export code.

Deployment

A-Frame apps are static files. Deploy anywhere:

# Netlify
netlify deploy --prod

# Vercel
vercel --prod

# GitHub Pages
git push origin gh-pages

Conclusion

A-Frame makes VR development as easy as writing HTML. Start with primitives, add components, then write custom JavaScript when needed. The barrier to entry has never been lower.