Skip to content

 React Three Fiber
 Threejs and TypeScript
 SocketIO and TypeScript
 Blender Topological Earth
 Sweet Home 3D
 Design Patterns Python
 Design Patterns TypeScript
 Course Coupon Codes
Three.js and TypeScript
Kindle Edition
$6.99 $9.99 Paperback 
$22.99 $29.99

Design Patterns in TypeScript
Kindle Edition
$6.99 $9.99 Paperback
$11.99 $19.99

Design Patterns in Python
Kindle Edition
$6.99 $9.99 Paperback
$11.99 $19.99

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
Displacement Map with Shadows
Displacement Map with Normal Map
Anisotropic Filtering