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.
Three.js Journey - The ultimate Three.js course
90h 46m 32s
English
Paid
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.
Additional
- 09. Geometries - Please ignore mention to "Webpack" in the videos.
- 15. Light - Please ignore mention to "Webpack" in the videos.
- 16. Shadows - Please ignore mention to "Webpack" in the videos.
- 17. Haunted House - Please ignore mention to "Webpack" in the videos.
- 23. Raycaster and Mouse Events - This lesson was moved from position 20 to 23. A new section has been added at the end of this lesson and this section requires knowledge from the Imported Model lesson. For this reason, the lesson has been moved from position 20 to position 23.
Make sure you didn't miss anything.
27. Shaders - Please ignore mention to "Webpack" in the videos.
- 28. Shader patterns - Please ignore mention to "Webpack" in the videos.
- 29. Raging sea - Please ignore mention to "Webpack" in the videos.
- 30. Animated galaxy - Please ignore mention to "Webpack" in the videos.
- 31. Modified materials - Please ignore mention to "Webpack" in the videos.
- 39. Adding details to the scene - Please ignore mention to "Webpack" in the videos.
- 41. First React Application - Everytime you see a .js file in the video, please use .jsx instead.
- 42. First React Three Fiber Application - Everytime you see a .js file in the video, please use .jsx instead.
- 43. R3F and Drei - Everytime you see a .js file in the video, please use .jsx instead.
- 44. Debug a R3F application - Everytime you see a .js file in the video, please use .jsx instead.
- 45. Environment and Staging with R3F - Everytime you see a .js file in the video, please use .jsx instead.
- 46. Load models with R3F - Everytime you see a .js file in the video, please use .jsx instead.
- 47. 3D Text with R3F - Everytime you see a .js file in the video, please use .jsx instead.
- 48. Portal Scene with R3F - Everytime you see a .js file in the video, please use .jsx instead.
- 49. Mouse Events with R3F - Everytime you see a .js file in the video, please use .jsx instead.
- 50. Post-processing with R3F - Everytime you see a .js file in the video, please use .jsx instead.
- 51. Fun and Simple Portfolio with R3F - Everytime you see a .js file in the video, please use .jsx instead.
- 52. Physics with R3F - Everytime you see a .js file in the video, please use .jsx instead.
- 53. Create a game with R3F - Everytime you see a .js file in the video, please use .jsx instead.
About the Author: Bruno Simon
At first, I wanted to make something original, entertaining, playable and understandable.
As I’ve been using WebGL a lot last years and as a huge gamer, going for a game concept was an obvious choice. Since I was a kid, I’ve always liked playing with remote controlled cars and I’ve spent lots of time playing Micro Machine on Playstation. So as a result, I decided to build a universe where you could drive around with a remote car
Watch Online 66 lessons
0:00
/ #1: Introduction
All Course Lessons (66)
| # | Lesson Title | Duration | Access |
|---|---|---|---|
| 1 | Introduction Demo | 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 |
Unlock unlimited learning
Get instant access to all 65 lessons in this course, plus thousands of other premium courses. One subscription, unlimited knowledge.
Learn more about subscription