← Back to Learning Hub

Three.js Journey

Master 3D graphics in the browser

📚 Learning Roadmap

Phase 1: Foundation (Week 1-2)

  • Understanding 3D coordinate systems
  • Scene, Camera, Renderer basics
  • Basic geometries (Box, Sphere, Plane)
  • Basic materials and colors
  • Simple animations with requestAnimationFrame

Phase 2: Visual Enhancement (Week 3-4)

  • Lighting types (Ambient, Directional, Point, Spot)
  • Shadows and reflections
  • Textures and UV mapping
  • Loading 3D models (GLTF/GLB)
  • Post-processing effects

Phase 3: Interactivity (Week 5-6)

  • Camera controls (Orbit, Fly, First-person)
  • Raycasting for mouse interaction
  • Object selection and manipulation
  • Keyboard and gamepad input
  • GUI controls with dat.gui

Phase 4: Game Development (Week 7-8)

  • Physics integration (Cannon.js)
  • Collision detection
  • Particle systems
  • Audio integration
  • Performance optimization
  • Game loop and state management

🚀 Interactive Examples

Beginner

01. Basics

Learn about scenes, cameras, renderers, and creating your first 3D object.

 Beginner

02. Geometries

Explore different geometry types and how to create custom shapes.

 Beginner

03. Materials

Understand different material types and their properties.

 Intermediate

04. Lighting

Master different light types and create realistic shadows.

 Intermediate

05. Animation

Create smooth animations and learn about the animation loop.

 Intermediate

06. Controls

Implement camera controls and user input handling.

 Intermediate

07. Textures

Apply textures and understand UV mapping.

 Intermediate

08. 3D Models

Load and manipulate external 3D models.

 Advanced

09. Interaction

Implement raycasting and object selection.

 Advanced

10. Physics

Integrate physics engine for realistic motion.

 Advanced

11. Shaders

Write custom shaders for unique visual effects.

 Advanced

12. Game Concepts

Build a mini-game with all concepts combined.

📖 Helpful Resources