Master Three.js: 100 Exercises from Basics to Advanced

JS beginners welcome! Start instantly on CodeSandbox. Master scenes, GLSL, Physics, & WebXR through 100 exercises.

What you’ll learn
✓ Gain a systematic understanding of Three.js from fundamentals to advanced applications and be able to implement them.
✓ Develop interactive 3D content independently
✓ Mastering Advanced Visual Effects and Shader Programming
✓ Develop mathematical thinking skills and spatial awareness in 3D space

Requirements
● Basic Knowledge of HTML/CSS
● JavaScript Basics
● Basic understanding of mathematics

Description
This course contains the use of artificial intelligence.

Course Overview

“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.

Step 6: Introduction to Shader Programming (51-60)

Unlock the power of the GPU using GLSL. Create waving water surfaces, holograms, and dissolve (disintegration) effects from scratch.

Step 7: Post-Production (61-70)

Learn screen-wide effects—Bloom, Glitch, Depth of Field, and RGB Shift—to create cinematic visual beauty.

Step 8: Environmental Expressions & Special Effects (71-80)

Reflections, refractions, and mirror worlds. Polish pro-level techniques like realistic car paint and divine “God Rays.”

Step 9: Interaction and Game Logic (81-90)

Implement essential game development features such as mouse dragging, click detection (Raycaster), TPS cameras, and character control.

Step 10: Integrated Projects (91-100)

Bring it all together with Physics engines (Cannon.js), HTML label integration, and WebXR (AR) app development. Finally, build a massive “Galaxy Simulation” featuring tens of thousands of shining stars.

Target Audience

• Those with basic knowledge of HTML/CSS/JavaScript.

• Front-end engineers who want to incorporate rich 3D expressions into websites.

• Those interested in Creative Coding or Generative Art.

• Those wanting to learn the basics of game development using web technologies.

• Practical learners who prefer to learn by doing rather than reading.

Would you like me to create a catchy “Short Summary” or a “Prerequisites” section to go along with this translation?

Who this course is for
■ Web Frontend Engineer
■ Design Engineer
■ Students and Programming Learners