Three.js Journey

Lessons

My working files as I go through the course — each lesson is a standalone scene.

13 lessons so far

23 Advanced Techniques

Custom Models with Blender

Modelling in Blender and exporting to glTF, then loading the result with Draco compression.

BlenderglTF ExportDRACOLoader

Open lesson

22 Advanced Techniques

Raycaster and Mouse Events

Casting rays to detect what the pointer is over, for hover and click interaction with objects in the scene.

RaycasterPointer EventsHit Testing

Open lesson

21 Advanced Techniques

Imported Models

Loading glTF models — plain, binary, embedded and Draco-compressed — and playing their baked animations.

GLTFLoaderDracoAnimationMixer

Open lesson

20 Advanced Techniques

Physics

Rigid bodies falling and colliding on a floor, with a physics world stepped alongside the render loop.

Cannon-esCollisionsRigid Bodies

Open lesson

19 Advanced Techniques

Scroll Based Animation

A one-page portfolio where the scroll position drives the camera and the objects on screen.

ScrollMeshToonMaterialParallax

Open lesson

18 Classic Techniques

Galaxy Generator

A procedurally generated galaxy, tweakable in real time from lil-gui.

PointsBufferGeometrylil-gui

Open lesson

17 Classic Techniques

Particles

Rendering thousands of sprites with Points and BufferGeometry.

PointsBufferGeometryPointsMaterial

Open lesson

16 Classic Techniques

Haunted House

The full scene build — house, graves and fog, with PBR texture sets for the walls, roof, floor and bushes.

PBR TexturesFogTimer

Open lesson

15 Classic Techniques

Shadows

Directional and ambient light over a sphere and floor plane, with lil-gui controls for light position and material response.

DirectionalLightMeshStandardMateriallil-gui

Open lesson

14 Classic Techniques

Lights

Ambient and point lights over a standard material, shading a sphere, cube, torus and floor plane.

AmbientLightPointLightMeshStandardMaterial

Open lesson

12 Basics

3D Text

TextGeometry with a loaded font and matcap materials, surrounded by a field of scattered donuts.

TextGeometryFontLoaderMatcap

Open lesson

11 Basics

Materials

Every built-in material side by side — from MeshBasic to MeshPhysical with transmission, lit by an HDR environment map.

MeshPhysicalMaterialRGBELoaderlil-gui

Open lesson

04 Basics

Transform Objects

Position, rotation and scale on a mesh, with an axes helper for orientation.

MeshPositionAxesHelper

Open lesson