Skip to Content
Introduction to A-Frame

Woohoo! In this lesson, you learned how to create an A-Frame box primitive and change its attributes.

For review:

  • A-Frame can be added by using:
    <script src=""></script>
  • A-Frame code is contained inside an <a-scene> element that establishes the scene with the following primitives:
    • <a-box>
    • <a-sphere>
    • <a-cylinder>
    • <a-plane>
    • <a-sky>
  • Each of the primitives can be transformed with the following components:
    • color
    • position
    • rotation
    • scale

With these tools, we now have the power to create the building blocks of our VR scene.

To learn more about primitives, visit the A-Frame documentation.


Feel free to play around and edit the code in the browser.

Optional: Add four <a-cylinder>s to make it a Lego piece:

Red Lego piece
Folder Icon

Take this course for free

Already have an account?