A-Frame is a popular virtual reality framework that allows you to build virtual environments in the browser. The framework rose in popularity due to several powerful features:

  • It allows web developers to create 3D and WebVR scenes with HTML.
  • It leverages the power of Three.js and removes a lot of the learning curve and overhead by leveraging HTML syntax.
  • It is modeled as an entity–component–system, or ECS, which is a popular game development paradigm. It allows for entities or components to each have their own behavior and functionality. Entity–component–systems make it easier to update at runtime by adding and removing components.
  • It is compatible with multiple VR headsets including HTC Vive, Oculus Rift, Samsung GearVR, and smartphones (Google Cardboard).

A-Frame code is placed inside an <a-scene> element inside the HTML <body>. The <a-scene> contains every entity and sets up the 3D configuration in the browser.


Explore the content inside the environment by dragging around the browser, or by using the up, down, left and right keys on your computer.

Take a look at the code editor and notice that our A-Frame code in contained inside an <a-scene> element that establishes the scene in the browser.

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?