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="https://aframe.io/releases/1.0.4/aframe.min.js"></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

Take this course for free

Mini Info Outline Icon
By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.

Or sign up using:

Already have an account?