“I want to learn Three.js, but I can’t figure out how to build things just by reading the documentation…” “I want to implement the kind of stunning 3D visuals I see on award-winning websites!”
This Hands-On Three.js Master Course is designed exactly for you. Through a total of 100 practical exercises, you will thoroughly learn Three.js from the fundamentals to advanced applications by getting your hands dirty. We aim to develop the “intuition for graphics programming” and “implementation skills” that cannot be acquired simply by reading textbooks, achieving this through an overwhelming amount of practice.
What You Will Learn
By completing this course, you will be able to perform the following:
- Three.js Fundamentals: Complete understanding of the Scene, Camera, and Renderer mechanics.
- Materials & Lights: Realistic textures (PBR), shadow control, and lighting techniques.
- Geometry Manipulation: From basic shapes to custom meshes and waving animations via vertex manipulation.
- Texture Techniques: Image mapping, environment maps, video textures, and skybox creation.
- Particle Systems: Creating rain, snow, starry skies, explosion effects, and magic circles.
- Shaders (GLSL): Original visual effects (glow, noise, distortion) using shader language.
- Physics: Collision detection, gravity, domino effects, and driving games using Cannon.js.
- Performance Optimization: Reducing draw calls, memory management, and instancing.
- Modern Integration: Integration with HTML/CSS and Augmented Reality (AR) experiences via WebXR.
- Creative Expression: Generative art and galaxy simulations.
Curriculum Structure (10 Progressive Sections)
The course proceeds in 10 steps (10 exercises each), organized by order of difficulty.
- Step 1: Welcome to the 3D World (01-10): Start by rendering a simple box. Solidify the basics of rotation, movement, scaling, and the animation loop.
- Step 2: Lighting and Shadow Play (11-20): Master various light sources like PointLights and SpotLights. Learn how to cast shadows (Shadow Maps) to add depth to your scenes.
- Step 3: Geometry and the Shape of Thought (21-30): Explore the creation of complex 3D models—polyhedrons, torus knots, and extruded shapes—while exploring their mathematical beauty.
- Step 4: Texture and Realism (31-40): Metal, glass, plastic. Master PBR (Physically Based Rendering) materials to express photorealistic textures.
- Step 5: Vertices and Polygons (41-50): Manipulate the “vertices” that act as the DNA of 3D models. Challenge yourself with Instancing (drawing tens of thousands of objects at once) and custom geometry.
