Key Concepts

Review core concepts you need to learn to master this subject

<script> Element

<head> <script src=""></script> </head>

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

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鈥檚 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鈥檝e seen the power of A-Frame, we can begin to create our own universe. Let鈥檚 start by learning how to create a primitive from scratch鈥攖he 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鈥檛 be able to see the box unless鈥
  6. 6
    Currently, the box looks like a 2D square because it鈥檚 facing dead center towards the default camera. Let鈥檚 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鈥檚 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