Introduction to A-Frame

[A-Frame](https://aframe.io) 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-Frame doesn't just produce a static visual 3D scene. The language's core is a powerful entity-component framework that can be programmed extensively by [three.js](https://threejs.org), a JavaScript library used to render 3D graphics.

It was originally developed by the Mozilla VR team in 2015 and it's currently maintained by developers from [Supermedium](https://supermedium.com).

In this lesson, we will give a preview of A-Frame and then dive into the basics — HTML & Primitives.

Let's get started!

**Note:** While you can get started with A-Frame without previous coding experience, we recommend taking the time to check out our [Learn HTML](https://www.codecademy.com/learn/learn-html) and [Learn JavaScript](https://www.codecademy.com/learn/learn-javascript) courses to understand more about what's going on under the hood.


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:
```html
<script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
```
- A-Frame code is contained inside an `<a-scene>` element that establishes the scene with the following primitives:
  - `<a-box>`
  - `<a-sphere>`
  - `<a-cylinder>`
  - `<a-plane>`
  - `<a-sky>`
- Each of the primitives can be transformed with the following components:
  - `color`
  - `position`
  - `rotation`
  - `scale`

With these tools, we now have the power to create the building blocks of our VR scene.

To learn more about primitives, visit the [A-Frame documentation](https://aframe.io/docs/1.0.0/introduction/html-and-primitives.html).

Review

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 <kbd>w</kbd>, <kbd>a</kbd>, <kbd>s</kbd>, <kbd>d</kbd> or arrow keys.

The A-Frame code is contained inside an `<a-scene>` element that establishes the scene in the browser. Here, we are using a few basic primitives:

- `<a-box>`
- `<a-sphere>`
- `<a-cylinder>`
- `<a-plane>`
- `<a-sky>`

A-Frame _primitives_, such as `<a-box>`, are a wrapper of larger pieces of code that we can easily reuse in our program. 

They are great ways for beginners to create 3D objects, also known as _meshes_, right off the bat. They usually have a name that's easy to remember and come with a bunch of components (i.e. `position`, `color`, `width`).

The button on the bottom-right of the browser is for entering the VR mode with a headset or fullscreen mode on a desktop.

To return to the code editor from the virtual environment, use the <kbd>esc</kbd> key or the Menu button on a VR controller.

Browser

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:

```html
<a-scene>
  <a-box 
    color="red"
    position="0 2 -5"
    rotation="33 45 0">
  </a-box>
</a-scene>
```

This will rotate our box at an angle:

- The x-axis rotation is 33°
- The y-axis rotation is 45°
- The z-axis rotation is 0°

A-Frame’s rotational unit is in degrees, although it will get internally converted to radians when passing to **three.js**. 

To determine the positive direction of rotation, use the right-hand rule:

<img src="https://content.codecademy.com/courses/learn-a-frame/introduction/rotation.png" width="300px" alt="Rotation right-hand rule">
<br>

Point our thumbs towards the direction of the positive x, y, or z-axis with your fingers curled. As a reminder:
* Positive x-axis goes right.
* Positive y-axis goes up.
* Positive z-axis goes out of the screen towards us.

The direction in which your fingers curl is the positive direction of rotation. The other way is the negative direction of rotation.

Rotation

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 `<a-box>` primitive specifically.

We can use `<a-box>` just like a normal HTML element, defining the tag and using HTML attributes to customize it.

To place a box in our world, put an opening and closing `<a-box>` tag inside the `<a-scene>` tag:

```html
<a-scene>
  <a-box></a-box>
</a-scene>
```

And suppose we want to give it a color:

```html
<a-scene>
  <a-box color="yellow"></a-box>
</a-scene>
```

We can give a `color` value using three different methods:

- [Color names](https://www.w3schools.com/colors/colors_names.asp): One of the 140 color names.
- [Hex codes](https://en.wikipedia.org/wiki/Web_colors#Hex_triplet): A six-digit code representing the amount of red, green, and blue for the color.
- [RGB values](https://www.w3schools.com/colors/colors_rgb.asp): A value specified using the `rgb()` property.

See [`<a-box>` documentation](https://aframe.io/docs/1.0.0/primitives/a-box.html) for more attributes.

<a-box>

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:

```html
<a-scene>
  <a-box
    color="red"
    position="0 2 -5"
    rotation="0 45 45"
    scale="0.5 2 1">
  </a-box>
</a-scene>
```

- The x-axis value is shrunk by `0.5`
- The y-axis value is stretched by `2`
- The z-axis value is kept the same with `1`

All entities inherently have the `scale` component, so make sure to take advantage of it when designing 3D objects.

Scale

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:
```html
<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](https://aframe.io/releases/1.0.4/aframe.min.js). 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.

HTML File

All entities, including the camera, have a `position` component. And because the default camera and the `<a-box>` are positioned at the default x, y, z position, `0` `0` `0`, we won’t be able to see the box unless we move it. 

We can do this by using the `position` component to transform the box in 3D space. For example:

```html
<a-scene>
  <a-box position="2 4 -3"></a-box>
</a-scene>
```

- The x-axis value is `2`
- The y-axis value is `4`
- The z-axis value is `-3`

A-Frame uses a right-handed coordinate system:

<img src="https://content.codecademy.com/courses/learn-a-frame/introduction/position.png" width="300px" alt="Position right hand rule">

<br>
With the default camera direction: 

- Positive x-axis goes right.
- Positive y-axis goes up.
- Positive z-axis goes out of the screen towards us.

**Note:** A-Frame's distance unit is in meters (m).