30-Day Three.js Challenge

A structured, hands-on learning program designed to take you from beginner to confident Three.js developer in one month. Each day you’ll complete a small, focused “kata” — a short coding exercise — that builds your skills step-by-step. Three.js Documentation.

Day	Tag	Kata	Focus
1	proj-1	Hello Cube	Create a spinning cube with `MeshBasicMaterial`.
2	proj-2	Colors & Materials	Try `MeshPhongMaterial`, `MeshStandardMaterial`, and basic colors.
3		Lighting 101	Experiment with Ambient, Directional, and Point lights.
4		Orbit Controls	Add camera controls using `OrbitControls`.
5		Multiple Objects	Render a simple scene with multiple shapes.
6		Resize Handling	Make your scene responsive to browser resize.
7	proj-7	Review & Mini Scene	Build a small “room” scene using all skills so far.
8		Click to Change Color	Detect clicks on an object and change its color.
9	day-09	Mouse Hover Highlight	Highlight an object on mouseover using raycasting.
10	day-10	Keyboard Controls	Move an object with arrow keys/WASD.
11	day-11	Animate Properties	Use GSAP or Three.js animations to animate rotation/scale.
12	day-12	Camera Switcher	Toggle between multiple cameras (e.g., perspective & orthographic).
13	day-13	Basic Physics	Simulate simple gravity with `y` position changes.
14	day-14	Mini Game	A ball that you can “catch” by clicking.
15	day-15	Texture Mapping	Apply an image texture to a cube.
16	day-16	Normal & Bump Maps	Add realistic surface detail using normal maps.
17	day-17	Environment Map	Use a skybox or HDRI for reflections.
18	day-18	GLTF Model Loading	Load a `.glb` or `.gltf` model using `GLTFLoader`.
19	day-19	Animated Model	Load an animated model and trigger animations.
20	day-20	Custom Geometry	Create a shape from scratch using `BufferGeometry`.
21	day-21	Mini Scene with Assets	A desk scene with textured models.
22	day-22	Particles 101	Make a starfield using `PointsMaterial`.
23	day-23	Fog & Atmosphere	Add depth with fog.
24	day-24	Basic Shaders	Write a simple GLSL shader for color changes.
25	day-25	Shader Effects	Create a gradient or wave effect on a mesh.
26	day-26	Post-Processing	Add bloom or depth of field with `EffectComposer`.
27	day-27	Physics Engine	Integrate Cannon.js or Ammo.js for real physics.
28	day-28	Procedural Generation	Create terrain or objects with random data.
29	day-29	Full Small Project	Build a small interactive scene (e.g., solar system).
30	day-30	Portfolio Polish	Review, clean up code, and upload all katas to GitHub/CodePen.

30-Day Three.js Challenge - Fundamentals

Additional Small Projects & Tests