Build: The Fork and Showroom Lighting

New words in this topic, in plain English. Come back here whenever one feels fuzzy.

key light

The main light, the one that makes the shadow. Here it is the directional light named key-light.

fill light

A soft light from all around that keeps the shadow side from going black. Here it is the hemisphere light.

head tube

The short, wide tube at the front of the frame in which the fork's steering tube turns.

fork

The two legs that hold the front wheel's axle, joined to the head tube at the top.

1. 1

   Switch the shadow off

   In the example set key.castShadow = false in lights.js. The first frame prints 12 (shadow pass included) instead of 22: no shadow pass, so 10 draw calls fewer. The shadow on the stand is gone. The last line then throws Uncaught TypeError: Cannot read properties of null (reading 'width'): with no shadow pass key.shadow.map was never created.

2. 2

   Look at the fork

   Open the scene tree and expand bike then fork: you see head-tube and fork-legs, which holds fork-legs-left and fork-legs-right. Three meshes make the fork, and countTriangles counts 64 triangles for each (a 16-sided cylinder): 192.

Your lumen-3d project after this topic. Click a file to see it in full.

import * as THREE from "three";

// Two lights. The fill (a hemisphere light) keeps the shadow side from going black.
// The key (a directional light) is the "sun" of the showroom: it is the only light that casts a shadow.
export function createLights(scene) {
  scene.add(new THREE.HemisphereLight("#ffffff", "#334455", 1.2));

  const key = new THREE.DirectionalLight("#ffffff", 2.4);
  key.name = "key-light";
  key.position.set(2, 4, 3);
  key.castShadow = true;
  key.shadow.mapSize.set(1024, 1024); // one 1024 x 1024 depth picture, 4 MiB
  // The shadow camera is a box around the light's view. It must hold the stand and the bike (about 3 m across), and nothing more.
  Object.assign(key.shadow.camera, { left: -1.5, right: 1.5, top: 1.5, bottom: -1.5, near: 1, far: 10 });
  key.shadow.camera.updateProjectionMatrix();
  key.shadow.bias = -0.0005; // a little less strict than the depth picture, so a surface does not shadow itself
  key.shadow.normalBias = 0.02; // and its depth is read a little way out along the surface's normal
  scene.add(key);
  return key;
}

Errors are the best teachers. Make each change, read the error, guess what went wrong, then reveal the answer.

1. 1

   The problem this solves: the story's complaint was a cardboard cut-out. After this build the bike has a key light that makes a shadow on the stand, a fill that keeps the shadow from going black, and a tone curve that keeps the orange honest. It also has its fork, so the frame is complete at the front.

2. 2

   What it adds. src/world/lights.js now holds the two lights: a HemisphereLight fill and a DirectionalLight key named key-light, with its shadow settings (1024 × 1024, a 3 m box, bias -0.0005, normalBias 0.02). src/world/renderer.js turns on shadowMap and sets NeutralToneMapping. src/objects/showroom.js sets stand.receiveShadow = true. src/objects/bike.js gains createFork() (a head tube and a pair of fork legs, in a group named fork) and makes every bike mesh cast a shadow. Two tidy-ups: the frame's key points become top-level constants (the fork needs FRONT_AXLE) and createBike() stops printing triangle counts (Phase 4's console lines); countTriangles stays exported and the example prints the total. The light intensities move from Phase 3's 1.5 and 2 to 1.2 and 2.4.

3. 3

   The bike material. The bike's paint is a MeshStandardMaterial. Its metalness drops from 0.4 to 0.1 and roughness rises to 0.4: until Phase 6 adds an environment, a strongly metallic frame would look dark (Topic 5.3).

4. 4

   How it plugs in. createLights(scene) keeps its Phase 3 signature, so main.js does not change. We start from Phase 4's showroom and change only these four files.

5. 5

   What the showroom can do now that it could not before: light the bike with a key and a fill, cast a shadow of the whole bike on the stand, keep the orange true under bright light and show the fork. The bike has 640 triangles and the first frame costs 22 draw calls: 12 to draw the scene plus 10 for the shadow map.

6. 6

   What is still missing. The wheels (Phase 6 front, Phase 7 rear). An environment image, so metal can reflect (Phase 6). Camera controls (Phase 7). The shadow falls on the stand only, because there is no floor yet: the stand is the whole ground.

• Your showroom has a fill and a key light, and the stand shows the bike's shadow

• renderer.shadowMap.enabled is true and tone mapping is Neutral

• bike holds a fork with head-tube and fork-legs

• You can say what every changed file adds