v5 is a big step: sculpted, realistic faces, two peaceful worlds to explore (no dangers, and you choose your speed), classrooms with teachers who ask questions, and a server that remembers you. Behind the scenes, the whole game was rebuilt from one giant file into about 30 small ones.
In v4, game.js was over a thousand lines long. Finding anything meant scrolling and scrolling, and changing one thing could break another. In v5 every file does one job you can describe in a sentence. Files share code with export (offer something) and import (use something). These are ES modules, built into every modern browser.
v5/
├─ index.html the page (and this window)
├─ style.css how the page looks
├─ server-v5.js the server's brain for v5
├─ server/ server-only helpers (browsers can't download these!)
│ ├─ store.js saves players to a JSON file
│ └─ questions.js the questions AND answers
└─ js/
├─ main.js the conductor: starts everything, runs the game loop
├─ state.js the facts every file shares
├─ shared/rules.mjs rules used by BOTH browser and server
├─ utils.js maths helpers + textures drawn with code
├─ input.js audio.js net.js
├─ characters/ avatar.js face.js hair.js clothes.js shapes.js creatures.js
├─ world/ sky.js terrain.js nature.js houses.js
│ └─ maps/ eden.js israel.js
├─ items/ collectibles.js
├─ effects/ particles.js
├─ game/ lessons.js
└─ ui/ studio.js hud.js speed.js leaderboard.js minimap.js chat.js tags.js about.js
Why it matters: to add a third map you write world/maps/yourmap.js and nothing else needs to change much. Two students can work on different files at the same time. Bugs are easier to find because each file is small. Notice rules.mjs: the browser and the server both import the same file, so they can never disagree about which hairstyles or colours are allowed. That's the DRY rule: Don't Repeat Yourself.
Open-source code is written by people who share it freely for anyone to use and learn from. v5 uses:
ImprovedNoise: Perlin noise, invented by Ken Perlin for the film Tron. It makes smooth, natural randomness, and it shapes our hills.BufferGeometryUtils: mergeGeometries glues hundreds of shapes (every stone block in the town) into one, so the graphics card draws them in one go. mergeVertices seals the seam on the head so it has no visible line.RoundedBoxGeometry: boxes with soft edges (desks, benches, pockets, trainer soles).An import map at the top of index.html tells the browser where to download Three.js from (a CDN, a network of fast file servers).
Every head starts as a smooth ball of about 5,000 points (vertices). First it's stretched into a skull shape: narrower at the jaw, rounder at the back. Then brushes push and pull the points, just like digital sculptors use in Blender or ZBrush. Each brush has a centre, a size and a strength, and moves nearby points along a smooth bell curve (Math.exp(-distance²)). About 30 brushes make the face:
The face sliders just change the brushes' sizes and strengths. The brushes also paint as they sculpt: lips a little redder, nostrils darker, cheeks rosier, the nose bridge catching the light (vertex colours).
Morph targets (blend shapes): the face is sculpted three times: neutral, smiling and mouth open. The graphics card blends between them, so characters smile when they cheer and teachers' mouths move when they talk. Film and game studios animate faces exactly like this. The eyes are real balls with a painted iris that glance around (called saccades); the eyelids are half-shells that swing down to blink.
Immanuel World has a fountain plaza surrounded by six subject houses. Its paths, hedges, lamps, benches, flowerbeds, woods, pond, lily pads and butterflies are all placed by code. A seeded random number generator means every player's garden is identical.
Ancient Israel is a walled hill town about 3,000 years ago. It has limestone houses with flat roofs (people used them like extra rooms), a market by the well, a watchtower and city gates. Outside the walls are olive groves, date palms, and the red anemones that cover the hills in spring. Here friendly goats replace the pigs (pigs weren't farmed there), and you gather grapes.
Both worlds are for pure exploring: nothing can hurt you. The animals are curious, not dangerous. They stop, turn to look at you and sometimes give a happy hop.
Both maps give the rest of the game the same list of things: a height rule, collision boxes, flower zones and tree zones, where items can appear, and a minimap drawing. That shared "shape" is called an interface. It's why main.js doesn't care which map you picked.
Walk into the Maths or Chemistry house. The teacher turns to face you and says hello. Stand by a chair until it glows, then press E (or tap the button) to sit. The teacher asks a question, and you answer with a click or the keys 1–4. A correct answer earns a ✓ learning tick on the leaderboard; a wrong one gets an explanation.
The answers are never sent to your browser. The questions live in server/questions.js, and server.js refuses to hand out anything in a server/ folder. Your browser sends only the number of the choice you picked, and the server decides if it's right. This is server authority, and it's the golden rule of online games: never trust the client, because anyone can open the browser's developer tools and read or change the page's code.
The teachers are NPCs (non-player characters): the same avatar code as you, driven by simple rules instead of a keyboard. When you walk in, the roof disappears and the walls between you and the camera fade out. This is a cutaway, as used in The Sims.
Before v5, restarting the server forgot everything. Now server/store.js saves each player's name, look and ticks into data/v5-players.json. JSON is the same text format JavaScript objects are written in, so you can open the file and read it.
localStorage). Next time, the server finds your ID and says "Welcome back". This is simple, not secure: a different browser or device is a new player, and there's no password. Real games use accounts with passwords.questions.js and open: true in rules.mjs.GLTFLoader.