React Three Fiber - Create Landscapes using Displacement Maps
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.
Accompanying Text-Based Tutorial
https://codeworkshop.dev/blog/2020-11...
If you don't want to make your own textures and just want to download the ones I made you can also get them from this link.
React Three Fiber Starter Template
https://codesandbox.io/s/react-three-...
Completed Project Files
https://codesandbox.io/s/displacement...
Tool for converting heightmaps to normal maps
https://cpetry.github.io/NormalMap-On...
0:00 Project Introduction
1:15 Finding Elevation Data for a Landscape
3:30 Convert Raw Digital Elevation Models to A Height Map Texture with QGIS
11:36 Convert a Black and White Heightmap to a Normal Map
14:45 Create a New React Three Fiber Scene on Code Sandbox
18:50 Import textures and attach them to a meshStandardMaterial in React Three Fiber
25:45 Tweaking the Geometry Subdivisions to Control Displacement Map Resolution.
29:30 Creating a Color Texture by Gradient Mapping the Black and White Heightmap
37:40 Adding a Sky and Atmospheric Fog
Watch video React Three Fiber - Create Landscapes using Displacement Maps online without registration, duration hours minute second in high quality. This video was added by user Code Workshop 08 November 2020, don't forget to share it with your friends and acquaintances, it has been viewed on our site 4,456 once and liked it 85 people.