Skip to Content
Learn
Introduction to A-Frame
HTML File

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.

Instructions

1.

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.

Folder Icon

Take this course for free

Already have an account?