A simple Simplex noise terrain generator, built with THREE and @react-three/fiber.
See it here! Hosted on Vercel.
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.
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.
It uses the Create React App template, so simply run:
> yarn
> yarn start