ThreeJS Course

3
Three.js MasteryPhase 1: Lesson 1
Step 1 / 20
📄 index.html
⚡ main.js
localhost:5173State: BLANK
BLANK PAGE

TUTOR NOTES

Welcome to 3D Web Development. In this extensive session, we will build a 3D scene from absolute zero. We are not using React yet; we are using 'Vanilla' JavaScript to understand the underlying mechanics of WebGL. Our goal: Render a rotating 3D cube.

ThreeJS Course

Duration: 1 hour
Lessons: 17
(5.0)

Learn 3D programming with ThreeJS from scratch.

Curriculum

  • Phase 1.1: The Black Canvas
  • Phase 1.2: Code Sculptors (Geometries and Transformations)
  • Phase 1.3: Adding Color (Materials and Lights)
  • Phase 1.4: The Observer (Cameras and Controls)
  • Phase 2.5: Hello R3F (The Refactor)
  • Phase 2.6: Importing Real Art (Loading Models)
  • Phase 2.7: The Drei Ecosystem (Lights and Environment)
  • Phase 3.8: HTML inside 3D
  • Phase 3.9: Events and State (Zustand)
  • Phase 3.10: Controlling the Drone (Inputs)
  • Phase 4.11: Physics with Rapier
  • Phase 4.12: Particles and Atmosphere
  • Phase 4.13: Shaders (The Holographic Shield)
  • Phase 4.14: Post-Processing (Cinema)
  • Phase 4.15: Optimization and Deploy
  • Bonus Lesson: Advanced Cases
  • Bonus Lesson: Portfolio and Projects