
Become a Three.js developer
Everything you need in one place:
72 hours of video to go from absolute beginner to advanced Three.js developer.
Everything you need in one place:
72 hours of video to go from absolute beginner to advanced Three.js developer.
Joining Three.js Journey will give you lifetime access to a complete and easy to access course with 54 lessons.
Want to see what's included? Check out the video down below:
Each lesson begins with a starter folder to download.
Then, simply follow the tutorial!
If you don't like videos, each lesson is also available as text with screenshots, video previews, snippets with syntax coloration, etc.
Plus, you can slow down or speed up the videos!
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.
Illuminate your scene with various lights, start practicing environment creation and create millions of particles.
15 | Lights | sneak peek | 42mn |
16 | Shadows | sneak peek | 1h 01mn |
17 | Haunted House | sneak peek | 1h 15mn |
18 | Particles | sneak peek | 49mn |
19 | Galaxy Generator | sneak peek | 1h 08mn |
20 | Scroll based animation | sneak peek | 1h 23mn |
Using Three.js materials is great but creating your own is even better.
Learn the shader language to unleash the true power of WebGL and create stunning experiences!
28 | Shaders | sneak peek | 2h 17mn |
29 | Shader patterns | sneak peek | 1h 49mn |
30 | Raging sea | sneak peek | 1h 15mn |
31 | Animated galaxy | sneak peek | 1h 14mn |
32 | Modified materials | sneak peek | 51mn |
Learn how to create a cool scene using Blender and discover the baking technique to get the best looking lights and shadows.
37 | Creating a scene in Blender | sneak peek | 2h 04mn |
38 | Baking and exporting the scene | sneak peek | 2h 11mn |
39 | Importing and optimizing the scene | sneak peek | 46mn |
40 | Adding details to the scene | sneak peek | 1h 34mn |
Create your first scene and understand fundamentals like cameras, geometries, materials, textures.
Add a debug panel to tweak your environment and animate everything.
01 | Introduction | free | 35mn |
02 | What is WebGL and why use Three.js | free | 23mn |
03 | Basic scene | free | 36mn |
04 | Local Server | free | 41mn |
05 | Transform objects | sneak peek | 46mn |
06 | Animations | sneak peek | 30mn |
07 | Cameras | sneak peek | 57mn |
08 | Fullscreen and resizing | sneak peek | 30mn |
09 | Geometries | sneak peek | 35mn |
10 | Debug UI | sneak peek | 35mn |
11 | Textures | sneak peek | 1h 14mn |
12 | Materials | sneak peek | 1h 17mn |
13 | 3D Text | sneak peek | 44mn |
14 | Go live | free | 24mn |
Add physics to your world so that objects start to collide and stumble. Then import your own model made with Blender and make it look as realistic as possible.
21 | Physics | sneak peek | 1h 57mn |
22 | Imported models | sneak peek | 1h 07mn |
23 | Raycaster and Mouse Events | sneak peek | 1h 07mn |
24 | Custom models with Blender | sneak peek | 1h 59mn |
25 | Environment map | free new | 1h 49mn |
26 | Realistic render | sneak peek | 1h 16mn |
27 | Code structuring for bigger projects | sneak peek | 3h 19mn |
Once you know shaders, it's the opportunity to go even further and try new techniques.
But it's also important to make sure your projects are working on most devices by monitoring and optimising performance.
33 | Post-processing | sneak peek | 1h 36mn |
34 | Performance tips | sneak peek | 1h 12mn |
35 | Intro and loading progress | sneak peek | 49mn |
36 | Mixing HTML and WebGL | sneak peek | 58mn |
Did you know that Three.js integrates well in React?
Thanks to React Three Fiber (R3F) you can create awesome Three.js experiences in React with just a few lines of code.
41 | What are React and React Three Fiber | free | 25mn |
42 | First React Application | sneak peek | 4h 23mn |
43 | First R3F Application | sneak peek | 2h 05mn |
44 | Drei | sneak peek | 1h 14mn |
45 | Debug | sneak peek | 51mn |
46 | Environment and Staging | sneak peek | 2h 02mn |
47 | Load models | sneak peek | 1h 29mn |
48 | 3D Text | sneak peek | 59mn |
49 | Portal Scene | sneak peek | 41mn |
50 | Mouse Events | sneak peek | 47mn |
51 | Post-processing | sneak peek | 2h 04mn |
52 | Fun and Simple Portfolio | sneak peek | 51mn |
53 | Physics | sneak peek | 2h 11mn |
54 | Create a game | sneak peek | 4h 01mn |
Bruno Simon is a French creative developer specialized in WebGL. He has worked on many projects for renowned clients to create interactive 3D experiences accessible to everyone from their browser.
Bruno has been teaching web development and WebGL in various schools for more than 7 years, making him a pedagogical trainer, alternating theory and practice.
This training is intended for absolute beginners and will explain the basics before tackling more advanced topics.
Yes, we're going to do mathematics, but at a simple level and we will explain how it works with drawings and practice slowly.
Together we will learn the basics of the 3D software Blender to create a model and import it into our scene.
All you need are JavaScript basics like variables, objects, arrays, loops, functions and events. We will learn the rest together.
In some lessons, we will tackle performance limits, and learn how to handle and optimize our code to get good frame rates.
Even if the course is beginner friendly, you need to know JavaScript basics like variables, objects, arrays, loops, functions, conditions and events.
The code editor used in the lessons is Visual Studio Code but you can use any editor you like.
The browser used in the lessons is Chrome but you can use any browser you like. However, it is recommended to use one with a good developer tools panel like Chrome or Firefox.
Eventually, you will have to install Blender, but the software is free and works on all major OS.
Yes, thanks to the React Three Fiber renderer, we can write Three.js application directly in React.
And it doesn't stop there. React Three is a huge ecosystem with many tools and features that will improve your developer's life.
It's so big that a whole chapter is dedicated to the topic.
And if you don't know React, the course includes a 4 hours long lesson that will teach you the basics of React.
With the course, you will also get access to a members-only Discord server. If you get stuck or you don't understand a specific part of a lesson, you can share your problem to get help.
The lessons are only available in English without subtitles.
But it's a slow and easily understandable English.
At the bottom left of the video, you can see slides containing the main information of what is being said during the course.
All the lessons are available as text right below the video with the exact same content (screenshots, code snippets, video previews, etc.)
Finally, if it's going too fast, you can slow down the video.
Yes, you can gift the course to someone else by clicking on this link.
You can pick an option between letting us email the gift to the receiver or you can share the gift yourself.
You'll receive an invoice by email and the receiver won't have access to your billing information.
The first lessons are free! Have a look and see for yourself if you like the content.
And if it's not enough, the beginning of every other lesson is also free.
If you are not happy with the course, whatever the reason is, you can ask for a refund at any time by sending an email at contact@threejs-journey.com.
Following the refund, your account will be deleted.
The price of the course has already been calculated to be as low as possible in order to be accessible for everyone and the VAT is included.
You pay only once and get access to all the lessons, a members-only Discord server and upcoming updates!
Still, if it's too expensive for you, discounts might happen at some occasions. Follow @bruno_simon on Twitter to be alerted.
No! Once you feel comfortable, you can start working on your personal experiences by yourself. You won't have to wait until the end of the course, but obviously, you will be able to jump back to the course at any time where you left it.
And if you struggle on any project, whether it is personal or professional, the Three.js Journey community will always be happy to help.
Yes! Each lesson comes with a quiz. Completing all quizzes will grant you access to a public certificate that you can print or share with the world.
Failing on answering a quiz will result in a few minutes time out, letting you time to find the information before answering again.
If your company bought the course and the company VAT number is in the EU, you can ask for a VAT refund.
To do that, after buying the course, go to your account settings and fill the VAT refund request form. Information will be reviewed and proof that you work at the company might be requested.
Once you've bought the course, you get access to an invoice. You can add any additional data you need on the document.