Learn Three.js - Third Edition

Using a displacement map to alter the position of vertices

Three.js also provides a texture that you can use to change the positions of the vertices of your model. While the bump map and the normal map give an illusion of depth, with a displacement map, we really change the model's shape, based on the information from the texture. Using a displacement map is done in the same way as we use other maps:

var textureLoader = new THREE.TextureLoader();var sphere = new THREE.SphereGeometry(8, 180, 180)var sphereMaterial = new THREE.MeshStandardMaterial({    map: textureLoader.load("../../assets/textures/w_c.jpg"),    displacementMap: textureLoader.load("../../assets/textures/w_d.png"),    metalness: 0.02,    roughness: 0.07,    color: 0xffffff});

In the preceding ...