Graphics Reference
In-Depth Information
How it works...
Height maps are a way to embed the height information into an image. Each pixel
value of the image represents the relative height measured at that point. In this re-
cipe, we've processed this value, together with its
x
and
y
values, and converted it
into a vertex. If we do this for each point, we get an exact 3D representation of the
2D height map. In this case, it results in a geometry that contains 512 * 512 vertices.
There's more…
When we create a geometry from scratch, there are a few interesting things we can
add. We can, for instance, color each individual face. This can be done by doing the
following:
<script src="../libs/
chroma.min.js"></script>
2. You can then create a color scale:
var scale = chroma.scale(['blue',
'green', red]).domain([0, 50]);
3. Set the face colors based on the height of the face:
face1.color = new THREE.Color(
scale(getHighPoint(geom,
face1)).hex());
face2.color = new THREE.Color(
scale(getHighPoint(geom,
face2)).hex())
4. Finally, set
vertexColors
of the material to
THREE.FaceColors
. The res-
ult looks something like this:
