Skip to content

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
Displacement Map (Working Example) sbedit.net
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

Comments