The Best Way to Learn Three.js

Have you ever wanted to create stunning 3D websites?

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

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 —

01Introduction

02What is WebGL and why use Three.js

03Basic scene

04Webpack

05Transform objects

06Animations

07Cameras

08Fullscreen and resizing

133D Text

Classic techniques

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

7 lessons

15Lights

16Shadows

21Scroll based animation

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

22Physics

23Imported models

24Custom models with Blender

25Realistic render

26Code structuring for bigger projects

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

27Shaders

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

32Post-processing

33Performance tips

34Intro and loading progress

35Mixing HTML and WebGL

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

36Creating a scene in Blender

37Baking and exporting the scene

38Importing and optimizing the scene

39Adding details to the scene

I want this!