The ultimate Three.js course is the name of a 3D website-building training course. Whether you are a beginner or a more professional developer, this course is the only course you need to learn WebGL with Three.js. Although this course is complete, it is completely accessible for beginners. In this course, we will start by exploring what WebGL is and why it is necessary to use the Three.js library. Then we explore the many components of this library and once the basics are covered, we move on to more advanced techniques for displaying millions of particles, adding physics, interactions, building a galaxy, animations, and more.
At the end of this course, you will have a deep understanding of the Three.js library and be ready to start your own project. As a bonus, in this course, you will also learn how to work with the Blender software to create your own models.
Features of The ultimate Three.js course:
- Getting to know the basics and basics of work such as working with cameras, materials, textures, etc.
- Working with classic techniques, lighting the environment, building the environment, and making millions of particles
- Advanced techniques include adding physics, importing models through Blender, and trying to make them realistic
- Learn the Shaders language to use the ultimate WebGL
- Checking and optimizing your work to achieve the best frame rate
Three.js Course details:
Publisher: Three.js Journey
Instructor: Bruno Simon
Education Level: Introductory to Advanced
Number of Lessons: 53
Three.js Course topics:
01 – Basics
01. Introduction 18:32
02. What is WebGL and why use Three.js | 23:56
03. Basic scene | 36:39
04. Webpack | 35:52
05. Transform objects | 46:12
06. Animations | 30:26
07. Cameras | 57:55
08. Fullscreen and resizing | 30:34
09. Geometries | 35:00
10. Debug UI | 38:21
11. Textures 01:14:48
12. Materials | 01:21:58
13. 3D Text | 44:00
14. Go live | 24:22
02 – Classic techniques
15. Lights | 43:32
16. Shadows | 01:00:44
17. Haunted House | 01:15:48
18. Particles | 49:51
19. Galaxy Generator | 01:08:47
20. Raycaster | 45:11
21. Scroll-based animation | 01:23:01
03 – Advanced techniques
22. Physics 01:57:23
23. Imported models | 01:07:37
24. Custom models with Blender 01:59:45
25. Realistic render | 01:19:45
26. Code structuring for bigger projects 03:19:30
04 – Shaders
27. Shaders | 02:16:43
28. Shader patterns | 01:49:25
29. Raging sea | 01:15:33
30. Animated galaxy | 01:13:56
31. Modified materials | 51:42
05 – Extra
32. Post-processing 01:26:22
33. Performance tips 01:12:24
34. Intro and loading progress | 49:54
35. Mixing HTML and WebGL | 58:07
06 – Portal Scene
36. Creating a scene in Blender 02:04:52
37. Baking and exporting the scene | 02:11:58
38. Importing and optimizing the scene | 48:17
39. Adding details to the scene | 01:34:51
07 – React Three Fiber
40. What are React and React Three Fiber | 25m
41. First React Application | 4h 14m
42. First R3F Application | 2h 05m
43. Drei | 1h 14m
44. Debug | 52m
45. Environment and Staging | 2h 02m
46. Load models | 1h 29m
47. 3D Text | 59m
48. Portal Scene | 47m
49. Mouse Events | 47m
50. Post-processing | 2h 05m
51. Fun and Simple Portfolio | 51m
52. Physics | 2h 10m
53. Create a game | 4h 10m
The code editor used in the lessons is Visual Studio Code, but you can use any editor you like.
The browser used in the lessons is Chrome, but you can use any browser you like. However, it is recommended to use one with a good developer tools panel like Chrome or Firefox.
At a point, you will have to install Blender, but the software is free and works on all major OS.
After Extract, view with your favorite Player.
Version 2021/5 compared to 2021/1, the number of 4 lessons and the approximate time of 7 hours have increased in content.
The 2021/12 version compared to 2021/5, the number of 3 lessons and the time of 5 hours and 7 minutes have increased in content.
The 2022/10 version compared to 2021/12 has increased the number of 13 lessons and about 25 hours of content.