CF

Three.js Journey - The ultimate Three.js course

90h 46m 32s
English
Paid
Updated September 2026

Three.js Journey - The ultimate Three.js course is a 67-lesson 90 hours 46 minutes self-paced course by Bruno Simon. Created by Bruno Simon, Three.

Course facts

Lessons
67
Duration
90 hours 46 minutes
Level
All levels
Language
English
Updated
2026-09-11
Instructor
Bruno Simon
Price
Premium

Created by Bruno Simon, Three.js Journey is a deep, beginner-friendly path into building 3D experiences on the web with WebGL and Three.js.

From first principles to advanced effects

The course opens by explaining what WebGL actually is and why Three.js makes it approachable, then works step by step toward advanced techniques: rendering millions of particles, adding physics and interactions, building an animated galaxy, and simulating a raging sea.

No prior 3D or heavy math needed

You don't need previous WebGL or Three.js experience, and the math involved is kept at a simple, explained level. As a bonus, you'll also pick up the basics of Blender to create your own 3D models for use in your scenes.

What you walk away with

By the end, you'll have a solid working understanding of Three.js and enough hands-on experience with real projects to start building your own 3D websites from scratch.

What will you learn?

The course is complete, yet accessible for beginners. We will start by discovering what WebGL is and why using the Three.js library is a must. We will then discover the various components of Three.js and once the basics are acquired, we will move on to more advanced techniques to display millions of particles, add physics, add interactions, create a galaxy, animate a raging sea, etc.

At the end of the course, you will have a deep understanding of Three.js and enough experience to start your own projects.

As a bonus, we will also learn how to use the 3D software Blender to be able to create our own models.

Is this course for you?

The course is beginner friendly

You don't need to have done WebGL or Three.js before.

This training is intended for absolute beginners and will explain the basics before tackling more advanced topics.

You don't have to be good at mathemathics.

Yes, we're going to do mathematics, but at a simple level and we will explain how it works with drawings and practice slowly.

You don't need to know how to use 3D software.

Together we will learn the basics of the 3D software Blender to create a model and import it into our scene.

You don't need to be good at JavaScript.

All you need are JavaScript basics like variables, objects, arrays, loops, functions and events. We will learn the rest together.

You don't need a crazy ass computer.

In some lessons, we will tickle performance limits, but we will also learn how to handle and optimize our code to get a good frame rate.

Additional

  • 09. Geometries - Please ignore mention to "Webpack" in the videos. 
  • 15. Light -  Please ignore mention to "Webpack" in the videos.
  • 16. Shadows -  Please ignore mention to "Webpack" in the videos.
  • 17.  Haunted House - Please ignore mention to "Webpack" in the videos.
  • 23.  Raycaster and Mouse Events - This lesson was moved from position 20 to 23. A new section has been added at the end of this lesson and this section requires knowledge from the Imported Model lesson. For this reason, the lesson has been moved from position 20 to position 23.

    Make sure you didn't miss anything.

  • 27. Shaders -  Please ignore mention to "Webpack" in the videos.

  • 28. Shader patterns -  Please ignore mention to "Webpack" in the videos.
  • 29. Raging sea -  Please ignore mention to "Webpack" in the videos.
  • 30. Animated galaxy - Please ignore mention to "Webpack" in the videos.
  • 31. Modified materials  - Please ignore mention to "Webpack" in the videos.
  • 39. Adding details to the scene  - Please ignore mention to "Webpack" in the videos.
  • 41. First React Application  -  Everytime you see a .js file in the video, please use .jsx instead. 
  • 42. First React Three Fiber Application - Everytime you see a .js file in the video, please use .jsx instead.
  • 43. R3F and Drei - Everytime you see a .js file in the video, please use .jsx instead.
  • 44. Debug a R3F application - Everytime you see a .js file in the video, please use .jsx instead.
  • 45. Environment and Staging with R3F - Everytime you see a .js file in the video, please use .jsx instead.
  • 46. Load models with R3F - Everytime you see a .js file in the video, please use .jsx instead.
  • 47. 3D Text with R3F - Everytime you see a .js file in the video, please use .jsx instead.
  • 48. Portal Scene with R3F - Everytime you see a .js file in the video, please use .jsx instead.
  • 49. Mouse Events with R3F - Everytime you see a .js file in the video, please use .jsx instead.
  • 50. Post-processing with R3F - Everytime you see a .js file in the video, please use .jsx instead.
  • 51. Fun and Simple Portfolio with R3F - Everytime you see a .js file in the video, please use .jsx instead.
  • 52. Physics with R3F - Everytime you see a .js file in the video, please use .jsx instead.
  • 53. Create a game with R3F - Everytime you see a .js file in the video, please use .jsx instead.

Who teaches Three.js Journey - The ultimate Three.js course? Bruno Simon

Bruno Simon thumbnail

Bruno Simon is a French creative-developer best known for Three.js Journey — the canonical paid course on the Three.js library and one of the most successful independent developer-education products of the last decade. His personal website (bruno-simon.com), a 3D Mario-Kart-style portfolio rendered with Three.js, is widely cited as a benchmark of what's possible with WebGL in the browser.

