The ultimate
Three.js course

Bruno Simon by Bruno Simon

Have you ever wanted to create stunning 3D websites?

Whether you are a beginner or a more advanced developer,
Three.js Journey is the only course you need to learn WebGL with Three.js.

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.

13 lessons — 9h 27mn
  • 01 Introduction 18mn
  • 02 What is WebGL and why using Three.js 23mn
  • 03 Basic scene 36mn
  • 04 Webpack 35mn
  • 05 Transforms objects 46mn
  • 06 Animations 30mn
  • 07 Cameras 57mn
  • 08 Fullscreen and resizing 30mn
  • 09 Geometries 48mn
  • 10 Debug UI 38mn
  • 11 Textures 1h 14mn
  • 12 Materials 1h 21mn
  • 13 3D Text 44mn
02

Classic technics

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

6 lessons — 5h 46mn
  • 14 Lights 46mn
  • 15 Shadows 1h 00mn
  • 16 Haunted House 1h 15mn
  • 17 Particles 49mn
  • 18 Galaxy Generator 1h 08mn
  • 19 Raycaster 45mn
03

Advanced technics

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.

4 lessons — 6h 24mn
  • 20 Physics 1h 57mn
  • 21 Imported models 1h 07mn
  • 22 Custom model with Blender 1h 59mn
  • 23 Realistic render 1h 19mn
04

Shaders

Using Three.js materials is great but creating your owns is even better.
Learn the shader language to unleash the true power of WebGL and create stunning looking experiences!

5 lessons — 7h 27mn
  • 24 Shaders 2h 16mn
  • 25 Shader patterns 1h 49mn
  • 26 Raging sea 1h 15mn
  • 27 Animated galaxy 1h 13mn
  • 28 Modified materials 51mn
05

Extra

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

5 lessons — 4h 30mn
  • 29 Post-processing 1h 26mn
  • 30 Performance tips 1h 12mn
  • 31 Intro and loading progress 49mn
  • 32 Mixing HTML and WebGL 58mn
  • 33 The end 3mn
Get good at Three.js with only one course

Subscribing to Three.js Journey will give you a lifetime access to a complete and easy to access course of 32 lessons.

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

5
chapters
32
lessons
33
hours of videos

Each lesson begins with a starter folder to download.
Then, simply follow the tutorial!

If you don't like video format, each lesson is also available as texts with screenshots, video previews, parts of code with syntax coloration, etc.

In plus, you can also 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.

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.

13 lessons — 9h 27mn
  • 01 Introduction 18mn
  • 02 What is WebGL and why using Three.js 23mn
  • 03 Basic scene 36mn
  • 04 Webpack 35mn
  • 05 Transforms objects 46mn
  • 06 Animations 30mn
  • 07 Cameras 57mn
  • 08 Fullscreen and resizing 30mn
  • 09 Geometries 48mn
  • 10 Debug UI 38mn
  • 11 Textures 1h 14mn
  • 12 Materials 1h 21mn
  • 13 3D Text 44mn
02

Classic technics

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

6 lessons — 5h 46mn
  • 14 Lights 46mn
  • 15 Shadows 1h 00mn
  • 16 Haunted House 1h 15mn
  • 17 Particles 49mn
  • 18 Galaxy Generator 1h 08mn
  • 19 Raycaster 45mn
03

Advanced technics

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.

4 lessons — 6h 24mn
  • 20 Physics 1h 57mn
  • 21 Imported models 1h 07mn
  • 22 Custom model with Blender 1h 59mn
  • 23 Realistic render 1h 19mn
04

Shaders

Using Three.js materials is great but creating your owns is even better.
Learn the shader language to unleash the true power of WebGL and create stunning looking experiences!

5 lessons — 7h 27mn
  • 24 Shaders 2h 16mn
  • 25 Shader patterns 1h 49mn
  • 26 Raging sea 1h 15mn
  • 27 Animated galaxy 1h 13mn
  • 28 Modified materials 51mn
05

Extra

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

5 lessons — 4h 30mn
  • 29 Post-processing 1h 26mn
  • 30 Performance tips 1h 12mn
  • 31 Intro and loading progress 49mn
  • 32 Mixing HTML and WebGL 58mn
  • 33 The end 3mn
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.

13 lessons — 9h 27mn
  • 01 Introduction 18mn
  • 02 What is WebGL and why using Three.js 23mn
  • 03 Basic scene 36mn
  • 04 Webpack 35mn
  • 05 Transforms objects 46mn
  • 06 Animations 30mn
  • 07 Cameras 57mn
  • 08 Fullscreen and resizing 30mn
  • 09 Geometries 48mn
  • 10 Debug UI 38mn
  • 11 Textures 1h 14mn
  • 12 Materials 1h 21mn
  • 13 3D Text 44mn
02

Classic technics

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

6 lessons — 5h 46mn
  • 14 Lights 46mn
  • 15 Shadows 1h 00mn
  • 16 Haunted House 1h 15mn
  • 17 Particles 49mn
  • 18 Galaxy Generator 1h 08mn
  • 19 Raycaster 45mn
03

Advanced technics

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.

4 lessons — 6h 24mn
  • 20 Physics 1h 57mn
  • 21 Imported models 1h 07mn
  • 22 Custom model with Blender 1h 59mn
  • 23 Realistic render 1h 19mn
04

Shaders

Using Three.js materials is great but creating your owns is even better.
Learn the shader language to unleash the true power of WebGL and create stunning looking experiences!

5 lessons — 7h 27mn
  • 24 Shaders 2h 16mn
  • 25 Shader patterns 1h 49mn
  • 26 Raging sea 1h 15mn
  • 27 Animated galaxy 1h 13mn
  • 28 Modified materials 51mn
05

Extra

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

5 lessons — 4h 30mn
  • 29 Post-processing 1h 26mn
  • 30 Performance tips 1h 12mn
  • 31 Intro and loading progress 49mn
  • 32 Mixing HTML and WebGL 58mn
  • 33 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, alterning 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 tickle performance limits, but we will also learn how to handle and optimize our code to get a good frame rate.

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

At a point, 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.

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 (including every country and also students). And it includes VAT, web hosting, video streaming, and incoming updates!

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 on your own. You won't have to wait until the end of the course, but obviously 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 community will always be happy to help.

The course
is almost ready...

It's only a matter of days!

For updates, you can follow Bruno Simon on Twitter, join the public Discord server or subscribe to the newsletter:

Discord

As a member of the Three.js Journey community, you also have access to a members-only server

Public

Members-only

If you're having trouble joining the members-only server, please contact an administrator at contact@threejs-journey.xyz.