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
Bruno Simon is a French creative-developer best known for Three.js Journey — the canonical paid course on the Three.js library and one of the most successful independent developer-education products of the last decade. His personal website (bruno-simon.com), a 3D Mario-Kart-style portfolio rendered with Three.js, is widely cited as a benchmark of what's possible with WebGL in the browser.
His CourseFlix listing carries Three.js Journey — The Ultimate Three.js Course. Material is paid and aimed at front-end developers building 3D experiences on the open web rather than in a game engine.
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 subscriptionCourse content
66 lessons · 90h 46m 32sShow all 66 lessons
- 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
Related courses
-
Impress everyone with a 3D particle scene with Blender and Three.js
By: AwwwardsWhen you work as a developer you know that the budget for outsourcing and finding the perfect content creator for your project may be a long and unpleasant proc2 hours 11 minutes 56 seconds -
Build fancy landing pages with React and Threejs
By: Paul Henschel (0xca0a)This course teaches you how to add stunning flourishes to your sites with little code and complexity.38 minutes 9 seconds -
Merging WebGL and HTML worlds
By: AwwwardsYou learn how to mix WebGL scenes with your HTML page. You use site images and add smooth effects with Three.js to make each part feel linked.2 hours 30 minutes 37 seconds
Frequently asked questions
What is Three.js Journey - The ultimate Three.js course about?
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 .
Who teaches Three.js Journey - The ultimate Three.js course?
Three.js Journey - The ultimate Three.js course is taught by Bruno Simon. You can find more courses by this instructor on the corresponding source page.
How long is Three.js Journey - The ultimate Three.js course?
Three.js Journey - The ultimate Three.js course contains 66 lessons with a total runtime of 90 hours 46 minutes. All lessons are available to watch online at your own pace.
Is Three.js Journey - The ultimate Three.js course free to watch?
Three.js Journey - The ultimate Three.js course is part of CourseFlix's premium catalog. A CourseFlix subscription unlocks the full video player; the course description, table of contents, and preview information are available to everyone.
Where can I watch Three.js Journey - The ultimate Three.js course online?
Three.js Journey - The ultimate Three.js course is available to watch online on CourseFlix at https://courseflix.net/course/three-js-journey-the-ultimate-three-js-course. The page hosts every lesson with the integrated video player; no download is required.