Skip to Content
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"
Folder Icon

Take this course for free

Already have an account?