Introduction 00:00

In this lesson, we are going to transform a plane into a procedural terrain with mountains, water, beaches, plateaus, etc. using shaders:

We’ve already learned most of the techniques we are going to use and it’s an opportunity to practice while discovering a few more tricks.

Setup 01:04

The starter already contains the following:

• A placeholder sphere with a MeshStandardMaterial applied to it
• An HDR environment map for the background, which is also there to light up the scene
• A DirectionalLight to light up the scene even more and cast shadows
• The vite-plugin-glsl dependency to handle GLSL files
• OrbitControls to rotate around
• The three-custom-shader-material dependency to enhance built-in materials

Board 01:50

Instead of starting right away with the terrain, we are going to create the board around it. This board needs to look like this:

Although it looks quite simple, creating a hole in a plain geometry is actually rather difficult and there are many ways to do it, yet no simple one.

We could use the LatheGeometry with only 4 segments.

We could use ExtrudeGeometry.

We could create 4 BoxGeometry arranged in a specific way:

We could even create the model in a 3D software like Blender and import it.

All those solutions should get you the right result, but there is one more solution that I want you to discover and it’s the three-bvh-csg.

CSG stands for Constructive Solid Geometry, and BVH stands for Bounding Volume Hierarchy. Although very interesting, we are not going to explain those two topics.

To put it in a nutshell, three-bvh-csg enables boolean operations between geometries. As an example, you can use a sphere geometry to poke a hole in a box geometry.

In our case, we are going to start from box geometry, and then create a slightly smaller box geometry sticking out above and below. Then we are going to ask that last one to poke a hole in the first one:

Dependency

three-bvh-csg is available on NPM: https://www.npmjs.com/package/three-bvh-csg

Install the library using npm install and force the version to 0.0.16:

npm install three-bvh-csg@0.0.16

We force the version to make sure it works with the lesson.

Brushes

Each base shape that will be used in the operation is called a Brush.

Import Brush from 'three-bvh-csg':

import { Brush } from 'three-bvh-csg'

After the Placeholder section, add a Board section:

/**
 * Placeholder
 */
// ...

/**
 * Board
 */

We need two Brushes, one for the base shape and one to poke a hole in it.

To instantiate a Brush, we need to send it a Three.js geometry.

Let’s start with the base shape that we are going to name boardFill and instantiate a Brush using a BoxGeometry:

// Brushes
const boardFill = new Brush(new THREE.BoxGeometry(11, 2, 11))

We can’t see it, but the shape exists.

Next, let’s create the Brush that will poke a hole. Instantiate a new Brush using a BoxGeometry again, but change its size so that it’s tighter but higher. Finally, name it boardHole:

// Brushes
const boardFill = new Brush(new THREE.BoxGeometry(11, 2, 11))
const boardHole = new Brush(new THREE.BoxGeometry(10, 2.1, 10))

Evaluate

We have our two brushes; now, we want to poke a hole in boardFill using boardHole.

We need to instantiate an Evaluator.