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
Three.js Journey - The ultimate Three.js course is a 66-lesson 90 hours 46 minutes self-paced course by Bruno Simon. Have you ever wanted to create stunning 3D websites ?
Course facts
- Lessons
- 66
- Duration
- 90 hours 46 minutes
- Level
- All levels
- Language
- English
- Updated
- Instructor
- Bruno Simon
- Price
- Premium
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.
Who teaches Three.js Journey - The ultimate Three.js course? 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.
What lessons are included in Three.js Journey - The ultimate Three.js course?
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 subscriptionWhat courses are similar to Three.js Journey - The ultimate Three.js course?
-
Updated 3y agoBuild 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.38m -
Updated 9mo agoThree.js & GameDev
By: SimonDevStart with the basics of Three.js and gradually move on to advanced topics such as streaming infinite worlds, GPU memory optimization.47h 38m -
Updated 2y agoThree.js & WebGL 3D Programming Crash Course (VR, OpenGL)
By: UdemyLearn how to create interactive 3D experiences such as web application and games. A step by step process is used to show everything from setting up to creating1h 32m
Frequently asked questions
What prerequisites do I need before enrolling in this course?
The course is designed for both beginners and more advanced developers. However, having some basic knowledge of JavaScript and familiarity with web development concepts will be beneficial. The course starts with fundamental topics such as 'What is WebGL and why use Three.js' and gradually progresses to more complex subjects like 'Shaders' and 'Performance tips'.
What kind of projects will I build during the course?
Throughout the course, you will work on a variety of projects, including a 'Haunted House', a 'Galaxy Generator', and a 'Raging Sea'. You'll also create interactive animations, like a 'Coffee Smoke' and 'Fireworks', and learn to build realistic renders and custom models using Blender.
Who is the target audience for this course?
This course is aimed at web developers interested in creating 3D websites using WebGL and Three.js. It caters to both beginners who are new to 3D graphics and experienced developers seeking to deepen their understanding of Three.js and WebGL.
How does the depth and scope of this course compare to other Three.js courses?
The course is comprehensive, comprising 66 lessons with a total runtime of over 70 hours. It covers a wide range of topics from basic Three.js projects to advanced shader techniques and performance optimization, providing a thorough understanding of 3D web development.
What specific tools and platforms will I learn to use?
You will learn to use Three.js for creating 3D graphics, Blender for custom model creation, and React Three Fiber for integrating Three.js with React applications. Lessons on 'Drei', a helper library, and 'Post-processing' are also included.
What topics are not covered in this course?
The course does not cover advanced mathematical concepts in detail, nor does it provide extensive instruction on game development or virtual reality. The focus is primarily on web-based 3D graphics using Three.js and WebGL.
How much time should I dedicate to complete the course?
With a total runtime of over 70 hours, the course requires a significant time commitment. Depending on your pace, dedicating a few hours each week could allow you to complete the course in a few months. The lessons are structured to allow flexibility, so you can progress according to your own schedule.