react-three-learning-lab

Try it in your browser 👉 Live Demo

A small Next.js lab for learning three.js effects, mainly through official examples and classic case studies. All effects in this project are built with TypeScript and three.js 0.180.0. Each effect lives in its own route under app/effects/<slug>/, with local scene code and a note.md file for notes and source metadata. Built with AI-assisted workflows.

Key Features

• One effect per route for focused experiments and demos
• Local note.md files for notes and source-file metadata
• Generated static effect content from whitelisted local files
• Static export setup with GitHub Pages-friendly base-path support

Tech Stack

• Next.js 16.2.2
• React 19.2.4
• three.js 0.180.0
• @react-three/fiber 9.5.0
• @react-three/drei 10.7.7
• leva 0.10.1
• shadcn/ui