Creating geometries from height maps
With Three.js, it is easy to create your own geometries. For this recipe, we're going to show you how to create your own geometry based on a terrain height map.
Getting ready
To convert a height map into a 3D geometry, we first need to have a height map. In the source files provided with this book, you can find a height map for a portion of the Grand Canyon. The following image shows you what this looks like:
If you're familiar with the Grand Canyon, you'll probably recognize the distinct shape. The final result we'll have at the end of this recipe can be viewed by opening up the 02.06-create-terrain-from-heightmap.html file in your browser. You'll see something similar to the following screenshot:
How to do it...
To create a heightmap-based geometry, you need to perform these steps:
Before we look at the required Three.js code, we first need to load the image and set some properties that determine the final size and height of the geometry. This can be done...
