Skip to content

A progressive learning project covering core 3D concepts using React Three Fiber.

Notifications You must be signed in to change notification settings

abdulrahmans0414/React-three-fiber

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

19 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

3D Scene Workshop with React Three Fiber

React Three Fiber Three.js License

A progressive learning project covering core 3D concepts using React Three Fiber.

✨ Core Features

  • 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

🗺️ Learning Path

  1. 01_basic: Box with standard material
  2. 02_otherGeometry: Multiple animated shapes
  3. 03_interactions: Hover/click effects
  4. 04_drei: Wobble effects & camera controls
  5. 05_helpers: Light debugging
  6. 06_leva: Real-time property controls

🚀 Quick Start

  1. Install dependencies:
    npm install @react-three/fiber @react-three/drei leva three
  2. Run development server:
    npm run dev
  3. Explore different stages:
    cd 04_drei/ && npm run dev

📚 Learning Resources

Resource Description
R3F Official R3F documentation and examples
Drei Ready-to-use Three.js components
Leva GUI controls for live tweaking
Three.js Core WebGL library reference

About

A progressive learning project covering core 3D concepts using React Three Fiber.

Topics

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published