Is there a built-in Three.js heightmap function?

Question

I am currently working on a game in JavaScript, in Three.js. I am curious if I can add a height map to the walls that I have to make them more realistic (see image). An image of the game design with the wall that is 2D.

All the tutorials that I have seen use planes instead of rectangles. I am currently using rectangles, and would rather not switch, but if there is no solution with rectangles, I would be happy to know.

I am currently using the class NewObstacle() to make my rectangles:

const wallTexture = new THREE.TextureLoader();
const wallTextureTexture = new THREE.MeshBasicMaterial({
  map: wallTexture.load('wall_textures/wall_3.jfif')
})

class NewObstacle{
  constructor(sizeX, sizeY, sizeZ, xPos, yPos, zPos){
    this.sizeX = sizeX
    this.sizeY = sizeY
    this.sizeZ = sizeZ
    this.xPos = xPos
    this.yPos = yPos
    this.zPos = zPos
  }
  makeCube(){
    const cubeGeometry = new THREE.BoxGeometry(this.sizeX, this.sizeY, this.sizeZ)
    this.box = new THREE.Mesh(cubeGeometry, /*new THREE.MeshBasicMaterial({color:
0x505050})*/wallTextureTexture)
    this.box.material.transparent = true
    this.box.material.opacity = 1
    this.box.position.x = this.xPos
    this.box.position.y = this.yPos
    this.box.position.z = this.zPos
    scene.add(this.box)
  }
}

What is the easiest way to implement height maps?

Here's an official example using [displacement map](https://threejs.org/examples/#webgl_materials_displacementmap) You can move the `displacementScale` slider to see how it works. It basically uses [this image](https://raw.githubusercontent.com/mrdoob/three.js/master/examples/models/obj/ninja/displacement.jpg) to make the white parts displace a lot & the black parts displace a little. You can see the source code by clicking on the bottom-right `< >` icon. — M -, Jan 05 '22 at 05:09

score 4 · Accepted Answer · answered Apr 19 '22 at 12:39

You can use the displacementMap property on the material.

This article states:

Displacement maps are grayscale textures you map to objects to create true surface relief (elevations and depressions) on an otherwise flat object.

First load you texture:

const loader = new THREE.TextureLoader();
const displacement = loader.load('yourfile.extension');

Next you create the material. I recommend using MeshStandardMaterial. This is how you would define your material:

const material = new THREE.MeshStandardMaterial({
    color: 0xff0000, //Red
    displacementMap: displacement,
    displacementScale: 1
});

We already know that displacementMap is going to use the grayscale image to create depressions and elevations on the plane, but the displacementScale is how much the plane is affected by the displacementMap.

That should do it!

Is there a built-in Three.js heightmap function?

1 Answers1