# Humanoid motion cycle (Three.js)

A single-page scene with a procedurally rigged humanoid that idles, walks, runs and jumps. Open `index.html` in a desktop or mobile browser. There is no build step. Three.js r160 loads from jsDelivr, so you need an internet connection. If your browser blocks module imports from `file://`, serve the folder instead, for example with `python3 -m http.server`.

## Controls

| Action | Keyboard | On-screen / touch |
|---|---|---|
| Stand still | `1` | **Idle** button |
| Walk | `2` | **Walk** button |
| Run | `3` | **Run** button |
| Jump (works from idle, walk or run) | `Space` | **Jump** button |
| Turn left / right | `A` / `D` or `←` / `→` (hold) | **Turn** buttons (hold) |
| Show or hide the skeleton | `B` | **Skeleton** button |
| Orbit camera | left mouse drag | one-finger drag |
| Zoom | mouse wheel | two-finger pinch |

The camera follows the character. Panning is disabled.

## How it works

- **Speed-driven gait.** Idle, walk and run are target speeds. Acceleration blends stride length, cadence, foot lift, lean and arm swing continuously, so switching cycles is a smooth transition rather than a crossfade.
- **Planted feet.** A foot in stance is latched in world space, so it cannot slide. The heel and ball of the foot pivot around the latch point.
- **Swing feet.** They travel from lift-off to a predicted landing spot.
- **Leg IK.** Two-bone IK solves the legs. The knee hinge is about a single axis, so knees only bend forward.
- **Joint limits.** Hips, knees, feet, spine, neck and arms are clamped to human ranges, and elbows bend one way only.
- **Pelvis and torso.** The pelvis height follows the legs, which gives the natural bob. The torso stays upright, with hip and shoulder counter-rotation. Arms swing opposite to the legs.
- **Skeleton view.** The `B` toggle draws bones and joints through a translucent body, with rings at the planted-foot contact points.