The Ultimate Three.js - Course By Bruno Simon Fre...

Bruno Simon's Three.js Journey is a comprehensive, 90+ hour course widely regarded as a premier resource for mastering 3D web development, covering topics from basic scenes to advanced shaders and React Three Fiber. The roughly $95, regularly updated course provides a professional workflow, including Blender integration, though it requires a significant time commitment. For more details, visit Three.js Journey.

I took the Three.js course by Bruno Simon and it is awesome!

Three.js Journey by Bruno Simon is a comprehensive, project-based course often called "the ultimate resource" for learning 3D on the web. It covers everything from basic JavaScript scenes to advanced shaders and React integration. Three.js Journey Key Features Dual-Format Content : Every lesson is available in both high-quality and detailed formats, complete with code snippets and screenshots. Massive Curriculum : The course features over of video content spread across 66+ lessons Blender Training : Includes a dedicated section on using

(a free 3D modeling tool) to create, bake, and export custom models for the web. React Three Fiber (R3F) : A major chapter teaches how to use Three.js within

, including a 4-hour "React Basics" primer for those who don't know the framework. Shaders Mastery : Extensive lessons (over 26 hours) dedicated to GLSL shaders The Ultimate Three.js Course by Bruno Simon Fre...

, teaching how to create advanced effects like raging seas, holograms, and fire. Project-Based Learning : Students build multiple real-world projects, including a haunted house , a galaxy generator, and a final 3D browser-based game Community Access : Purchase includes access to a private Discord server

with over 15,000 members for support and feedback from Bruno and other students. Lifetime Updates

: The course is frequently updated to reflect the latest Three.js versions and web standards (e.g., transitioning to for project setup). Three.js Journey Main Chapters Key Topics 01 - Basics

Setup, cameras, geometries, materials, textures, and Debug UI. 02 - Classic Bruno Simon's Three

Lights, shadows, haunted house project, particles, and scroll animations. 03 - Advanced

Physics, raycaster, Blender modeling, and realistic rendering. 04 - Shaders

GLSL syntax, shader patterns, and complex procedural effects. 05 - Extra

Post-processing, performance optimization, and mixing HTML/WebGL. 06 - Portal Geometries: From BoxGeometry to TorusKnotGeometry

Creating a complete baked scene from scratch in Blender to Three.js. React Three Fiber, Drei, and building a full game in React. or check for current discount codes for the course? Three.js Journey — Learn WebGL with Three.js

The Three.js Journey course by Bruno Simon is widely considered the gold standard for mastering 3D web development. Known for its exceptional depth and engaging teaching style, the course transforms complex WebGL concepts into actionable skills for developers of all levels. Who is Bruno Simon?

Bruno Simon is a world-renowned French creative developer specializing in WebGL. He gained viral fame for his interactive 3D portfolio, which features a drivable car in a WebGL environment. With over seven years of experience teaching in physical schools, his pedagogical approach focuses on making "intimidating" graphics programming accessible and fun. Course Curriculum & Key Features

The course is structured into progressive chapters that build from absolute basics to professional-grade techniques: Introduction - Three.js Journey

Module 4–8: Geometry, Textures, and Materials

Geometries: From BoxGeometry to TorusKnotGeometry. You learn what vertices and faces actually are under the hood.
Debugging: Bruno introduces the lil-gui panel, teaching you to tweate parameters in real-time—a workflow skill most junior devs miss.
Textures: Loading images, mipmapping, texture minification/magnification filters, and why loading a 4096x4096 texture kills performance.
Materials: MeshStandardMaterial, MeshBasicMaterial, and the power of environment maps.

Course structure (high-level)

Intro to 3D fundamentals (vectors, cameras, coordinate systems).
Scene setup with Three.js (renderer, scene, camera, lights).
Geometry, materials, textures, and UV mapping.
Loading and optimizing 3D models (GLTF/GLB).
Physics basics and integration (e.g., using libraries or simple approximations).
Interactivity: pointer events, raycasting, controls, GUI.
Advanced rendering: post-processing, particles, shadows, environment maps.
Performance: framerate, LOD, geometry batching, texture atlases.
Full projects and a final mini-game or interactive playground.

2. Classic Techniques

Before diving into modern physics engines, you learn the foundational math. This includes:

Geometries and Materials: How to create custom shapes and apply textures.
Lights and Shadows: Making your scene look realistic.
Physics: Bruno teaches you how to write your own physics engine from scratch. While you might use a library later, understanding the math behind collisions and gravity is invaluable.

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.