Learn Three.js - Third Edition

Using a bump map to create wrinkles

A bump map is used to add more depth to a material. You can see this in action by opening the 02-bump-map.html example:

In this example, you can see that the right-hand side wall looks much more detailed, and seems to have more depth as compared to the wall on the left-hand side. This is done by setting an additional texture, a so-called bump map, on the material:

  var cubeMaterial = new THREE.MeshStandardMaterial({      map: textureLoader.load("../../assets/textures/stone/stone.jpg"),      bumpMap = textureLoader.load("../../assets/textures/stone/stone-bump.jpg"),      metalness: 0.2,      roughness: 0.07  });

In this code, ...