Three.js Journey - The ultimate Three.js course
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.
More
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.
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.
Watch Online Three.js Journey - The ultimate Three.js course
| # | Title | Duration |
|---|---|---|
| 1 | Introduction | 35:24 |
| 2 | What is WebGL and why use Three.js | 23:56 |
| 3 | First Three.js Project | 01:19:28 |
| 4 | Transform objects | 46:12 |
| 5 | Animations | 30:27 |
| 6 | Cameras | 57:55 |
| 7 | Fullscreen and resizing | 30:41 |
| 8 | Geometries | 35:01 |
| 9 | Debug UI | 48:17 |
| 10 | Textures | 01:14:58 |
| 11 | Materials | 01:21:20 |
| 12 | 3D Text | 44:30 |
| 13 | Go live | 24:30 |
| 14 | Lights | 42:03 |
| 15 | Shadows | 01:00:45 |
| 16 | Haunted House | 01:15:49 |
| 17 | Particles | 49:52 |
| 18 | Galaxy Generator | 01:08:47 |
| 19 | Scroll based animation | 01:23:02 |
| 20 | Physics | 01:57:23 |
| 21 | Imported models | 01:07:38 |
| 22 | Raycaster and Mouse Events | 01:07:31 |
| 23 | Custom models with Blender | 01:59:46 |
| 24 | Environment map | 01:49:34 |
| 25 | Realistic render | 01:12:22 |
| 26 | Code structuring for bigger projects | 03:19:41 |
| 27 | Shaders | 02:17:58 |
| 28 | Shader patterns | 01:49:25 |
| 29 | Raging sea | 01:15:33 |
| 30 | Animated galaxy | 01:14:12 |
| 31 | Modified materials | 51:55 |
| 32 | Coffee Smoke | 01:25:08 |
| 33 | Hologram | 01:21:19 |
| 34 | Fireworks | 01:47:28 |
| 35 | Lights Shading | 01:17:09 |
| 36 | Raging Sea Shading | 57:03 |
| 37 | Halftone Shading | 56:05 |
| 38 | Earth | 01:40:43 |
| 39 | Particles Cursor Animation | 01:48:08 |
| 40 | Particles Morphing | 01:35:12 |
| 41 | GPGPU Flow Field Particles | 02:23:00 |
| 42 | Wobbly Sphere | 01:16:27 |
| 43 | Sliced Model | 01:04:00 |
| 44 | Procedural Terrain | 01:24:19 |
| 45 | Post-processing | 01:36:40 |
| 46 | Performance tips | 01:12:25 |
| 47 | Intro and loading progress | 49:54 |
| 48 | Mixing HTML and WebGL | 58:08 |
| 49 | Creating a scene in Blender | 02:04:52 |
| 50 | Baking and exporting the scene | 02:11:58 |
| 51 | Importing and optimizing the scene | 46:56 |
| 52 | Adding details to the scene | 01:34:52 |
| 53 | What are React and React Three Fiber | 25:50 |
| 54 | First React Application | 04:23:02 |
| 55 | First R3F Application | 02:05:24 |
| 56 | Drei | 01:14:15 |
| 57 | Debug | 51:44 |
| 58 | Environment and Staging | 02:02:07 |
| 59 | Load models | 01:29:58 |
| 60 | 3D Text | 59:14 |
| 61 | Portal Scene | 41:55 |
| 62 | Mouse Events | 47:15 |
| 63 | Post-processing | 01:53:21 |
| 64 | Fun and Simple Portfolio | 51:21 |
| 65 | Physics | 02:11:34 |
| 66 | Create a game | 04:01:51 |
Similar courses to Three.js Journey - The ultimate Three.js course
Impress everyone with a 3D particle scene with Blender and Three.js
Build fancy landing pages with React and Threejs
Merging WebGL and HTML worlds
Shaders for the Web
Advanced FrontEnds
