Free through lesson 3

Three.js Fundamentals Course

From the minimal scene/camera/renderer setup to lighting and shadows, textures and PBR, loading glTF models, mouse controls, post-processing, and publishing. Over 20 lessons, you'll work up to showing a model you made in Blender in the browser. All code was actually rendered in headless Chromium, with the values shown read straight from the result.

Start from lesson 1 Unlock every course

Curriculum

The 20 lessons are split into 5 chapters. We recommend working through them in order starting from Chapter 1, but feel free to skip around to whatever interests you. * Three.js loads from a CDN, so it can't run in the browser here. Save the code to an HTML file and open it through a local server such as python3 -m http.server. This course assumes you already know the material in the JavaScript course.

Chapter 1 — Rendering 3D in the Browser (lessons 1–4)

You'll render a cube with just a scene, camera, and renderer, and check what shape (geometry) and appearance (material) actually are in numbers. You'll finish by moving objects through position, rotation, and parent-child transforms, redrawing every frame in a loop.

1

Your First Scene (Scene, Camera, Renderer)

The minimal Three.js setup: a scene, camera, and renderer drawing one cube. Start with no build step using importmap and a CDN, and check the result by reading a rendered pixel's color.

Free
2

Geometry (Shape Is Vertices and Triangles)

See that a 3D shape (geometry) is just vertices and triangles, by counting them on a box, sphere, cone, and torus. Covers how segment count trades smoothness for weight.

Free
3

Materials (3 Kinds Visible Without a Light)

Of the materials that give shape its appearance, meet the 3 kinds visible without a light — Basic, Normal, and wireframe — and why a normal material's front face comes out (128, 128, 255) blue.

Free
4

Animation and Transforms (Position, Rotation, Parenting)

The 3 transforms — position, rotation, scale — parent-child via groups, and a redraw loop using requestAnimationFrame. Why speed should be driven by a Clock's elapsed time.

🔒 Basic

Chapter 2 — Lighting and Appearance (lessons 5–8)

You'll add lights to shade objects, then make things look convincing with shadows, textures, PBR materials, and environment maps. You'll be able to fix the classic trip-ups — pitch black, no shadow, dull colors — by getting at their actual causes.

5

Lights (Ambient and Directional)

Basic lighting for MeshStandardMaterial, which needs light: ambient plus directional. Confirm with measured values how a face's orientation changes brightness, and how to pick intensity.

🔒 Basic
6

Shadows (Renderer, Caster, Receiver)

Get shadows working by lining up 3 pieces — renderer, caster, receiver. Measure the light/dark difference by scanning the floor, and fix shadow blockiness and cutoff with mapSize and shadow.camera.

🔒 Basic
7

Textures (Color Space and Magnification)

Try out textures — pasting an image onto a surface — with a checkerboard pattern drawn on a canvas. Two things to watch for: SRGBColorSpace on color textures, and NearestFilter for crisp edges.

🔒 Basic
8

PBR and Environment Maps (Looking Like Metal)

Represent materials with PBR's metalness and roughness, making them look metallic by reflecting an environment map built with PMREM and RoomEnvironment. Why metal without one sinks into black.

🔒 Basic

Chapter 3 — Bringing In Models (lessons 9–12)

You'll load glTF (.glb) files, and get a handle on export settings from Blender and how to line up scale and coordinate systems. You'll finish by playing back animations baked into a model.

9

Loading glTF (GLTFLoader)

Load glTF (.glb), the standard 3D format for the web, with GLTFLoader, and confirm what's inside gltf.scene and gltf.animations by counting them. Why it can't be loaded over file://.

🔒 Basic
10

Exporting glTF from Blender

Settings for exporting .glb from Blender, and glTF's two conventions — +Y is up, units are meters. How to check that a loaded model's orientation and colors haven't come out wrong.

🔒 Basic
11

Scale and Coordinate Systems (Measure and Match)

Measure a loaded model's size with Box3 (a bounding box), then scale it uniformly by target height ÷ current height. Tips for avoiding distortion and applying scale twice by mistake.

🔒 Basic
12

Model Animation (AnimationMixer)

Play back an animation baked into glTF with AnimationMixer and clipAction. Why forgetting mixer.update every frame leaves it frozen, and how to check a pose at a fixed time with setTime.

🔒 Basic

Chapter 4 — Making It Interactive (lessons 13–16)

You'll add mouse controls with OrbitControls, identify clicked objects with raycasting, and tune parameters live with lil-gui. You'll finish with responsive handling that holds up no matter how the screen size changes.

13

OrbitControls (Rotating the Camera with a Mouse)

Add drag-to-rotate, zoom-in, and zoom-out camera controls with OrbitControls from addons. Why inertia (enableDamping) requires calling update every frame, and how to simulate a drag to check it.

🔒 Basic
14

Raycasting (Identifying What Got Clicked)

Cast a ray from a screen position and find what it hits first — raycasting. Convert mouse coordinates to NDC (y flips), and check hit detection by aiming at left, right, and empty space.

🔒 Basic
15

Controlling Parameters with lil-gui

Adjust color, rotation, and metalness live from an lil-gui panel. Add it to importmap, collect values into params, bridge them to the scene with onChange, and know how to handle it when publishing.

🔒 Basic
16

Responsive Handling (Camera Aspect and Quality)

Responsive handling that re-syncs camera.aspect, updateProjectionMatrix, and setSize whenever the screen size changes. How capping setPixelRatio at 2 balances sharpness against performance.

🔒 Basic

Chapter 5 — Finishing It as a Piece (lessons 17–20)

You'll make things glow with a Bloom post-process, lighten the load by cutting draw calls, and add a loading screen. You'll finish by publishing it and showing what you built to the world.

17

Post-Processing (Making Light Bloom)

Post-processing on an already-rendered image. Stack RenderPass, UnrealBloomPass, and OutputPass in an EffectComposer to bloom light, and compare brightness outside a sphere with and without it.

🔒 Basic
18

Performance (Cutting Draw Calls)

Measure draw call count, a major slowdown cause, with renderer.info, and merge 100 boxes into one InstancedMesh to cut calls from 100 to 1. Rule: always check the numbers before fixing anything.

🔒 Basic
19

Loading Screens (LoadingManager)

Track multiple loads' progress and completion with LoadingManager, and show a progress bar and loading screen. The classic trip-up: onLoad never fires if you forget to hand the manager to your loader.

🔒 Basic
20

Publishing (Shipping as Static Files)

Final lesson: combine model, lights, shadows, controls, and environment map into one scene and publish as static files. Decide whether to ship three via CDN or bundle it, plus a pre-launch checklist.

🔒 Basic

Once you've finished all 20 lessons, move on to Blender to make your own 3D models. A membership unlocks every course.