Master Three.js: 100 Exercises from Basics to Advanced

Master the initial setup of scene, camera, and renderer in three.js to display a completely black 3d space that fills the browser window, the starting point for all 3.js projects.

Display a green cube in the 3d scene by combining box geometry with a mesh basic material, then add it to the scene and adjust the camera.

Learn to manipulate a cube in three.js by adjusting x, y, z coordinates or using cube.position.set within the coordinate system, where x is right, y is up, z toward you.

practice rotates a cube in three.js using radians, applying 45-degree rotations on the x and y axes to reveal top and side faces, with scene, camera, and renderer rendering.

Master three.js introduces animation loops using requestAnimationFrame to render at about 60 frames per second, placing renderer.render inside an animate loop and starting with a single call.

Review how a simple animation loop updates cube rotation by 0.01 radians on x and y, then renders each frame to create smooth, diagonal movement and depth in Three.js.

Move the camera freely using orbit controls, an add-on imported from 3/.examples/.jsm/.controls/.OrbitControls, enabling mouse rotation, zoom, and panning with damping and updates in the animation loop.

Place two distinct objects side by side as independent meshes, a green cube on the left and a blue wireframe sphere on the right, and animate them with opposite rotations.

Enable the renderer's shadow map, cast shadows with a directional light, and configure castShadow and receiveShadow on objects for real-time shadow display.

Learn how to apply textures to 3D objects using texture mapping, load an image with a texture loader, and map it onto plain geometry with a MeshBasicMaterial.

Texture a spinning box geometry in 3.js with a texture map, using TextureLoader and default UV coordinates to verify the image covers all faces.

Learn to display a clean line-drawing cube using wireframe geometry and line segments, extracting edges from the original geometry, with LineBasicMaterial in white or cyan, avoiding diagonal lines.

Create cylinder geometry in three.js by setting top radius, bottom radius, height, and radial segments to form cup-like shapes, then rotate it in animate to reveal 3D form.

Master three.js grouping to animate celestial motion: place Earth as a child of a central group, rotate the group for revolution, and rotate the Earth for axial rotation.

Click a cube to change its color randomly using a raycaster. Learn how to convert mouse coordinates to normalized coordinates and cast a ray from the camera to intersect objects.

Master Three.js hover interactions by using a raycaster in the animation loop to detect mouse over the cube, turning it red on hover and resetting to green when not hovering.

Master smooth cube movement in three.js by applying linear interpolation (lerp) with a 0.05 factor to ease toward the clicked position, using a raycaster and an invisible floor.

Learn particle system basics in three.js by drawing thousands of points with buffer geometry and float32 arrays, creating fast snow or starlit sky effects.

Use fog to create depth by blending objects with the background color through aerial perspective, matching fog color to the background, and animate 30 cubes as the camera advances.

Load six images with the cube texture loader in order, set as scene background, and apply envMap with roughness 0 and metalness 1 on a sphere to create mirror-like reflections.

Explore applying normal maps in three.js by loading the water surface texture from the official 3.js sample, assigning it to meshStandardMaterial's normalMap, and adjusting normalScale for realistic, detailed lighting.

Load a purple normal map on a 4x4 plane to convert rgb values into per-pixel normals, producing dynamic water-like highlights with a moving light and adjustable normal scale and roughness.

Use Three.js GLTFLoader to asynchronously load external models in the background, apply ambient and directional lighting, scale the model, and add it to the scene.

Learn to animate a dynamic canvas texture in three.js by updating the canvas in real time and setting texture.needsUpdate. Build a cube with a digital clock showing current time.

Update a canvas texture in three.js by clearing and redrawing each frame, drawing time in red, and set needsUpdate to true after drawing to reflect changes on the rotating cube.

Create a triangle from a BufferGeometry and a Float32Array of three vertices (x, y, z), register them with setAttribute, and render a double‑sided mesh in the scene.

Master the instancing technique in three.js by using instanced mesh to draw thousands of identical objects with a single draw call, leveraging a dummy object and matrices.

Create a sprite billboard in three.js that always faces the camera, using a sprite material with a texture, then scale and add it to the scene.

Load a sprite texture with a texture loader and create a sprite material to display the image, preserving its original color, while the sprite remains a billboard facing the camera.

Demonstrate making a plane billboard face the camera with one line of code: plane.lookAt(camera.position), using a texture on a double-sided plane in an animated scene.

Explore moving along a 3D path with CatMoleRoamCurve3, display the curve via GetPoints, and animate a sphere using Curve.GetPoint in a looping 0–1 progression.

Create and visualize a smooth Catmull-Rom curve as a looping course, then animate a red sphere along it using curve.getPoint with a progress parameter, including optional lookAt direction.

Master camera control in Three.js by following a closed Catmull-Rom curve. Position the camera on the path and look slightly ahead to create a roller-coaster feel.

