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
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
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"