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