Learn

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:

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

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

<a-scene>
  <!-- Asset management system -->
  <a-assets>
    <img id="city" src="neotokyo.jpg">
  </a-assets>

  <!-- a-sky -->
  <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.

Instructions

1.

Suppose we have two options for our 360° image:

Pick one that you like and inside <a-assets>, add an image element with:

  • id of "sky"
  • src of the file name
2.

Outside of the <a-assets> tags, instantiate an <a-sky> primitive whose source is the previous image.

Take this course for free

By signing up for Codecademy, you agree to Codecademy's Terms of Service & Privacy Policy.
Already have an account?