Key Concepts

Review core concepts you need to learn to master this subject

<script> Element

<a-scene> Element

<script> Element

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

Inside an .html file, include A-Frame in the <head> element.

<a-scene> Element

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

The A-Frame code is contained inside an

  • <a-box>
  • <a-sphere>
  • <a-cylinder>
  • <a-plane>
  • <a-sky>
Introduction to A-Frame
Lesson 1 of 1
  1. 1
    A-Frame is a popular open-source web framework for building virtual reality experiences in the browser. It is based on top of HTML, making it super easy to get started. But A-…
  2. 2
    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 us…
  3. 3
    Voilà! A few lines of code and we have ourselves a virtual environment in the browser. Explore the environment by click-dragging the mouse and move around with w , a , s , d or arrow keys. T…
  4. 4
    Now that we’ve seen the power of A-Frame, we can begin to create our own universe. Let’s start by learning how to create a primitive from scratch—the primitive specifically. We can use just li…
  5. 5
    All entities, including the camera, have a position component. And because the default camera and the are positioned at the default x, y, z position, 0 0 0, we won’t be able to see the box unless…
  6. 6
    Currently, the box looks like a 2D square because it’s facing dead center towards the default camera. Let’s change that. To rotate the box, we can change the rotation component: Thi…
  7. 7
    The scale component defines a shrinking, stretching, or skewing transformation of an entity. It takes three scaling factors for the x, y, and z axes. Here’s the scale component in action: …
  8. 8
    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: - A-Frame code is contained inside an elem…

What you'll create

Portfolio projects that showcase your new skills

Pro Logo

How you'll master it

Stress-test your knowledge with quizzes that help commit syntax to memory

Pro Logo