https://github.com/mozzius/r3f-terrain
react-three-fiber terrain generator
https://github.com/mozzius/r3f-terrain
react-three-fiber terrain-generator
Last synced: about 1 month ago
JSON representation
react-three-fiber terrain generator
- Host: GitHub
- URL: https://github.com/mozzius/r3f-terrain
- Owner: mozzius
- Created: 2020-05-31T18:30:38.000Z (almost 5 years ago)
- Default Branch: master
- Last Pushed: 2024-11-19T19:11:12.000Z (5 months ago)
- Last Synced: 2025-03-10T16:01:21.848Z (about 2 months ago)
- Topics: react-three-fiber, terrain-generator
- Language: JavaScript
- Homepage: https://terrain.mozzius.dev
- Size: 5.78 MB
- Stars: 39
- Watchers: 1
- Forks: 6
- Open Issues: 10
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# Terrain Generator
A simple Simplex noise terrain generator, built with THREE and @react-three/fiber.
[See it here!](https://terrain.mozzius.now.sh) Hosted on Vercel.
## How it works
Terrain is generated by adding layers of noise on top of each other at increasingly fine resolutions, which creates an approximation of mountainous terrain. This is then used as a heightmap to modify the height of the vertices of a plane. You can fiddle with the options panel to see what happens when you change the levels of noise or the scale.
For more information on the topic, I recommend [this excellent YouTube video](https://www.youtube.com/watch?v=eaXk97ujbPQ).
This is all implemented using @react-three/fiber, which is basically React for THREE elements instead of HTML elements. It allows you to write THREE code imperatively, using React. This in turn removes a lot of the boilerplate that normally comes with THREE, along with all the other benefits that React comes with.
## Running it yourself
It uses the Create React App template, so simply run:
```
> yarn
> yarn start
```