Login
Start learning now

The Best Way to
Learn Three.js

Bruno Simon by Bruno Simon

Have you ever wanted to create stunning 3D websites?

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

17,967 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 39 lessons.

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

5
chapters
39
lessons
45
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.

02

Classic techniques

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

7 lessons — 7h 06mn
  • 15 Lights 43mn
  • 16 Shadows 1h 00mn
  • 17 Haunted House 1h 15mn
  • 18 Particles 49mn
  • 19 Galaxy Generator 1h 08mn
  • 20 Raycaster 45mn
  • 21 Scroll based animation 1h 23mn
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 28mn
  • 27 Shaders 2h 17mn
  • 28 Shader patterns 1h 49mn
  • 29 Raging sea 1h 15mn
  • 30 Animated galaxy 1h 14mn
  • 31 Modified materials 51mn
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 40mn
  • 01 Introduction 18mn
  • 02 What is WebGL and why use Three.js 23mn
  • 03 Basic scene 36mn
  • 04 Webpack 36mn
  • 05 Transform objects 46mn
  • 06 Animations 30mn
  • 07 Cameras 57mn
  • 08 Fullscreen and resizing 30mn
  • 09 Geometries 35mn
  • 10 Debug UI 38mn
  • 11 Textures 1h 14mn
  • 12 Materials 1h 22mn
  • 13 3D Text 44mn
  • 14 Go live 24mn
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.

5 lessons — 9h 41mn
  • 22 Physics 1h 57mn
  • 23 Imported models 1h 07mn
  • 24 Custom models with Blender 1h 59mn
  • 25 Realistic render 1h 16mn
  • 26 Code structuring for bigger projects 3h 19mn
05

Extra

Creating a cool WebGL experience is useless if most computers can’t run it.
Learn how to monitor and optimize performance to achieve the best possible frame rate.

9 lessons — 11h 21mn
  • 32 Post-processing 1h 36mn
  • 33 Performance tips 1h 12mn
  • 34 Intro and loading progress 49mn
  • 35 Mixing HTML and WebGL 58mn
  • 36 Creating a scene in Blender 2h 04mn
  • 37 Baking and exporting the scene 2h 11mn
  • 38 Importing and optimizing the scene 48mn
  • 39 Adding details to the scene 1h 34mn
  • 40 The end 3mn

Meet Bruno Simon

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

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 tackle performance limits, and learn how to handle and optimize our code to get good frame rates.

17,967 Students have joined the course!
Have a look at their works

Stefan Reifenberg @Reyfenberg 2022/05/19 08:54

Hey @Andersonmancini, @dasTom, @0xca0a I tried to recreate the three graces in #svelte using svelte-cubed. Looking pretty cool so far except the model material is not working.
three-graces-svelte-cubed.vercel.app
#creativecoding #webgl #threejsJourney #threejs #madewithsvelte @SvelteSociety pic.twitter.com/I3mdpqFLO7

@bruno_simon @threejs ADDED A GENERATE FUNCTION to randomize the values of DAT-UI #threejs #threejsJourney pic.twitter.com/X5CcHErvC8

Jay Linsell @JayLinsell 2022/05/16 06:41

Physics are in!

It's a rough start, but they're in, and I'm having too much fun with this now. Also decided to go back to the orignial blue/purple colours, and even added face paint.

#threejs #blender #threejsJourney #eyeNeedsFixing pic.twitter.com/IjUdXZAqPA

Another site iteration: Modeling + texturing all of it from scratch for better performance & to prove to myself I can do it. Got this part looking great in @threejs 👌 I'm still wowed by all I've learned.

#threejsJourney #webgl #webdev #Blender3d #Substance3DPainter #javascript pic.twitter.com/wGMYqXucAE

Anderson Mancini @Andersonmancini 2022/05/17 15:02

From the first time I saw this work by @dasTom I was fascinated. I wanted to show that creating it using #threejs is not as difficult as it looks. It has only 240 lines of code. The live link and the source code will be published this week. #creativecoding #webgl #threejsJourney pic.twitter.com/bE9716heur

Veerbal Singh @veerbal01 2022/05/12 13:40

Today, I just learnt to load 3d models and play animations inside it.

Check it out.
cat-3d-animated-modal.vercel.app

Made using #threejs #threejsJourney #javascript pic.twitter.com/pA9ppBT80g

Michal Zalobny @michalzalobny 2022/05/18 08:21

Seamless page transitions in @nextjs using @threejs

Most logic is written in pure javascript, I have only used react-transition-group to get the handle on the page's mounts and unmounts

Live: tinyurl.com/4rb2s5vc
Repo: tinyurl.com/bdmaa24w

#threejsJourney #React pic.twitter.com/aZbus33ENA

JUAN CARLOS VARGAS DELGADILLO @JUANCAR90980225 2022/05/16 10:36

Hi everyone!!
I'm excited to present my first big project in #threejs I hope you like it our project.🌎🐾

✨ Thanks to @bruno_simon and it's wonderful course #threejsjourney 🤩

I'm currently looking for a job 🤭 in case there is anyone interested 🫡
#javascript #webgl pic.twitter.com/1hjcLuvy0o

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.

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 offer 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.

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.

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 45 hour complete course