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?
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!