Learn the tools to build a beautiful virtual environment in A-Frame.

Building the Scene

You made it to the end of the lesson! High five. 🙌

Here is a review of the lesson:

- The asset management system is where we can store textures, audio, and 3D model files inside `<a-assets>`.
- `<a-sky>` for adding the sky or 360° image.
- `<a-plane>` for adding the ground.
- `<a-light>` for adding the lighting.
- `<a-sound>` for adding the sound.
- `<a-text>` for adding text.
- `<a-gltf-model>` for adding 3D models.
- `animation` component for adding animation.

And an in-browser tool called the inspector that move around objects. To open the inspector:

- <kbd>control</kbd> + <kbd>option</kbd> + <kbd>I</kbd> (Mac)
- <kbd>ctrl</kbd> + <kbd>alt</kbd> + <kbd>I</kbd> (Windows)

Review

We need to build an environment piece by piece, using different images, still and moving, sounds, and 3D models. We call those _assets_. 

A-frame has an [asset management system](https://aframe.io/docs/1.0.0/core/asset-management-system.html) that makes complex environments with multiple parts load faster. The system makes it easier for the browser to [cache](https://en.wikipedia.org/wiki/Cache_(computing)) assets (e.g., images, videos, 3D models) and A-Frame will make sure all of the assets are fetched before rendering.

To utilize the asset management system, all we need is an `<a-assets>` element around every HTML element we want to include in the asset management system:

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

  
</a-scene>
```

Some examples of assets that we can store inside of `<a-assets>` include:

- `<img>`: image files
- `<audio>`: sound files
- `<video>`: video files
- `<a-asset-item>`: 3D model files

If we define an `<img>` in the asset management system, later **three.js** doesn’t have to internally create an `<img>`. Creating the `<img>` ourselves also gives us more control and lets us reuse the texture across multiple entities.

To use the asset management system for an image texture:

```html
<a-scene>
  <a-assets>
    <img 
      id="stones" 
      src="https://i.imgur.com/mYmmbrp.jpg">
  </a-assets>

  <a-box 
    src="#stones" 
    position="0 2 -5" 
    rotation="0 45 45"></a-box>
</a-scene>
```

Inside `<a-assets>`:
- Define the texture as an `<img>`.
- Give the `<img>` an `id` (e.g., `id="stones"`).

Outside `<a-assets>`:
- Reference the asset using the `id` in selector format (`src="#stones"`).

Notice how there is an extra hashtag `#` when referencing the `id`.

Asset Management System

In the last lesson, we learned about how to add 3D entities (objects) with primitives and transform them in 3D space with `color`, `position`, `rotation`, and `scale`. But a virtual environment needs a lot more than that for the user to feel like they are in a real world.

A-Frame allows developers to create and share reusable components for others to easily use. The [environment component](https://github.com/supermedium/aframe-environment-component) procedurally generates a variety of entire environments for us with a single line of HTML. The environment component is a great and easy way to visually fill out our VR app, providing over a dozen environments with numerous parameters. If you're interested in taking a closer look at the component, take a look at the GitHub repo.

But how can we create an environment from scratch?

In this lesson, we will learn some tools that will help us build an immersive and realistic environment.

Let's get started!

Introduction

We can change how the scene is lit by using the `<a-light>` primitive. By default, if we don’t specify any lights, A-Frame adds a light source. If A-Frame didn’t add lights for us, the default scene would be black. 

Once we add lights of our own, however, the default lighting setup is removed and replaced with our setup.

`ambient` lights are applied to all entities in the scene. Think of it as the color of the sunlight in your scene (it doesn’t have to be yellow!). Below, we’re adding an ambient light that has a slight-blue-green-hue:

```html
<a-scene>
  <a-light 
    type="ambient" 
    color="#445451"></a-light>
</a-scene>
```

The other type of light in a scene is the `"point"` light.

Point lights are like light bulbs; we can position them around the scene, and the effect of the point light on an entity depends on its distance to the entity:

```html
<a-scene>
  <a-light 
    type="point" 
    intensity="2" 
    position="2 4 4"></a-light>
</a-scene>
```

- The `intensity` of the light. The default is `1`.
- The `position` component is the location of the point light.

Check out the [`<a-light>` documentation](https://aframe.io/docs/1.0.0/primitives/a-light.html) for more info.


Lighting

Audio is important for providing immersion and presence in VR. Even adding simple white noise in the background goes a long way. We recommend having some audio for every scene. 

One way would be to add an `<audio>` element to our asset management system and then an `<a-sound>` primitive to play the audio file:

```html
<a-scene>
  <a-assets>
    <audio 
      id="background"
      src="https://cdn.aframe.io/basic-guide/audio/backgroundnoise.wav"></audio>
  </a-assets>

  <a-sound 
    src="#background" 
    autoplay="true"></a-sound>
</a-scene>
```

Notice that the `autoplay="true"` component value makes the sound clip play automatically when the user enters the scene.

In the real physical world, sound emits from a source. 

So in A-frame, we can add a `position` component to `<a-sound>`. This makes the sound get louder as we approach it and get softer as we distance from it. This is known as _positional audio_.


We could give the sound in our scene a `position` component:

```html
<a-scene>
  <a-assets>
    <audio 
      id="background"
      src="https://cdn.aframe.io/basic-guide/audio/backgroundnoise.wav"></audio>
  </a-assets>

  <a-sound 
    src="#background" 
    autoplay="true"
    position="-3 1 -4"></a-sound>
</a-scene>
```

So when the sound is now coming from the position `"-3 1 -4"`.

Check out the [`<a-sound>` documentation](https://aframe.io/docs/1.0.0/components/sound.html) for more info.

Sound and Positional Audio

Sometimes we will have 3D assets that we want to add to our scene. For example, a 3D model of a television set, a frog, or a rainbow.

A-Frame provides ways for loading [glTF](https://aframe.io/docs/1.0.0/components/gltf-model.html) and [OBJ](https://aframe.io/docs/1.0.0/components/obj-model.html) files. We recommend using glTF 2.0 if possible, as it is becoming the standard for displaying 3D models over the web since its release in 2015. It uses the [JSON](https://www.json.org/) standard.

There is no HTML tag for a glTF file, so to import a **.gltf** file into the scene, we need to add the file to the asset management system using an `<a-asset-item>` element.

And then we can point to it using the `<a-gltf-model>` primitive:

```html
<a-assets>
  <a-asset-item 
    id="tree" 
    src="redwood.gltf"></a-asset-item>
</a-assets>

<a-gltf-model src="#tree"></a-gltf-model>
```

Here, the `<a-asset-item>` element is used to load a **redwood.gltf** file and the `<a-gltf-model>` has a `src` attribute that points to the `<a-asset-item>`.

After it's in the scene, we can transform it using `position`, `rotation`, `scale`, etc.

Places to download 3D models as glTF files include [Google Poly](https://poly.google.com/), [Sketchfab](https://sketchfab.com), and [Clara.io](https://clara.io). Programs to create models include [Blender](https://www.blender.org), [Autodesk Maya](https://www.autodesk.com/products/maya/overview), and [Supercraft](https://supermedium.com/supercraft).

**Note:** Importing external 3D models is notoriously difficult. You may need to play around with `position`, `rotation`, and `scale` to get them to look the way you want (or even see it in the first place). Also, sometimes models just don't work! Don't get discouraged and should find other ones. 


3D Models

To communicate something to the viewer inside the environment, we can use the `<a-text>` primitive. Texts can be game-like instruction, tell a story, or label objects in the world.

In 2D web development, displaying some text is rather simple because the browser’s renderer and layout engine handle everything. In a 3D context, we don’t have those luxuries.

There are several ways to render text, each with its own advantages and disadvantages. A-Frame comes with a [signed distance field (SDF)](https://en.wikipedia.org/wiki/Signed_distance_function) text implementation that is relatively sharp, loads faster, and easy to use.

Here's an example using `<a-text>`:

```html
<a-text 
  value="Hello A-Frame!"
  color="#BBB"
  align="left"
  position="-0.9 0.2 -3"
  scale="1.5 1.5 1.5"></a-text>
```

Note that there are two new attributes that we haven't seen:
- `value="Hello A-Frame!"`
- `align="left"`

This will make the text `Hello A-Frame!` appear in the color gray and align it to the left.

Check out the [`<a-text>` documentation](https://aframe.io/docs/1.0.0/primitives/a-text.html) for more info.

Text

Want to edit your scene without guessing desired values and reloading your code each time? The _inspector_ helps us do just that.

Similar to the regular [web inspector](https://www.codecademy.com/articles/use-devtools), we can open the A-Frame inspector by clicking inside the browser and holding down a keyboard shortcut:

- Mac: <kbd>control</kbd> + <kbd>option</kbd> + <kbd>i</kbd>
- Windows: <kbd>ctrl</kbd> + <kbd>alt</kbd> + <kbd>i</kbd>

![inspector](https://content.codecademy.com/courses/learn-a-frame/building-the-environment/inspector.png)

The left-hand panel lists all of the entities in the scene. The right-hand panel displays information about a selected entity's properties. Click on one of the entities to see its `position`, `rotation`, `scale`, etc. This panel will also show us if a material or texture is attached to an entity.

Once the inspector is open, we have a couple of options for transforming your entities: 

#### In the Inspector Panel

On the right-hand side of the inspector panel, we can click on a property value and type in a new value, which will immediately transform your entity in the scene. If you're not sure which value you'd like to use, or you just want to play around with positioning, you can use your mouse wheel to scroll through values. 

#### In the Scene

The inspector also allows you to navigate through the scene and manually transform objects. To re-position an entity, click to select it and then use the handlebars to move it around:

- The red handle changes the x position.
- The green handle changes the y position.
- The blue handle changes the z position. 

Inspector

We can add animations to our entities using A-Frame’s built-in `animation` component. 

Animations are essentially programmed changes in an entity's values. The changes can be based on time intervals or on interactions.

Suppose we have a box in our scene and we want it to hover up and down to add some motion. Check out the `animation` component:

```html
<a-box 
  color="red" 
  position="2 2 -5" 
  rotation="0 45 45" 
  animation="property: object3D.position.x;
    to: 3; 
    dir: alternate; 
    dur: 2000; 
    loop: true">
</a-box>
```

Note that there are five `animation` properties separated by semicolons. Here, we are telling the animation component to:

- Animate the object `position`’s x-axis.
- Animate from the original x-position to `3`, which is 1 meter to the right.
- Set the `dir` (direction) to `alternate` so it goes back and forth.
- Set the `dur` (duration) to `2000` millisecond on each cycle.
- Set the `loop` to `true` to repeat the animation forever.

Check out the [`animation` documentation](https://aframe.io/docs/1.0.0/components/animation.html) for more info.

Animation

To add a ground, we can use the `<a-plane>` primitive. By default, planes are oriented parallel to the x-y axis. To make it parallel to the ground, we need to orient it along the x-z axis. 

We can do so by rotating the plane negative 90° on the x-axis:

```html
<a-plane 
  rotation="-90 0 0"></a-plane>
```

We’ll want the ground to be large, so we can increase the width and height. Let’s make it 20 meters in each direction:

```html
<a-plane 
  rotation="-90 0 0" 
  width="20" 
  height="20"></a-plane>
```

Then we can apply an image texture to our ground:

```html
<a-assets>
  <img 
    id="groundTexture" 
    src="https://cdn.aframe.io/a-painter/images/floor.jpg">
</a-assets>

<a-plane 
  src="#groundTexture" 
  rotation="-90 0 0" 
  width="20" 
  height="20"></a-plane>
```

To tile our texture, we can use the `repeat` attribute. `repeat` takes two numbers:

- How many times to repeat in the x-direction
- How many times to repeat in the y-direction

These numbers are commonly referred to as U and V for textures.

```html
<a-plane 
  src="#groundTexture" 
  rotation="-90 0 0" 
  width="20" 
  height="20"
  repeat="10 10"></a-plane>
```

Let's make a ground together.

Ground

Okay, now we learned how to use the asset management system, let's create the environment little by little.

We can add a background with the `<a-sky>` primitive that surrounds the scene. 

The sky primitive adds a background color or 360° image to a scene. A sky is a large sphere with a color or texture mapped to the inside.

For example, to add a color khaki background:

```html
<a-sky color="khaki"></a-sky>
```

To add a 360° background with an image texture, we use `src` instead of `color`:

```html
<a-scene>
  
  <a-assets>
    <img id="city" src="neotokyo.jpg">
  </a-assets>

  
  <a-sky src="#city"></a-sky>
</a-scene>
```

In this code above, we are adding the image **neotokyo.jpg** into the asset management system and then using it in the `<a-sky>` primitive.