THREE.JS / FOUNDATIONS 102

Make the footfall a signal.

A locomotion clip is a periodic signal. Scrub its normalized phase, classify foot contact from the live pose, then blend Walk and Run while keeping their clocks aligned.

Initializing -

Loading the locomotion clips and their foot tracks.

Clip
-
Phase
-
Foot tracks
-
Clips
-
Source phase auditchecking
Duration
-
Keyframes
-
Left foot
-
Right foot
-

The glTF stores pose tracks; contact is a runtime interpretation of the sampled foot transforms.

Normalized phase scrub-
0%
1.00x
Local time
-
Normalized
-
Left pose
-
Right pose
-
00.51

The slider drives AnimationMixer.setTime(phase * clip.duration) so the pose can be inspected without waiting for real time.

Foot-contact detector-
0.030u
0.80u/s
Phase
-
Transitions
-
Left foot
-
Right foot
-

Waiting for the first contact transition.

A contact is inferred when a foot is near the ground and its horizontal motion is below the chosen threshold; the asset does not author contact events.

Phase-locked Walk + Run-
0%
Walk weight
-
Run weight
-
Walk phase
-
Run phase
-

Both actions share one mixer clock; AnimationAction.syncWith keeps the phase relationship explicit while weights choose the pose contribution.

Pose signal to gameplay meaning
clip->mixer time->normalized phase->foot contact->movement rule

Foot markers will update after the mixer evaluates the pose; no contact event is assumed to exist inside the glTF.

The contact detector is a deliberately inspectable heuristic: foot height and horizontal velocity are sampled from the live FootL and FootR bones. Add ?forceWebGL=1 for a WebGL2 comparison.

This is a selected locomotion-signal study using the local RobotExpressive asset; whole-example fidelity remains separate.

Back to the study index ->
LAB 102 / LOCOMOTION PHASE