Create Terrain in React Three Fiber

Stephen Castle

November 08, 2020

Facebook Icon
Twitter Icon

Accompanying Text-Based Tutorial https://codeworkshop.dev/blog/2020-11-05-displacement-maps-normal-maps-and-textures-in-react-three-fiber/

Create 3D terrain geometry in React Three Fiber using real-world Elevation Data from GIS software as a displacement map applied to a Three.js meshStandardMaterial.

Learn how to use Digital Elevation Models of the Hawaiian Islands (or any other location) to create a heightmap, a normal map, and a color texture and then apply them to a real React Three Fiber scene.

We'll also cover using the Sky component from the react three fiber toolkit library Drei and applying atmospheric fog to create a more realistic outdoor scene.

You'll be surprised how quick and easy it is to make a good looking environment this way, and this method is transferable to any other type of landscape you can imagine. Use it to create mountains, river valleys, rolling hills, or canyons based on real places.