Learn to write GLSL vertex and fragment shaders, integrate them with three.js shader material, and render a rotating red cube while mastering projection, model-view matrices, and color declarations.

Explore shader gradients by using varying variables to pass UV from the vertex shader to the fragment shader, then blend colors with mix for a red-to-blue gradient on a plane.

Define a function named random inside the fragment shader to generate 0–1 noise using fract and sine of a dot product, display a sandstorm texture, and animate it with UTime.

Explore how to create a moving sandstorm by generating pseudo random noise with a GLSL function tied to time. Learn how uniforms, vertex and fragment shaders drive the animation.

Master the hologram effect in Three.js by building an animated, semi-transparent pale blue glow with scrolling horizontal scanlines, additive blending, and noise to mimic a sci-fi projection.

Explore a hologram-like shader in Three.js by combining Fresnel lighting, additive blending, and a time-animated scan line, controlled via vertex and fragment shaders.

Apply a dissolve shader to extinction effects using a noise texture and brightness as hit points, with a progress value erasing pixels via discard and revealing a burning edge glow.

Learn a simplified water shader that uses vertex wave height (v elevation) and fragment color blending with mix to render dark blue deep areas, bright surface areas, and semi-transparent water.

Review the bloom post-processing pipeline in three.js, using effect composer, render pass, and unreal bloom pass to produce glow. Explore strength, radius, and threshold to control light bleed.

Master Three.js glitch effects by implementing the glitch pass to generate digital noise, color inversion, and block noise, with an optional go wild setting for violent, perpetual disorder.

Master Three.js with a hands-on glitch post-processing tutorial that uses EffectComposer, RenderPass, and GlitchPass to create digital signal errors, block noise, screen shifts, and a cyberpunk mood.

Explore a chromatic aberration rgb shift post-processing effect in three.js using effect composer, shader pass, and rgb shift shader to create a retro, psychedelic look.

Apply the Bokeh Pass for post-processing depth of field, tune focus, aperture, and max blur to separate a scene of cubes from z 20 to -50.

Build a scene with 100 cubes to test depth of field. Use an effect composer and the bokeh pass to create focus-based blur by tuning focus, aperture, and max blur.

Apply toon shading with a gradient map on a MeshToon material, using directional light, a 4-pixel canvas gradation, and nearest filtering to produce crisp, discrete color steps.

Learn planar reflections in three.js by using the Reflector class to render real-time mirror-like surfaces, with guidance on clip bias, texture resolution, and setting a gray tone.

Learn to create glass with Three.js mesh physical material, enabling transmission and refraction through thickness. Build a glass sphere that uses an environment map and an IOR setting.

Master three.js demonstrates glass-like effects by applying equirectangular refraction mapping to an environment map, distorting the background through a sphere with a refraction ratio around 0.98 for lightweight visuals.

Explore subsurface scattering (SSS) in Three.js using Mesh Physical Material to craft glowing textures via transmission, thickness, attenuation color, and attenuation distance, achieving jelly or jade-like translucency with backlit lighting.

Learn to create pseudo-volumetric light (god rays) in three.js by rendering a translucent cone from a spotlight, driven by a shader material with additive blending and proper depth settings.

Create a lightweight volumetric light effect using a semi-transparent cone and shader to produce god rays, aligned to a spotlight and animated to sway with a sine wave.

Explore lens flare in three.js with the LensFlare class, building a sun-like point light, adding main and ghost elements, and testing depth occlusion against a dark background.

Explore morphing techniques by animating 2000 particles between a box and a sphere using buffer geometry, a Fibonacci sphere arrangement, and linear interpolation in the animation loop.

Develop a 3d product viewer configurator where HTML buttons change colors and smoothly move the camera toward a target via lerp inside the animation loop, using a grouped chair model.

Master three.js by building a solar system with hierarchical structure, using parent-child relationships to establish Sun, EarthOrbit, Earth, MoonOrbit, and Moon, enabling automatic revolutions and rotations.

Build a mini racing game foundation in three.js by making a car that accelerates with keyboard input, then slows gradually via inertia and friction, updating position with velocity and direction.

Master a 3x3 lights-out puzzle in Three.js by using Raycaster to click tiles, toggle clicked tile and its top, bottom, left, and right neighbors, and verify all tiles turn blue.

Explore a 3x3 color-toggling puzzle built with Three.js. Clicks flip a tile and its neighbors, using raycasting and stored tile indices to manage state.

Implement a third-person camera that chases a character from behind using a spherical coordinate system with radius, theta, and phi. Rotate via mouse and keep the player centered.

Implement a free-rotating third-person camera in Three.js using spherical coordinates (theta, phi, radius), controlled by mouse drag, with constrained vertical angle and a look-at target on the player.

Link 3D item pickups to a web inventory by overlaying an HTML UI on the page, using raycasting, item.userData, and an items array to manage visible and stored items.