Build: the Turntable and the Pedalling Crank

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

crankset

The pedal arms and the big front gear (chainring) that turn together on the bottom bracket.

chainring

The big toothed front gear. Ours has 44 teeth.

gear ratio

Teeth on the chainring divided by teeth on the rear gear: 44 / 16 = 2.75 wheel turns for each pedal turn.

updatable

Any object with a tick(delta) method, added to the loop.

1. 1

   Change the speed

   In the build example set bike.userData.speed = 5 (metres a second, 18 km/h) before the 60 steps. After 1 s the wheel has turned 5 / 0.352 / 2π = 2.26 turns.

2. 2

   Press the button

   Press Pause: the wheels and the crank stop together and the button reads "Resume animation". The page's camera controls keep working.

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

import * as THREE from "three";

const MAX_DELTA = 0.1; // seconds: one slow frame (a debugger stop, a heavy page) must not throw the world forward

// The render loop. Anything with a tick(delta) method can be added; delta is in seconds.
export function createLoop(renderer, scene, camera) {
  const timer = new THREE.Timer();
  timer.connect(document); // zero delta while the tab is hidden, so nothing jumps when it comes back
  const updatables = [];

  function frame(time) {
    timer.update(time);
    const delta = Math.min(timer.getDelta(), MAX_DELTA); // Phase 9: never more than 0.1 s per frame
    for (const item of updatables) item.tick(delta);
    renderer.render(scene, camera);
  }

  return {
    start() { renderer.setAnimationLoop(frame); },
    stop() { renderer.setAnimationLoop(null); },
    add(updatable) { updatables.push(updatable); },
  };
}

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 two complaints. Lena's phone and Ama's monitor now show the same speed, because everything uses delta time. And there is a pause button, plus a still bike for visitors who ask the system to reduce motion.

2. 2

   What it adds. A new bike part, the crankset (a group named crankset at the bottom bracket: a 44-sided chainring, a spindle and two arms). bike.tick(delta) turns both wheels at v / r with v = 1.667 m/s (6 km/h), and turns the crankset slower by 16/44 (the rear gear has 16 teeth, the chainring 44), so the pedals go round 2.75 times slower than the wheel. src/world/loop.js caps the delta at 0.1 s. src/ui/a11y.js is new: createMotion(button) keeps the rule from Topic 9.5. index.html gets the button, and main.js wires them.

3. 3

   How it plugs in. createLoop keeps its API. main.js adds one updatable that calls bike.tick(delta) only when motion.mayMove(). The visitor's own camera moves (controls from Phase 7) are another updatable and are never blocked. Phase 8's picking and panel keep working: the crankset is a new child of the bike, so it is pickable at once, and panel.js gains its label and price.

4. 4

   What the showroom can do now that it could not before: pretend to ride at a real, frame-rate-independent speed, show a turning crankset, survive a stalled frame, pause on request and stay still for a visitor who reduced motion.

5. 5

   What is still missing: the chain that joins the chainring to the rear gear (Phase 10), and an idle camera turntable. The camera orbit has no automatic turn yet, so the only automatic motion is the pedalling. Pedals (Phase 15), brakes (Phase 16) and the rest of the bike come later.

• Turn wheels at v / r with delta time

• Add a part that follows another with a ratio

• Add a pause button that obeys reduced motion

• Say what the showroom still lacks (the chain, Phase 10)