Currently, I am engrossed in developing a JavaScript game using Three.js. My interest lies in enhancing the realism of the walls by incorporating a height map (refer to the provided image). View this snapshot of the game design featuring a 2D wall.
All the tutorials I have discovered so far utilize planes instead of rectangles. However, my preference is to stick with rectangles and avoid switching unless absolutely necessary. If there are no solutions available for rectangles, I would appreciate learning about alternative options.
The current approach involves utilizing the NewObstacle() class to create 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)
}
}I am seeking advice on the most straightforward method to incorporate height maps into the project. Any suggestions or guidance would be highly appreciated.