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.