Learn
Building the Scene
Sky and 360° Image

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.

Folder Icon

Take this course for free

Already have an account?