A-Frame can be developed from a plain .html file. Because we can link directly to the library, there’s no need for downloading any special software and you can get started right away.

So to use A-Frame and create a virtual environment in the browser, we just need to do two things:

  • In the <head> element, add this line of code:

    <script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>

    The version of A-Frame that we are using in this course is 1.0.4. The <script> element here points to the external script file through the src source attribute.

  • In the <body> element, add an <a-scene> element. The <a-scene> element contains every entity and sets up a 3D scene in the browser. This is where we will be writing our A-Frame code.



Take a look at the index.html file in the code editor. It’s an example of a HTML file that uses A-Frame.

Notice how we added:

  • The <script> inside <head> (line 3)
  • The <a-scene> inside <body>(line 6-12)

Click Run and let’s see what this does in the next exercise.

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?