In versions 1 to 3 the explorer was built from boxes, and "walking" meant swinging the boxes back and forth. Version 4 replaces it with a proper game character: smooth shapes on an invisible skeleton, moved by maths so it breathes, walks, runs, jumps and dances.
What's new in this version
Avatar studio. Before you play, choose girl or boy, skin tone, hairstyle and colour, hoodie or T-shirt, and the colours of your top, trousers and shoes. Or press Randomise.
Animation test buttons. Watch Idle, Walk, Run, Jump, Wave, Dance and Cheer, each with a short explanation underneath.
Show bones. The body turns see-through so you can watch the skeleton move inside it.
Realistic movement. Breathing, blinking, looking around, a walk that blends into a run, leaning into corners, a jump with a squash on landing, and hair that swings.
Jumping and emotes in the game. Space to jump (pigs can't bite you in the air), 1 to wave, 2 to dance, 3 to cheer, and K to see your bones. Other players see your emotes too.
Your look is shared. The server checks it and sends it to every other player, so everyone sees your character.
Everything from version 3 is still here: day and night, shooting stars, the live leaderboard and the minimap.
What "realistic movement" means
Every game character, from simple ones to Fortnite heroes, is made of three layers:
1. SkeletonInvisible bones joined in a chain: hips, spine, chest, neck, head; shoulder, elbow, hand; hip, knee, ankle. Turn a shoulder and the whole arm follows.
2. BodyThe shapes you can see, each stuck to a bone. Ours are made by spinning a 2D outline around a line, like clay on a potter's wheel.
3. AnimationRules that say how far to turn every bone, every frame (60 times a second).
Our animation is procedural: it's calculated with maths instead of being recorded. A walk is mostly sine waves: each leg swings on one, half a cycle apart; the arms swing the opposite way; the hips bob twice per stride; and the chest twists against the hips. A run uses the same maths with bigger numbers.
What makes it feel alive is lots of small things working together:
Blending: the game fades smoothly between idle, walk, run and jump depending on your speed, so there's never a sudden snap.
Anticipation and follow-through: the knees bend when you land, and the body leans into turns like a cyclist.
Secondary motion: the ponytail and long hair use spring physics. A spring pulls the hair back to rest while your movement pushes it away, so it swings and settles.
Tiny idle movements: real people are never perfectly still, so the character breathes, shifts its weight, glances around and blinks.
Big games like Fortnite mostly use motion capture instead: real actors wear suits covered in sensors, and their movements are recorded onto the skeleton. That's why their characters move so naturally. Procedural animation is less detailed, but you can change every part of it with code.
What you'll learn from this version
Hierarchies (the scene graph): how parent and child objects move together, which is how every skeleton works.
Trigonometry in action:Math.sin for smooth back-and-forth motion, and Math.atan2 for working out which way to face.
Interpolation: blending between two values with mix(a, b, t) (often called "lerp"), used everywhere from walk-to-run to day-to-night.
Simple physics: gravity for jumping, and springs with damping for hair.
3D modelling in code: building shapes from outlines with LatheGeometry, and reusing shapes so the game stays fast.
Multiplayer design: sending your look and emotes to the server, and why the server must check everything a browser sends (it ignores made-up hairstyles or emotes).
Organising code: the character lives in its own file, avatar.js, separate from the game, so each part is easier to understand and change.
Try it yourself
All of these are in avatar.js. After a change, refresh the page with Ctrl+F5.
Giant steps or tiny shuffles: change the numbers in const stride = mix(0.42, 0.8, r); (walking stride, then running stride).
New colours: add a colour code like '#00c2a8' to SKIN_TONES or HAIR_COLORS. A new button appears in the studio by itself.
Different body shapes: in OUTLINES, each pair is [width, height] of the outline that gets spun into a body. Change a width and look.
Floppier hair: in the hair physics section, lower * 55 (spring stiffness) and * 6 (how fast it settles).
Your own emote: copy the 'cheer' block, rename it, and invent new arm and leg angles.
What to research to make it even better
These are the search terms professionals use. Each one is a real next step for this game.
Skinned meshes and skinningBending one smooth skin with the bones, instead of separate shapes.
Rigging in BlenderMaking your own character and putting a skeleton inside it (free software).
glTF models and GLTFLoaderThe standard file format for loading 3D characters into Three.js.
Motion capture and MixamoUsing recorded movements from real people.
AnimationMixer and crossfadingHow Three.js plays and blends recorded animations.
Animation state machines and blend treesOrganising many animations and the rules for switching between them.
Inverse kinematics (IK)Feet that land properly on slopes, and hands that reach for things.
Morph targets (blend shapes)Faces that smile, frown and talk.
Toon shading and PBR materialsThe cartoon look of Fortnite versus realistic surfaces.
Client-side prediction and interpolationMaking other players move smoothly over a slow connection.
The files in this version
index.html: the page, including the avatar studio, the game screen and this window.
avatar.js: builds the characters and animates them. Start here.
game.js: the world, the pigs, pies, shooting stars, day and night, and the controls.
server-v4.js: v4's part of the server. It checks and shares each player's look and passes emotes on.