Learn A-Frame (VR): Course OverviewCourse Overview

Introduction to A-Frame

A brief introduction into the world of WebVR.

Start

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
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
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
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
<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
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
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
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
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