Displacement Map
Description
You can add a displacement map to the material used by your geometry to offset its vertices. Your geometry should have many vertices in order to see the effect.
Note that using displacement maps in Threejs is really only beneficial if you need to add it dynamically for any reason, or you want to modify it at runtime.
Normally you would apply a displacement map to your model in blender, or other DCC tool first, and then export as glTF. The same goes for normal maps, specular maps, or other hundreds of complicated things to do with textures and vertices.
Use the slider to change the displacementScale and the wireframe option to help visualize how many vertices are used by the underlying geometry.
This example also demonstrates how to set the textures anisotropy based on the detected capabilities of your own hardware.
Working Example
GitHub Branch
git clone https://github.com/Sean-Bradley/React-Three-Fiber-Boilerplate.git
cd React-Three-Fiber-Boilerplate
git checkout displacementMap
npm install
npm start
Useful Links
| Displacement Map | threejs.org | sbcode.net/threejs |
| Displacement Map with Shadows | sbcode.net/threejs | |
| Displacement Map with Normal Map | sbcode.net/threejs | |
| Anisotropic Filtering | threejs.org | sbcode.net/threejs |