Phase 9 · part: Crankset and chainring
Animation
Time-based motion with delta time, easing and tweens by hand, the AnimationMixer, morph targets and skinning, reduced motion and a pause button. Then the crank turns with the wheels.
Until now the showroom stood still. This phase makes things move the right way: at a speed measured in metres per second, not in "a bit per frame", so a 30 fps phone and a 144 Hz monitor show the same motion. You work out how fast a wheel must turn for a given road speed, and find out why a fast wheel sometimes seems to turn backwards.
Then you learn the tools: easing curves and a tween written by hand, three.js's animation system (clips, mixer, actions, crossfades) with a real animated fox, morph targets that change a shape, and skinned meshes whose bones bend a body. You meet the mistakes that cost an afternoon: an action that never plays, and a clone of a skinned mesh that is drawn in the wrong place.
Finally, motion has a duty of care. Some visitors feel ill when things move, and anything that moves on its own for more than five seconds needs a pause button. The build adds the crankset, makes it turn with the wheels, and adds the pause button and the reduced-motion rule.
Phase 9 · the brief from Lumen
Lena, QA at Lumen Bikes
“On my cheap Android phone the wheels spin like a fan. On Ama's monitor they crawl. And I cannot make it stop.”
Kofi added a spin to the wheels by turning them a little on every frame. On Ama's 144 Hz monitor they turned so fast they blurred. On Lena's old phone, which draws 30 frames a second, the same code made them crawl. Same code, two bikes going at different speeds.
Lena found a second problem. The showroom kept moving, and nothing on the page would stop it. A visitor who gets dizzy from motion on screen, or who simply wants to read the price in peace, had no way out.
This phase fixes both. The wheels turn at a real speed, worked out from the road speed and the wheel's size. The crankset joins them. A pause button sits in the corner, and a visitor whose system says "reduce motion" gets a still bike until they ask for movement.
At this station
You will learn
- Turn a wheel at the right speed for a road speed, on any frame rate, using delta time
- Ease a value towards a target, and write a small tween by hand
- Play, pause and crossfade clips with the AnimationMixer, and clone a skinned model correctly
- Respect reduced motion and give every moving page a pause button
You write code in
In your lumen-3d project (npm run dev) and in the editor on this page
Files you touch
- src/world/loop.js
- src/objects/bike.js
- src/ui/a11y.js
- src/main.js
- index.html
- src/ui/panel.js
Work order · 6 steps
- 9.1Time-Based AnimationAnimate by how much time has passed, not by how many frames have been drawn. A wheel then turns at omega = v / r radians a second on a 30 fps phone and on a 144 Hz monitor alike. 21 min 3 live scenes
- 9.2Easing and TweeningMove a value from A to B over a set time along a curve that starts slow, ends slow or overshoots. You write the tween by hand, then compare it with damp and a spring when the target keeps changing. 22 min 3 live scenes
- 9.3The Animation SystemA clip stores keyframes, a mixer plays them on a model, and an action is one playing copy you can pause, loop and crossfade. You drive a real animated fox and learn the nine reasons an action never plays. 22 min 3 live scenes
- 9.4Morph Targets and SkinningMorph targets blend a mesh between stored shapes. Skinning bends a mesh with a skeleton of bones. You animate both, and see what goes wrong when a skinned mesh is cloned the wrong way. 21 min 2 live scenes
- 9.5Reduced Motion and PausingMotion can make people ill and distract those who read. Honour the reduced-motion setting, give a pause button to anything that moves for more than five seconds, and stop drawing when nothing changes. 20 min 2 live scenes
- 9.6Build: the Turntable and the Pedalling CrankbuildThe bike pretends to ride on its stand: both wheels and the new crankset turn together at a real speed, the loop caps its delta, and a pause button plus the reduced-motion rule decide whether anything moves. 27 min 1 live scene
Quality control · 6 tests
Build it yourself, press Check, and the page tests the scene you made: what is in it, where it sits, what it costs the GPU.
createTween(from, to, duration, ease). Its tick(delta) must add the delta to an elapsed time (never past the duration) and return the eased value.BeginnerQC-03Make the fox runThe Fox loads and stands in its rest pose. Create an AnimationMixer, play the Run clip and update the mixer with delta time so the fox runs.IntermediateQC-04Two foxes that run on their ownTwo foxes are made with fox.clone(). The second one is drawn on top of the first and does not move on its own. Make them two independent skinned meshes: one runs, one walks.IntermediateQC-05Add a pause button that obeys reduced motionThe cube spins forever and the button does nothing. Make the button (#pause) stop and resume the spin, with the label "Pause animation" or "Resume animation".IntermediateQC-06Build the cranksetA rear wheel (rear-wheel) already turns with delta time. Add a group named crankset at the bottom bracket (0, 0.3, 0) with a chainring and an arm, and turn it with the same delta so the wheel turns 44 / 16 = 2.75 times for each turn of the crankset.Intermediate