Learn AFRAME with Real Code Examples

Updated Nov 26, 2025

Introduction & Fundamentals Setup & Configuration Architecture & Deep Internals Performance & Security Development Workflow Learning & Career Growth Business & Strategy Examples

Code Sample Descriptions

Simple A-Frame Scene

# aframe/demo/index.html
<html>
  <head>
    <script src="https://aframe.io/releases/1.4.0/aframe.min.js"></script>
  </head>
  <body>
    <a-scene>
        <a-box position="0 1.5 -3" rotation="0 45 0" color="#4CC3D9" animation="property: rotation; to: 0 405 0; loop: true; dur: 5000"></a-box>
        <a-sky color="#ECECEC"></a-sky>
    </a-scene>
  </body>
</html>

A basic A-Frame HTML program that creates a VR scene with a spinning box and a sky background.

Let’s Try →

A-Frame Spinning Sphere

# aframe/demo/sphere.html
<html>
  <head>
    <script src="https://aframe.io/releases/1.4.0/aframe.min.js"></script>
  </head>
  <body>
    <a-scene>
        <a-sphere position="0 1.25 -3" radius="1.25" color="#EF2D5E" animation="property: rotation; to: 0 360 0; loop: true; dur: 4000"></a-sphere>
        <a-sky color="#ECECEC"></a-sky>
    </a-scene>
  </body>
</html>

Creates a VR scene with a spinning sphere.

Let’s Try →

A-Frame Ground Plane

# aframe/demo/ground.html
<html>
  <head>
    <script src="https://aframe.io/releases/1.4.0/aframe.min.js"></script>
  </head>
  <body>
    <a-scene>
        <a-box position="0 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
        <a-plane position="0 0 -4" rotation="-90 0 0" width="10" height="10" color="#7BC8A4"></a-plane>
        <a-sky color="#ECECEC"></a-sky>
    </a-scene>
  </body>
</html>

Adds a ground plane to the VR scene.

Let’s Try →

A-Frame Multiple Boxes

# aframe/demo/multiple_boxes.html
<html>
  <head>
    <script src="https://aframe.io/releases/1.4.0/aframe.min.js"></script>
  </head>
  <body>
    <a-scene>
        <a-box position="-2 1 -3" color="#4CC3D9"></a-box>
        <a-box position="0 1 -3" color="#EF2D5E"></a-box>
        <a-box position="2 1 -3" color="#7BC8A4"></a-box>
        <a-sky color="#ECECEC"></a-sky>
    </a-scene>
  </body>
</html>

Adds multiple boxes in a VR scene in a row.

Let’s Try →

A-Frame Rotating Cylinder

# aframe/demo/cylinder.html
<html>
  <head>
    <script src="https://aframe.io/releases/1.4.0/aframe.min.js"></script>
  </head>
  <body>
    <a-scene>
        <a-cylinder position="0 1 -3" radius="0.5" height="2" color="#FFC65D" animation="property: rotation; to: 0 360 0; loop: true; dur: 4000"></a-cylinder>
        <a-sky color="#ECECEC"></a-sky>
    </a-scene>
  </body>
</html>

Adds a rotating cylinder to the VR scene.

Let’s Try →

A-Frame Animated Torus

# aframe/demo/torus.html
<html>
  <head>
    <script src="https://aframe.io/releases/1.4.0/aframe.min.js"></script>
  </head>
  <body>
    <a-scene>
        <a-torus position="0 1 -3" radius="1" tube="0.2" color="#FF5733" animation="property: rotation; to: 0 360 0; loop: true; dur: 5000"></a-torus>
        <a-sky color="#ECECEC"></a-sky>
    </a-scene>
  </body>
</html>

Adds a spinning torus to the VR scene.

Let’s Try →

A-Frame Text Label

# aframe/demo/text.html
<html>
  <head>
    <script src="https://aframe.io/releases/1.4.0/aframe.min.js"></script>
  </head>
  <body>
    <a-scene>
        <a-text value="Hello A-Frame" position="0 2 -3" color="#4CC3D9"></a-text>
        <a-sky color="#ECECEC"></a-sky>
    </a-scene>
  </body>
