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.

Introduction to A-Frame
Lesson 1 of 1
  1. 1
    Introduction to A-Frame
    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-…
    Start
  2. 2
    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 us…
    Start
  3. 3
    Browser
    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…
    Start
  4. 4
    <a-box>
    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…
    Start
  5. 5
    Position
    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…
    Start
  6. 6
    Rotation
    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…
    Start
  7. 7
    Scale
    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: …
    Start
  8. 8
    Review
    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…
    Start

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