Command Palette

Search for a command to run...

Hectal
Back to the lesson: Topic 9.3 — The Animation System
3D Web · Example 1 of 3

A clip, a mixer, an action

No canvas. Everything is driven with a fixed step of 1/60 s, so the output is the same every time.

A 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.

Change the code and press Run (Ctrl+Enter). Predict what will happen first, then break it on purpose and read what changes. Your edits are saved and match the lesson page.

Ready for more? This phase has 6 hands-on exercises with automatic checks.

Practice questions

Write the code in the editor, run it, then open the model answer to compare.

01

Play the Fox's Survey clip once and hold the last pose.

02

Write a function switchTo(next) that crossfades the current action to next over 0.3 s, and call it for Walk and Run.

Explain it without notes

01

Name the four objects between an animation file and a moving model, and say what each does.

02

A walk cycle plays on the Fox but the Run action does nothing after crossFadeTo. Give two likely causes.

A clip, a mixer, an action
Press Run to see the page.
idle

Console

Nothing logged yet.

Expected console output

clip: pedal 2 s, 1 track: crank.rotation[z] | times [ 0, 2 ] values [ '0.000', '-6.283' ]
after 30 updates of 1/60 s: time 0.500, crank turned -0.250 turns
after 60 updates of 1/60 s: time 1.000, crank turned -0.500 turns
after 120 updates of 1/60 s: time 2.000, crank turned -1.000 turns
one more update (loops by default): time 0.017 turns -0.008