</html>

Displays 3D text in the VR scene.

Let’s Try →

A-Frame Skybox

# aframe/demo/skybox.html
<html>
  <head>
    <script src="https://aframe.io/releases/1.4.0/aframe.min.js"></script>
  </head>
  <body>
    <a-scene>
        <a-box position="0 1 -3" color="#4CC3D9"></a-box>
        <a-sky src="https://cdn.aframe.io/a-painter/images/sky.jpg"></a-sky>
    </a-scene>
  </body>
</html>

Adds a skybox background to the VR scene.

Let’s Try →

A-Frame Interactive Box

# aframe/demo/interactive_box.html
<html>
  <head>
    <script src="https://aframe.io/releases/1.4.0/aframe.min.js"></script>
  </head>
  <body>
    <a-scene>
        <a-box position="0 1 -3" color="#4CC3D9" class="clickable"></a-box>
        <a-sky color="#ECECEC"></a-sky>
    </a-scene>
    <script>
        document.querySelector('.clickable').addEventListener('click', function() {
        this.setAttribute('color', '#EF2D5E');
        });
    </script>
  </body>
</html>

A box that changes color when clicked.

Let’s Try →

A-Frame Multiple Animated Boxes

# aframe/demo/multi_animated_boxes.html
<html>
  <head>
    <script src="https://aframe.io/releases/1.4.0/aframe.min.js"></script>
  </head>
  <body>
    <a-scene>
        <a-box position="-2 1 -3" color="#4CC3D9" animation="property: rotation; to: 0 360 0; loop: true; dur: 4000"></a-box>
        <a-box position="0 1 -3" color="#EF2D5E" animation="property: rotation; to: 0 360 0; loop: true; dur: 5000"></a-box>
        <a-box position="2 1 -3" color="#7BC8A4" animation="property: rotation; to: 0 360 0; loop: true; dur: 6000"></a-box>
        <a-sky color="#ECECEC"></a-sky>
    </a-scene>
  </body>
</html>

Adds several spinning boxes in the VR scene.

Let’s Try →

Code Sample Descriptions

Simple A-Frame Scene

# aframe/demo/index.html
<html>
  <head>
    <script src="https://aframe.io/releases/1.4.0/aframe.min.js"></script>
  </head>
  <body>
    <a-scene>
        <a-box position="0 1.5 -3" rotation="0 45 0" color="#4CC3D9" animation="property: rotation; to: 0 405 0; loop: true; dur: 5000"></a-box>
        <a-sky color="#ECECEC"></a-sky>
    </a-scene>
  </body>
</html>

A basic A-Frame HTML program that creates a VR scene with a spinning box and a sky background.

Let’s Try →

A-Frame Spinning Sphere

# aframe/demo/sphere.html
<html>
  <head>
    <script src="https://aframe.io/releases/1.4.0/aframe.min.js"></script>
  </head>
  <body>
    <a-scene>
        <a-sphere position="0 1.25 -3" radius="1.25" color="#EF2D5E" animation="property: rotation; to: 0 360 0; loop: true; dur: 4000"></a-sphere>
        <a-sky color="#ECECEC"></a-sky>
    </a-scene>
  </body>
</html>

Creates a VR scene with a spinning sphere.

Let’s Try →

A-Frame Ground Plane

# aframe/demo/ground.html
<html>
  <head>
    <script src="https://aframe.io/releases/1.4.0/aframe.min.js"></script>
  </head>
  <body>
    <a-scene>
        <a-box position="0 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
        <a-plane position="0 0 -4" rotation="-90 0 0" width="10" height="10" color="#7BC8A4"></a-plane>
        <a-sky color="#ECECEC"></a-sky>
    </a-scene>
  </body>
</html>

Adds a ground plane to the VR scene.

Let’s Try →

A-Frame Multiple Boxes

