A progressive learning project covering core 3D concepts using React Three Fiber.
- Geometry : Box, Sphere, Torus, TorusKnot
- Materials : Standard, Wobble, Wireframe
- Lighting : Directional + Ambient with debug helpers
- Controls : Orbit, Leva GUI
- Interactivity : Hover/click effects, real-time adjustments
01_basic:
Box with standard material02_otherGeometry:
Multiple animated shapes03_interactions:
Hover/click effects04_drei:
Wobble effects & camera controls05_helpers:
Light debugging06_leva:
Real-time property controls
- Install dependencies:
npm install @react-three/fiber @react-three/drei leva three
- Run development server:
npm run dev
- Explore different stages:
cd 04_drei/ && npm run dev
Resource | Description |
---|---|
Official R3F documentation and examples | |
Ready-to-use Three.js components | |
GUI controls for live tweaking | |
Core WebGL library reference |