Three.js Journey
Practice builds and my working files from the course — each one a standalone scene.
My own builds, outside the course sequence.
2 practices
Three.js work for the Your Perfect Partner page — the TCO (total cost of ownership) campaign.
Open →
Recreating a shader-driven ocean/water waves effect from scratch.
Open →
The course exercises, in order.
33 lessons so far
A translucent hologram effect — animated scan stripes and a Fresnel rim, drawn with additive blending.
Open →
Smoke rising from a baked coffee cup — a scrolling Perlin texture distorted and faded in a custom shader.
Open →
Injecting custom GLSL into a built-in material with onBeforeCompile, keeping its lighting while twisting the geometry.
Open →
The galaxy rebuilt on a custom shader — stars spun around the centre and drawn as soft points on the GPU.
Open →
An animated sea built from layered Perlin noise in the vertex shader, coloured by wave height.
Open →
Drawing stripes, gradients, stars and grids straight from UV coordinates in the fragment shader.
Open →
Writing GLSL by hand — a vertex and fragment shader on a ShaderMaterial, driven by custom uniforms and attributes.
Open →
Breaking a single long script into classes — an Experience singleton, an event emitter and a resource loader.
Open →
Tuning tone mapping, shadows and texture encoding until a loaded model sits believably in its environment.
Open →
Lighting a scene with its surroundings — cube maps, HDR and EXR environments, and a real-time cube camera.
Open →
Modelling in Blender and exporting to glTF, then loading the result with Draco compression.
Open →
Casting rays to detect what the pointer is over, for hover and click interaction with objects in the scene.
Open →
Loading glTF models — plain, binary, embedded and Draco-compressed — and playing their baked animations.
Open →
Rigid bodies falling and colliding on a floor, with a physics world stepped alongside the render loop.
Open →
A one-page portfolio where the scroll position drives the camera and the objects on screen.
Open →
A procedurally generated galaxy, tweakable in real time from lil-gui.
Open →
Rendering thousands of sprites with Points and BufferGeometry.
Open →
The full scene build — house, graves and fog, with PBR texture sets for the walls, roof, floor and bushes.
Open →
Directional and ambient light over a sphere and floor plane, with lil-gui controls for light position and material response.
Open →
Ambient and point lights over a standard material, shading a sphere, cube, torus and floor plane.
Open →
TextGeometry with a loaded font and matcap materials, surrounded by a field of scattered donuts.
Open →
Every built-in material side by side — from MeshBasic to MeshPhysical with transmission, lit by an HDR environment map.
Open →
Position, rotation and scale on a mesh, with an axes helper for orientation.
Open →