Learn
Building the Scene
Ground

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:

``````<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:

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

Then we can apply an image texture to our ground:

``````<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.

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

Let’s make a ground together.

### Instructions

1.

Suppose we have an image for some grassy floor:

Inside `<a-assets>`, add an image element with:

• `id` of `"grass"`
• `src` of the file name
2.

Outside of the `<a-assets>` tags, instantiate an `<a-plane>` primitive whose source is the previous image and some other components:

• `rotation` of `"-90 0 0"`
• `width` of `"20"`
• `height` of `"20"`