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.
git clone https://github.com/Sean-Bradley/React-Three-Fiber-Boilerplate.git cd React-Three-Fiber-Boilerplate git checkout displacementMap npm install npm start
|Displacement Map with Shadows||sbcode.net/threejs|
|Displacement Map with Normal Map||sbcode.net/threejs|