A-Frame Examples — WebVR & WebXR Demos in Your Browser

Get started

The fastest path into WebVR: a first scene, a 360° panorama, a 360° video, a glTF 3D model, and your first AR scene.

Start here

Hello World

A box, a sphere and a cylinder — the complete A-Frame starter scene in 15 lines of HTML.

360° photo

360° Image Panorama

Wrap a photo around the viewer with a single <a-sky> element. The classic A-Frame panorama example.

360° video

360° Video

Play immersive video on a sphere you stand inside, with play controls that work in VR.

3D model

3D Model (glTF)

Load and display a glTF model — the standard format for WebXR scenes and products.

AR Hello World

Place virtual objects in the real world through your phone or headset camera.

Gallery

360° Image Gallery

A clickable gallery that moves you between panoramic photos with gaze-based controls.

Showcase

Fuller scenes that show what A-Frame can do: interfaces, hand tracking, painting, shopping and modern rendering.

Model Viewer

Orbit, zoom and inspect 3D models in the browser and in AR — like a product viewer for WebXR.

Hand Tracking

Pinch, press and slide virtual controls with your bare hands on Quest headsets.

Anime UI

A sci-fi anime-styled interface floating around a 3D engine model.

Painter

Paint in 3D space with strokes, built for the Logitech MX Ink stylus.

Shopping

A virtual shop scene: browse products and prices inside a 3D storefront.

Spatial UI

Windows, buttons and panels designed for mixed-reality interfaces.

Dynamic Lights

Moving lights and shadows over animated geometry.

Link Traversal

Walk between connected VR scenes by walking through portals.

WebGPU Renderer

A-Frame on the WebGPU renderer with TSL materials.

Post-Processing

Bloom and other screen-space effects applied to a WebXR scene.

Mixed reality

Examples for passthrough headsets: anchoring virtual objects, meshing the real room, and wearable UI.

Anchor

Pin paintings to a real wall so they stay put as you move.

Real World Meshing

Your room's mesh, reconstructed live, with virtual objects resting on real surfaces.

Virtual Watch

A wrist-worn mixed-reality watch with a working menu on your hand.

Primitives

A-Frame's building blocks — the HTML elements every scene is made of.

Boxes

The <a-box> primitive with position, rotation and scale.

Cylinders

Cylinders and the attributes that shape them.

Models

glTF and OBJ models as scene primitives.

Planes

Planes for floors, screens and backdrops.

Defaults

Every primitive with its default values, side by side.

Your first VR scene in three steps

A-Frame scenes are HTML documents. If you can write a web page, you can build a VR scene.

Add the script

Include A-Frame with one script tag. It is built on three.js and adds an entity-component system designed for HTML.

Write the scene

Describe your world with elements like <a-box> and <a-sphere> inside an <a-scene>. Attributes control position, color, light and animation.

Open & enter VR

Open the page in any modern browser. On a WebXR headset or phone, tap the VR/AR button to step inside your scene.

<script src="https://aframe-20i.pages.dev/dist/aframe-master.min.js"></script>

<a-scene background="color: #ECECEC">
  <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-scene>

That is the complete Hello World example — run it live, then view its source and start changing colors, positions and shapes. The full example index lists every demo on this site, including animation, performance and test scenes.