Login
Start learning now

The Best Way to
Learn Three.js

Bruno Simon by Bruno Simon

Do you wish to start a career as a WebGL developer?

Have you ever wanted to craft stunning 3D websites?

In 71 hours of video, this course will teach you the secrets to create the coolest WebGL websites with Three.js whether you are a beginner or an advanced developer.

Student hat 29,498 Students already enrolled and they love it
Get good at Three.js with only one course

Joining Three.js Journey will give you lifetime access to a complete and easy to access course with 53 lessons.

Want to see what's included? Check out the video down below:

7
chapters
53
lessons
71
hours of videos
00:00/00:00TIME LEFT
3:22
00:03:22
Bruno Simon talking about the course

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!

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.

3D Telescope illustration
02

Classic techniques

Illuminate your scene with various lights, start practicing environment creation and create millions of particles.

6 lessons — 6h 20mn
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
3D Scanner treadmill illustration
04

Shaders

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!

5 lessons — 7h 29mn
27 Shaders sneak peek 2h 17mn
28 Shader patterns sneak peek 1h 49mn
29 Raging sea sneak peek 1h 15mn
30 Animated galaxy sneak peek 1h 14mn
31 Modified materials sneak peek 51mn
3D portal scene illustration
06

Portal Scene

Learn how to create a cool scene using Blender and discover the baking technique to get the best looking lights and shadows.

4 lessons — 6h 39mn
36 Creating a scene in Blender sneak peek 2h 04mn
37 Baking and exporting the scene sneak peek 2h 11mn
38 Importing and optimizing the scene sneak peek 48mn
39 Adding details to the scene sneak peek 1h 34mn
3D Arcade illustration
01

Basics

Create your first scene and understand fundamentals like cameras, geometries, materials, textures.
Add a debug panel to tweak your environment and animate everything.

14 lessons — 9h 59mn
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 22mn
13 3D Text sneak peek 44mn
14 Go live free 24mn
3D Drone illustration
03

Advanced techniques

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.

6 lessons — 10h 48mn
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 Realistic render sneak peek 1h 16mn
26 Code structuring for bigger projects sneak peek 3h 19mn
3D Server illustration
05

Extra

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.

4 lessons — 4h 37mn
32 Post-processing sneak peek 1h 36mn
33 Performance tips sneak peek 1h 12mn
34 Intro and loading progress sneak peek 49mn
35 Mixing HTML and WebGL sneak peek 58mn
3D React logo with gizmo illustration
07

React Three Fiber

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.

14 lessons — 24h 18mn
40 What are React and React Three Fiber free new 25mn
41 First React Application sneak peek new 4h 23mn
42 First R3F Application sneak peek new 2h 05mn
43 Drei sneak peek new 1h 14mn
44 Debug sneak peek new 51mn
45 Environment and Staging sneak peek new 2h 03mn
46 Load models sneak peek new 1h 29mn
47 3D Text sneak peek new 59mn
48 Portal Scene sneak peek new 41mn
49 Mouse Events sneak peek new 47mn
50 Post-processing sneak peek new 2h 04mn
51 Fun and Simple Portfolio sneak peek new 51mn
52 Physics sneak peek new 2h 10mn
53 Create a game sneak peek new 4h 10mn
Bruno Simon
Ball
Pyramid
Cube

Meet Bruno Simon
Hi emoji

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.

Bruno's projects

Is this course for you?

The course is beginner friendly

Geometry illustration
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.

Calculator illustration
You don't have to be good at mathematics.

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

3D axes illustration
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.

JavaScript illustration
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.

Computer illustration
You don't need a crazy ass computer.

In some lessons, we will tackle performance limits, and learn how to handle and optimize our code to get good frame rates.

29,498 Students have joined the course!
Have a look at their works

Practising writing #glsl with a sea shader
#bigweekend on in the background took over me tweaking the variables :D
#threejsjourney #threejs pic.twitter.com/s7NSdyHVQw

Made a Portal Version of @bruno_simon #threejsjourney
I still have to improve a bit the texture 😟 #threejs #ReactJS
portal-phi-sooty.vercel.app pic.twitter.com/bCKPN2hH5B

Tweet image

Created a minecraft portal scene in Three.js while learning particles and textures! :)

#threejs #threejsJourney #Minecraft #webgl pic.twitter.com/P8XrmLekGo

Photo of masaya_web Masaya | web designer
Masaya | web designer @masaya_web 2023/05/23 05:30

Done adding Materials!
Next step: Baking

#threejsJourney #blender pic.twitter.com/FgApG6eTvN

Tweet image
Photo of Andersonmancini Anderson Mancini
Anderson Mancini @Andersonmancini 2023/05/22 14:34

⚡️Live: ultimate-lens-flare.vercel.app
I'm happy to announce that my new Ultimate Lens Flare component for react three fiber is ready😍. I can't wait to see what you create with it. I hope you like it. Please share it so we can reach more developers #threejs #threejsJourney #r3f pic.twitter.com/090Ck7WvaK

I've been taking a break from #threejsjourney to try and make a decent third-person character controller for the web.

#threejs #webgamedev pic.twitter.com/A31GtPEDxv

Small experiment using Blender armature and Three.js.

Hand created thanks to sens_3d tutorial on youtube✌️

hand-armature.vercel.app

#threejsJourney #threeJS #webgl #creativecoding pic.twitter.com/Bh2Ch6kbiX

Tweet image
Photo of masaya_web まさや | コーダー
まさや | コーダー @masaya_web 2023/05/22 05:40

見よう見まねでMaterial前まで完成。
ここからSceneの追加まで楽しみです。

#threejsJourney #blender pic.twitter.com/6LWT40aQlp

Tweet image
Discover more

Some professionals talking about the course

Frequently Asked Questions

What are the prerequisites?

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.

Can I use Three.js with React?

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.

What if I need help?

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.

I don't speak English very well. Will it be a problem?

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.

Can I offer it?

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.

Can I test the lessons?

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.

What if I don't like the course?

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.

Is there a way to get a discount?

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.

Do I have to do the entire course to start my own project?

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.

Do you provide a certificate of completion?

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.

Can I ask for a VAT refund?

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.

Can I have an invoice?

Once you've bought the course, you get access to an invoice. You can add any additional data you need on the document.

Start learning now

Only $95 for a 71 hour complete course

Students hat