Procedural locomotion for Three.js

In a game or a 3D experience, a character usually moves by playing animations made in advance: walk, run, turn. The trouble is that those animations know nothing about the surroundings, so feet slide, go through steps or float over a slope.

This library does the opposite: there are no baked animations. Every frame, from a speed and a heading, it works out where each foot lands, how the legs bend to get there and how the rest of the body follows. So the character reacts to the ground under it and to what is around it.

• Walks and runs with no separate modes: it blends from one gait to the other, with a flight phase, hip bounce and torso lean.
• Point and click: moveTo(point) takes the character to the destination; if it is behind, it turns in 2–3 steps, like a person.
• Feet on the terrain: heel, sole and toe, adapting to bumps, slopes and low steps.
• Crouching and jumping, with anticipation, push-off and landing.
• Touching on the way: it rests a hand on columns, walls or railings as it walks past, and slides it along while walking.
• Any size and proportions: lengths, speeds and step rhythm scale with the model's leg length, from a child to a giant.
• Mixamo and Rigify rigs, and any other with a bone mapping.
• 116 parameters, four styles (tired, sneaky, athletic, heavy) and eleven basic controls that move several parameters at once.
• Fast: about 0.1–0.2 ms per character per frame.

Every frame, the library chains several stages:

1. Gait: the step rhythm for the speed (cadence grows with the square root of speed).
2. Footstep planning: where each foot will land, taking the pending turn into account.
3. Foot trajectory: the swinging foot leaves with the push-off velocity, rises early and glides into contact, rolling from heel to toe.
4. Two-Bone IK: hip, knee and ankle solved with the law of cosines.
5. Foot placement: rays against the ground to plant each foot at the terrain's height and slope.
6. Body posture: pelvis, spine, chest, head, arms and fingers, with damped springs and optional twist bones.

const human = createProceduralHuman({
  model: gltf.scene,
  mapping: rigifyMapping,
  ground: [floorMesh],
  preset: 'athletic',
});

human.moveTo(point, { run: true });
human.update(dt); // every frame

Looking natural is not left to the eye. The character's gait is analysed the same way as real people's, using motion capture from the CMU database at the same relative speed: cadence, stride, support phases, hip, knee and ankle angles, pelvis, shoulders and arms, curve by curve across the cycle.

A test checks every change against those references and fails if the gait drifts away from a person's. A second database, SFU, is used for local measurements only.

The library has a bilingual website (English and Spanish) with the documentation, a live demo on the home page and a lab to try it out: pick the model, tweak the parameters and see the effect in real time with the character walking in place, then copy ready-to-paste code. It is not published yet.

• The library is public, MIT-licensed, with documentation in English and Spanish, tests and continuous integration.
• No collisions or physics: the body does not bump into obstacles, and moveTo goes in a straight line, with no pathfinding.
• No planned stairs or jumps to a different height; only bumps and low steps.
• Tested with Mixamo and the Rigify metarig; other rigs should work with their mapping, but they are not verified.

• Motion capture: The data used in this project was obtained from mocap.cs.cmu.edu. The database was created with funding from NSF EIA-0196217. Also the SFU database, for local measurements only.
• Demo and test models: Human Base Meshes by Blender Studio (CC0).
• Built with Claude as a coding assistant.