Frontend · AI Programming · Three.js

Four 3D Games in 3.82MB: Inside Claude's One-Shot Build Pipeline

By 莪_幻尘 · Nov 12, 2026

Read original on juejin.cn ↗ Google Translate ↗ Alt translation

A single AI session can now produce a complete, playable vertical slice with zero external assets, collapsing the cost of validating a game idea and shifting value from executing builds to deciding what is worth building. Frontend engineers who only know how to call Three.js APIs become replaceable; those who can judge quality and budget will price higher.

Summary

A single Claude session produced four complete browser games — an FPS, a CrossFire-inspired map, a kart racer, and a pelican cycling game — totaling 3.82MB. Each is a single HTML file with no external images, models, audio, or backend; all assets are generated procedurally. The engineering relies on Three.js primitives, Canvas-drawn textures, WebAudio-synthesized sounds, and esbuild bundling that inlines everything into one file.

The article breaks down how one-sentence prompts translate into technical constraints: research before building, state machines for drift mechanics, two-bone IK for pedal animation, Gerstner waves for the ocean, and Verlet cloth for a scarf. It also covers the pitfalls: a 320-second soak test to catch memory leaks, a Bloom NaN bug that black-screened after release, and a 12-item review list from a sub-agent.

Takeaways

— Four browser games total 3.82MB: 1.42MB FPS, 862KB transport map, 718KB racer, 818KB pelican game.

— Every game is a single HTML file with no external images, models, audio, or backend; all assets are procedural.

— The setup used Claude Opus 5.5, Claude Code CLI, 1M context, xhigh reasoning, esbuild for bundling, and Cloudflare Pages for deployment.

— One-sentence prompts encode four constraints: search official references, include mechanics, run in browser as single file, and deliver via CDN link.

— The CrossFire map was built after the model searched official layout; the race game uses a drift state machine with fixed timestep at 120Hz and input buffering.

— The pelican game uses two-bone IK for pedaling, Verlet cloth for the scarf, and multi-layer Gerstner waves for the ocean.

— A 320-second soak test checked geometry/texture counts and JS heap (stable at 16–26MB) to catch memory leaks.

— An intermittent black screen traced to Bloom spreading NaN pixels; fixed with a cleanup pass and a Fresnel calculation fix.

— A sub-agent independently reviewed the code before delivery and found 12 issues, all fixed, showing one-shot means one session, not one attempt.

— The prompt template for reproduction includes five requirements: single-file HTML, official reference search, menu/settings/touch, headless browser test, and deployment link.

Conclusions

The 'one-shot' label means one session, not one attempt; the model iterates on its own research, tests, and fixes within that session.

Procedural assets — Canvas textures, WebAudio synthesis, geometric modeling — are the key to small size; compression alone couldn't achieve it.

The pelican game, with no IP to imitate, is the most telling: every choice is novel, and that's where the model's limits show.

The demo layer of game development is collapsing; a concept can now be validated with a link rather than a pitch deck and a funded prototype.

For frontend engineers, knowing which effects are worth building and where to spend the performance budget matters more than Three.js API fluency.

Concepts & terms

InstancedMesh

A Three.js technique that renders many copies of the same geometry in a single draw call, keeping performance flat as object count grows. Used here for containers, trees, and auditorium chairs.

Two-bone IK

Inverse kinematics for a chain of two bones with known start and end positions, solving for the middle joint. Used to place a pelican's foot on a moving pedal while keeping the knee natural.

Verlet cloth

A lightweight physics simulation where each particle stores current and previous positions; constraints maintain distance and forces like wind are added. Used for the scarf without a physics engine.

Gerstner wave

A parametric wave model where surface points move in a circular orbit, producing sharp crests. Stacking multiple directions and wavelengths gives realistic ocean surface in a vertex shader.

Soak test

Running the application continuously for a set duration to verify resource usage remains stable. Here, 320 seconds covered a full day/night cycle and checked geometry, texture count, and JS heap.

Source: juejin.cn ↗ Google Translate ↗ Backup ↗