# Procedural Humanoid – Walk / Run / Jump

Open `index.html` in a desktop or mobile browser. You need an internet connection because three.js r160 loads from jsDelivr. There is no build step. If your browser blocks ES modules on `file://`, serve the folder instead, for example with `python3 -m http.server`.

## Controls

| Action | Key | Touch / mouse |
|---|---|---|
| Walk | `1` or `W` | **Walk** button |
| Run | `2` or `R` | **Run** button |
| Jump (looping forward hops) | `3` or `J` | **Jump** button |
| Show or hide the skeleton | `S` | **Skeleton** button |
| Pause | `Space` | **Pause** button |
| Orbit / zoom / pan the camera | – | drag / wheel or pinch / right-drag or two-finger drag |

When you switch gaits, the character blends smoothly (about 0.5 s) from one to the next. The camera follows the character. The top-left readout shows FPS, the current blend weights and the speed.

## How it works

- The skeleton is a procedural `THREE.Bone` hierarchy with rigid capsule meshes attached to the bones.
- Each foot is locked in world space while it touches the ground. Late in stance the heel lifts and the foot rolls over the ball of the foot, which also stays put, so the feet don't slide. Swing feet move toward a predicted landing spot.
- The legs use two-bone IK with the knees always pointing forward. Reach is clamped so knees can't hyperextend. Hips (flexion/extension), ankles, shoulders and elbows are all clamped to human ranges, and elbows bend one way only.
- The pelvis bobs up and down: highest at mid-stance when walking, highest in flight when running, and in a crouch-then-arc path when jumping. It also yaws and rolls with the legs. The spine counter-rotates the shoulders, the head stays level and facing forward, and the arms swing opposite to the legs (both arms swing together in the jump).