Command Palette

Search for a command to run...

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

The Fox: Walk, then a crossfade to Run

Fox by PixelMannen (CC0), rigging and animation by tomkranis (CC BY 4.0), glTF conversion by @AsoboStudio and @scurest (CC BY 4.0). Open the scene tree: one Group, a root bone chain and one SkinnedMesh.

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.

The Fox: Walk, then a crossfade to Run
Press Run to see the page.
idle

Console

Nothing logged yet.

Expected console output

clips: Survey (3.417 s), Walk (0.708 s), Run (1.158 s)
Walk after 30 updates: time 0.500 of 0.708 | weight 1
crossfade starts: walk 1.00, run 1.00
after 15 updates (0.25 s): walk 0.50, run 0.50
after 30 updates (0.5 s): walk 0.00, run 1.00