Build: The Front Wheel

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

tread

The pattern of blocks and grooves on a tyre's surface. Here it is a texture, not geometry.

hub and spokes

The hub is the wheel's centre on the axle. The spokes are thin rods from it to the rim.

axle

The line the wheel turns around. For the front wheel: (0.58, 0.35, 0), along z.

ready promise

A promise stored on the bike that resolves when its textures have loaded.

1. 1

   Stronger tread

   In createTyreMaterial add material.normalScale.set(2, 2); after material.normalMap = normal;. The grooves between the tread blocks look deeper. Above about 3 they look fake.

2. 2

   Dim the studio

   Set scene.environmentIntensity = 0.05 in loadEnvironment. In a screenshot the stand drops from bright to grey, the frame darkens a little, and the rim and spokes lose their shine and look like dull dark metal. The environment adds light to every Standard material, and metal depends on it most.

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

import * as THREE from "three";
import { HDRLoader } from "three/addons/loaders/HDRLoader.js";
import { RoomEnvironment } from "three/addons/environments/RoomEnvironment.js";

const HDR_URL = "/data/3d/hdr/studio_small_08_1k.hdr";

export function createScene() {
  const scene = new THREE.Scene();
  scene.background = new THREE.Color("#0b1118");
  return scene;
}

// Light and reflections from an image. If the file cannot load, the built-in room is used, so metal never goes black.
export async function loadEnvironment(scene, renderer) {
  const pmrem = new THREE.PMREMGenerator(renderer);
  let environment;
  try {
    const hdr = await new HDRLoader().loadAsync(HDR_URL);
    hdr.mapping = THREE.EquirectangularReflectionMapping;
    environment = pmrem.fromEquirectangular(hdr).texture;
    hdr.dispose(); // the 1024 x 512 original is not needed once prepared
  } catch (error) {
    console.warn("HDR environment failed, using RoomEnvironment:", error.message);
    environment = pmrem.fromScene(new RoomEnvironment(), 0.04).texture;
  }
  pmrem.dispose(); // frees the generator's work buffers, not the environment it made
  scene.environment = environment;
  scene.environmentIntensity = 0.4; // the lights are still on: the image adds to them
  return environment;
}

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

1. 1

   What this phase solves (Ama's problem). The showroom's tubes were right but flat. Ama wanted rubber with a tread, and metal that shines. Lena's phone needed a known memory cost. Today all three are answered by two textures, one HDR file and a front wheel.

2. 2

   What it adds. In src/objects/bike.js: createTyreMaterial() (a Standard material with the rubber colour and normal maps, tiled 30 × 2), createWheel(name, x, tyreMaterial) (tyre, rim, hub, eight spokes) and the front wheel, a group named "front-wheel" at the front axle (0.58, 0.35, 0), whose tyre mesh is "front-wheel-tyre". In src/world/scene.js: loadEnvironment(scene, renderer), which prepares the studio HDR with PMREMGenerator and falls back to RoomEnvironment. src/main.js calls it.

3. 3

   How it plugs in. This build assumes the files from Phases 4 and 5: the chain stays and seat stays are pairs of tubes at z = ±0.055, the fork is a group named fork (a head-tube and the fork-legs pair down to the front axle), and src/world/lights.js has the shadow-casting key light. The file keeps Phase 5's countTriangles() and the loop that makes every mesh cast a shadow, so the new wheel casts one too. One change from Phase 5: the frame paint goes back to metalness: 0.4, because there is an environment to reflect now. lights.js and the renderer are untouched. The environment adds to the lights, so environmentIntensity is 0.4; with shadows on, lower it further if the floor looks washed out.

4. 4

   Loading and failure. createBike() returns at once with plain dark rubber; the textures arrive a moment later and the tyre changes to tread (bike.userData.ready is a promise for that moment, used by the loading state in Phase 10). If a texture fails, a console warning appears and the tyre stays plain rubber. If the HDR fails, the built-in room is used. Memory: two 1024 textures are 10.7 MiB with mipmaps, and the environment adds a prepared map.

5. 5

   What the showroom can do now: it has a wheel with a visible tread and shining spokes; chrome parts reflect a studio; a failed asset does not break it. Still missing: the rear wheel (Phase 7), controls to look around (Phase 7), picking (Phase 8), a visible loading state (Phase 10) and compressed textures (Topic 10.5).

• Add textured, lit parts to the bike and name them

• Load assets without blocking the start, and fail softly

• Set an environment with a fallback and balance its intensity

• Say what this phase added and what the next phases still need