His CourseFlix listing carries Three.js Journey — The Ultimate Three.js Course. Material is paid and aimed at front-end developers building 3D experiences on the open web rather than in a game engine.

What lessons are included in Three.js Journey - The ultimate Three.js course?

This is a demo lesson (10:00 remaining)

You can watch up to 10 minutes for free. Subscribe to unlock all 67 lessons in this course and access 10,000+ hours of premium content across all courses.

View Pricing
0:00
/
#1: Introduction
All Course Lessons (67)
#Lesson TitleDurationAccess
1
Introduction Demo
35:24
2
What is WebGL and why use Three.js
23:56
3
First Three.js Project
01:19:28
4
Transform objects
46:12
5
Animations
30:27
6
Cameras
57:55
7
Fullscreen and resizing
30:41
8
Geometries
35:01
9
Debug UI
48:17
10
Textures
01:14:58
11
Materials
01:21:20
12
3D Text
44:30
13
Go live
24:30
14
Lights
42:03
15
Shadows
01:00:45
16
Haunted House
01:15:49
17
Particles
49:52
18
Galaxy Generator
01:08:47
19
Scroll based animation
01:23:02
20
Physics
01:57:23
21
Imported models
01:07:38
22
Raycaster and Mouse Events
01:07:31
23
Custom models with Blender
01:59:46
24
Environment map
01:49:34
25
Realistic render
01:12:22
26
Code structuring for bigger projects
03:19:41
27
Shaders
02:17:58
28
Shader patterns
01:49:25
29
Raging sea
01:15:33
30
Animated galaxy
01:14:12
31
Modified materials
51:55
32
Coffee Smoke
01:25:08
33
Hologram
01:21:19
34
Fireworks
01:47:28
35
Lights Shading
01:17:09
36
Raging Sea Shading
57:03
37
Halftone Shading
56:05
38
Earth
01:40:43
39
Particles Cursor Animation
01:48:08
40
Particles Morphing
01:35:12
41
GPGPU Flow Field Particles
02:23:00
42
Wobbly Sphere
01:16:27
43
Sliced Model
01:04:00
44
Procedural Terrain
01:24:19
45
Post-processing
01:36:40
46
Performance tips
01:12:25
47
Intro and loading progress
49:54
48
Mixing HTML and WebGL
58:08
49
Creating a scene in Blender
02:04:52
50
Baking and exporting the scene
02:11:58
51
Importing and optimizing the scene
46:56
52
Adding details to the scene
01:34:52
53
What are React and React Three Fiber
25:50
54
First React Application
04:23:02
55
First R3F Application
02:05:24
56
Drei
01:14:15
57
Debug
51:44
58
Environment and Staging
02:02:07
59
Load models
01:29:58
60
3D Text
59:14
61
Portal Scene
41:55
62
Mouse Events
47:15
63
Post-processing
01:53:21
64
Fun and Simple Portfolio
51:21
65
Physics
02:11:34
66
Create a game
04:01:51
67
The End
03:50
Unlock unlimited learning

Get instant access to all 66 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.

Learn more about subscription

What courses are similar to Three.js Journey - The ultimate Three.js course?

Frequently asked questions

What prerequisites do I need before enrolling in this course?
The course is designed for both beginners and more advanced developers. However, having some basic knowledge of JavaScript and familiarity with web development concepts will be beneficial. The course starts with fundamental topics such as 'What is WebGL and why use Three.js' and gradually progresses to more complex subjects like 'Shaders' and 'Performance tips'.
What kind of projects will I build during the course?
Throughout the course, you will work on a variety of projects, including a 'Haunted House', a 'Galaxy Generator', and a 'Raging Sea'. You'll also create interactive animations, like a 'Coffee Smoke' and 'Fireworks', and learn to build realistic renders and custom models using Blender.
Who is the target audience for this course?
This course is aimed at web developers interested in creating 3D websites using WebGL and Three.js. It caters to both beginners who are new to 3D graphics and experienced developers seeking to deepen their understanding of Three.js and WebGL.
How does the depth and scope of this course compare to other Three.js courses?
The course is comprehensive, comprising 66 lessons with a total runtime of over 70 hours. It covers a wide range of topics from basic Three.js projects to advanced shader techniques and performance optimization, providing a thorough understanding of 3D web development.
What specific tools and platforms will I learn to use?
You will learn to use Three.js for creating 3D graphics, Blender for custom model creation, and React Three Fiber for integrating Three.js with React applications. Lessons on 'Drei', a helper library, and 'Post-processing' are also included.
What topics are not covered in this course?
The course does not cover advanced mathematical concepts in detail, nor does it provide extensive instruction on game development or virtual reality. The focus is primarily on web-based 3D graphics using Three.js and WebGL.
How much time should I dedicate to complete the course?
With a total runtime of over 70 hours, the course requires a significant time commitment. Depending on your pace, dedicating a few hours each week could allow you to complete the course in a few months. The lessons are structured to allow flexibility, so you can progress according to your own schedule.