Three.js Journey by Bruno Simon is a highly regarded, project-based course offering over 70 hours of content, covering everything from the basics of 3D web development to advanced shaders. Priced at $95 with lifetime access, the course features frequent updates, including recent additions on GLSL and React Three Fiber. Learn more at Three.js Journey Three.js Journey Three.js Journey — Learn WebGL with Three.js
Bruno Simon’s course, Three.js Journey, is widely considered the industry standard for learning 3D web development. It covers everything from absolute basics to high-level shaders and React Three Fiber. 🚀 Course Overview Duration: Over 40 hours of high-quality video content.
Format: Video lessons paired with comprehensive text versions and starter code.
Target: Beginners to advanced developers; no prior 3D experience needed.
Project-Based: You build "real-world" projects, including a haunted house and a galaxy generator. 📚 Curriculum Breakdown
The course is organized into logical chapters that progress in difficulty: 1. The Basics
First Scene: Setting up the renderer, camera, and a basic cube. Transformations: Moving, rotating, and scaling objects.
Cameras & Controls: Implementing OrbitControls and fullscreen support.
Textures & Materials: Applying images and realistic lighting properties to shapes. 2. Classic Techniques
Geometries: Creating custom shapes and working with buffer attributes. Lights & Shadows: Adding depth and realism to scenes. Particles: Building snow, rain, or starfields.
Physics: Integrating a physics engine for collisions and gravity. 3. Advanced Techniques
Blender: Learning to model, texture, and export 3D objects for the web.
Importing Models: Bringing .glb and .gltf files into Three.js. Raycasting: Detecting mouse clicks on 3D objects.
Environment Maps: Using 360° images for realistic reflections. 4. Shaders (The "Hard" Part)
GLSL Fundamentals: Writing custom programs that run directly on the GPU.
Advanced Effects: Creating "raging sea" water, smoke, and holograms. GPGPU: Using shaders for massive particle calculations. 5. Ecosystem & React
Performance: Optimizing for smooth frame rates on all devices.
React Three Fiber (R3F): Learning the modern way to use Three.js within React.
Post-processing: Adding cinematic effects like bloom, blur, and glitch. 🛠 Prerequisites You don't need to be a math genius, but you should know: Three.js Journey — Shaders Update
Module 15–20: Advanced Techniques (The Game Changer)
- Shaders with GLSL: Most Three.js courses stop at built-in materials. Bruno spends hours on raw GLSL (Vertex and Fragment shaders). You learn to use
uniforms,varyingvariables, and create custom noise patterns. - Particle Systems: Creating galaxies, stars, and snowstorms with thousands of animated particles (using PointsMaterial and ShaderMaterial).
- Physics with Cannon.js / Rapier: Adding gravity, collisions, and physical interaction to 3D objects.
Teaching style & strengths
- Extremely practical and playful—less abstract theory, more “learn by building.”
- Strong visual examples and live demos that keep motivation high.
- Focus on modern Three.js patterns and real-world toolchain (module bundlers, npm, asset pipelines).
- Encourages experimentation: lots of small projects and iterative improvements.
- Clear explanations of common pitfalls (performance, memory leaks, model optimization).
Module 26–30: React Three Fiber (R3F) & Modern Stack
- Since the course’s original release, React Three Fiber has taken over the industry. Bruno added a massive section on R3F, Drei, and state management with Zustand.
- You learn the declarative way of building 3D scenes inside a React app.
Who is Bruno Simon?
Bruno Simon is a French creative developer and designer known for his visually stunning, interactive portfolios (specifically his bruno-simon.com portfolio). He doesn't just teach theory; he builds production-ready experiences. His teaching style is meticulous, calm, and visually driven, making complex math (vectors, matrices, quaternions) feel intuitive.