3D Game Programming for Kids, 2nd Edition

Noise

We used noise.js to create uneven terrain in Chapter 19, ​Project: River Rafter​. The noise code collection is bonus code included in Three.js. You can use it on any shape you like. All we have to do is count the number of vertices in the shape, create a noise maker, then loop over the vertices adding noise to each. The example from the river rafter is a good place to start:

var numVertices = shape.vertices.length;
var noiseMaker = new SimplexNoise();
for (var i=0; i<numVertices; i++) {
  var vertex = shape.vertices[i];
  var noise = 0.25 * noiseMaker.noise(0.1 * vertex.x, 0.1 * vertex.y);
  vertex.z = noise;
}

You can play with the numbers on the line that sets noise. Try increasing and decreasing both the 0.25 number ...