# aframe/demo/multiple_boxes.html
<html>
  <head>
    <script src="https://aframe.io/releases/1.4.0/aframe.min.js"></script>
  </head>
  <body>
    <a-scene>
        <a-box position="-2 1 -3" color="#4CC3D9"></a-box>
        <a-box position="0 1 -3" color="#EF2D5E"></a-box>
        <a-box position="2 1 -3" color="#7BC8A4"></a-box>
        <a-sky color="#ECECEC"></a-sky>
    </a-scene>
  </body>
</html>

Adds multiple boxes in a VR scene in a row.

Let’s Try →

A-Frame Rotating Cylinder

# aframe/demo/cylinder.html
<html>
  <head>
    <script src="https://aframe.io/releases/1.4.0/aframe.min.js"></script>
  </head>
  <body>
    <a-scene>
        <a-cylinder position="0 1 -3" radius="0.5" height="2" color="#FFC65D" animation="property: rotation; to: 0 360 0; loop: true; dur: 4000"></a-cylinder>
        <a-sky color="#ECECEC"></a-sky>
    </a-scene>
  </body>
</html>

Adds a rotating cylinder to the VR scene.

Let’s Try →

A-Frame Animated Torus

# aframe/demo/torus.html
<html>
  <head>
    <script src="https://aframe.io/releases/1.4.0/aframe.min.js"></script>
  </head>
  <body>
    <a-scene>
        <a-torus position="0 1 -3" radius="1" tube="0.2" color="#FF5733" animation="property: rotation; to: 0 360 0; loop: true; dur: 5000"></a-torus>
        <a-sky color="#ECECEC"></a-sky>
    </a-scene>
  </body>
</html>

Adds a spinning torus to the VR scene.

Let’s Try →

A-Frame Text Label

# aframe/demo/text.html
<html>
  <head>
    <script src="https://aframe.io/releases/1.4.0/aframe.min.js"></script>
  </head>
  <body>
    <a-scene>
        <a-text value="Hello A-Frame" position="0 2 -3" color="#4CC3D9"></a-text>
        <a-sky color="#ECECEC"></a-sky>
    </a-scene>
  </body>
</html>

Displays 3D text in the VR scene.

Let’s Try →

A-Frame Skybox

# aframe/demo/skybox.html
<html>
  <head>
    <script src="https://aframe.io/releases/1.4.0/aframe.min.js"></script>
  </head>
  <body>
    <a-scene>
        <a-box position="0 1 -3" color="#4CC3D9"></a-box>
        <a-sky src="https://cdn.aframe.io/a-painter/images/sky.jpg"></a-sky>
    </a-scene>
  </body>
</html>

Adds a skybox background to the VR scene.

Let’s Try →

A-Frame Interactive Box

# aframe/demo/interactive_box.html
<html>
  <head>
    <script src="https://aframe.io/releases/1.4.0/aframe.min.js"></script>
  </head>
  <body>
    <a-scene>
        <a-box position="0 1 -3" color="#4CC3D9" class="clickable"></a-box>
        <a-sky color="#ECECEC"></a-sky>
    </a-scene>
    <script>
        document.querySelector('.clickable').addEventListener('click', function() {
        this.setAttribute('color', '#EF2D5E');
        });
    </script>
  </body>
</html>

A box that changes color when clicked.

Let’s Try →

A-Frame Multiple Animated Boxes

# aframe/demo/multi_animated_boxes.html
<html>
  <head>
    <script src="https://aframe.io/releases/1.4.0/aframe.min.js"></script>
  </head>
  <body>
    <a-scene>
        <a-box position="-2 1 -3" color="#4CC3D9" animation="property: rotation; to: 0 360 0; loop: true; dur: 4000"></a-box>
        <a-box position="0 1 -3" color="#EF2D5E" animation="property: rotation; to: 0 360 0; loop: true; dur: 5000"></a-box>
        <a-box position="2 1 -3" color="#7BC8A4" animation="property: rotation; to: 0 360 0; loop: true; dur: 6000"></a-box>
        <a-sky color="#ECECEC"></a-sky>
    </a-scene>
  </body>
</html>

Adds several spinning boxes in the VR scene.

Let’s Try →