Skip to content
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Type Name Latest commit message Commit time
Failed to load latest commit information.


A Height Grid (Terrain) component for A-Frame. The component allows to use a gridded height field for defining a surface. The grid is aligned with the x-z plane, the heights define y coordinates.

Chrome requires aframe > 0.2.0 for this component to function properly.


Property Description Default Value
xdimension number of grid points in x direction 2 (the minimum)
zdimension number of grid points in z direction 2 (the minimum)
xspacing the distance between two grid points in x direction 1
zspacing the distance between two grid points in z direction 1
heights a list of heights (ordering below) 0
origin the location of the first grid point 0 0 0
uvs a list of 2d texture coordinates empty

The ordering of heights is from the first grid point to the last. The ordering is such that y(x, z) = heights(x + z * xdimension); eg. first the points along the x direction are assigned heights, then the z position is incremented and those points along the x direction are assigned heights.

The (local) origin of the grid can be shifted by providing the origin property. This is for special applications only. Usually it is preferrable to wrap in another entity for translation and rotation.


The minimum value x/zdimension is 2. x/zspacing values are unconstrained and can probably be negative.

If the heights property contains less values than the number of grid points, heights are recycled from the beginning of the list to fill in missing values. By default the heights list only has a single 0 value. Omitting a heights field therefore will produce a horizontal plane.

The default value for the uvs property is an empty list. An empty list will lead to texture coordinates which correspond directly to the x and z coordinates of the grid points, scaled to vary between 0 and 1.

The demos have examples of how to use custom uvs.


Browser Installation

Install and use by directly including the browser files:

  <title>My A-Frame Scene</title>
  <script src=""></script>
  <!--script src=""></script-->
  <script src=""></script>
  <script src=""></script>

    <a-entity heightgrid="height: 1 2 2 1"></a-entity>

NPM Installation

Install via NPM:

npm install aframe-heightgrid-component

Then register and use.

You can’t perform that action at this time.