Skip to content

Displacement Map


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
cd React-Three-Fiber-Boilerplate
git checkout displacementMap
npm install
npm start
Displacement Map (Working Example)
Displacement Map
Displacement Map with Shadows
Displacement Map with Normal Map
Anisotropic Filtering