Pedro Navarrete
Projects

Browser graphics

Procedural terrain in React and Three.js

Peaks and Valleys

A React and Three.js terrain experiment with procedural generation, lighting, camera work, and WebGL rendering.

ReactThree.jsWebGLProcedural generation
View source

How the system fits together.

  1. Control

    React application shell

  2. Generate

    Procedural Three.js terrain

  3. Render

    Lighting, camera, and WebGL

Peaks and Valleys is where I experimented with procedural terrain in React and Three.js. I could change the terrain, camera, or lighting and inspect the result in the browser.

What I built

  • React application shell.
  • Three.js scene work.
  • Generated terrain.
  • Lighting experiments for browser-rendered 3D.

Engineering notes

The app puts terrain generation, camera, lighting, and render speed in one view for tuning.