Learn & build with Three.js
Learn how a 3D scene works by changing one. Start with a cube, build up to lighting and interaction, then explore the GPU with instancing and shaders.
A practical learning path
15 runnable lessons, each with an explanation and a challenge. No external models or images required.
- Build a scene: meshes, local transforms, nested groups, and camera controls.
- Shape its appearance: lighting, real shadows, material comparisons, textures, and reflections.
- Make it respond: time-based animation, pointer picking, and local glTF model loading.
- Work with the GPU: instanced meshes, particle buffers, and custom shader programs.
Code beside a live scene
The playground provides a renderer, camera, and orbit controls so you can focus on the concept. Use snippets for small experiments or module projects for local imports and supported Three.js addons. A WebGL 2 capable browser is required to render the examples.