How to make a 3D game with AI, using Three.js

To make a 3D game with AI, you describe a small game to a coding agent, let it write the code, then play each version and tell it what to change. Most of the 3D games in our catalog that were made this way are JavaScript games built on Three.js.

Block out the level with boxes before you add any art. Engine and tool details are as of September 2026, with a link next to each one.

Which 3D engine should you use?

Use Three.js unless you’ve got a reason not to. It’s by far the most common engine in our catalog, and that’s partly because Vibe Jam 2026 allowed any engine but said “usually ThreeJS is recommended” (jam rules). Its press page also recommended Three.js “for browser-first 3D” (press page).

Engine	What its maker says it is	Games in our catalog	In the Vibe Jam 2026 top 50
Three.js	A lightweight, general-purpose 3D library with WebGL and WebGPU renderers, MIT license	322	36
Babylon.js	An open game and rendering engine in a JavaScript framework, Apache-2.0 license	4	0
PlayCanvas	A web graphics runtime built on WebGL, WebGPU, WebXR and glTF, with a browser-based editor, MIT license	2	0
React Three Fiber	A React renderer for Three.js	1	0

The descriptions come from the Three.js, Babylon.js and PlayCanvas READMEs and the React Three Fiber docs.

PlayCanvas actually comes with more built in. Its README lists full integration with the ammo.js physics engine and first-class support for 3D Gaussian Splats, while Three.js gets physics from an addon or a separate library. Three.js can draw splats too, and our Gaussian splatting game does it with the Spark library and models we built in Blender 5.3.

Godot works for browser games too, through its Compatibility renderer, with a catch for C# projects (Godot docs).

Godot web constraint	Requirement
Renderer	Compatibility only, targeting WebGL 2
C# projects	Godot 4 cannot export them to the web

For Godot, Unity and 2D engines side by side, see best vibe coding game engine.

The camera changes the game

Three.js runs both the courier’s open world and Null Range’s cockpit view. Most of the jam’s highest-ranked games use it, but they ask you to look and move in pretty different ways.

That jam received 945 submissions (press page), and its rules asked for at least 90% of the code to be written by AI. The catalog counts below are current as of November 14, 2026, so keep the jam’s Three.js recommendation in mind when you read them.

Measure	Three.js games	All listed games
Games	322	588
List mobile	192 (60%)	293 (50%)
Online multiplayer	140 (43%)	200 (34%)
Listed in the jam’s top 10	9 of 10	10
Listed in the jam’s top 50	36 of 42	42
Most common genre	Action	Action
Action / shooter / simulation	155 / 82 / 61	227 / 115 / 109

A Game About Capybaras Delivering Food and Kanso both use Three.js, which says a lot about its range, since one’s an open-world delivery game and the other’s a bonsai garden.

HALDANE-4, a story told in ASCII characters, doesn’t list an engine at all.

The camera really does vary. Descriptions of Three.js games mention first-person, third-person, top-down and isometric views, and Null Range even puts you in a spacecraft cockpit.

Some entries also record how the game was built.

• Meridian Wake renders with Three.js on WebGPU with a WebGL2 fallback and uses Rapier for physics. Its creator says it was generated with GPT-6 Astra.

• Call of Naija pairs Three.js with Rapier physics and a Recast navmesh for enemy AI. Its models come from Blender scripts, and its textures are generated at runtime.

• Shoot or Die was its creator’s first Three.js game, and it came together pretty fast. With Claude Code, the game, server and bug fixes took about a day and a half, and polish and deployment took another day and a half.

• Gaussian Splatting FPS (PlayCanvas, #103) has an unusual setting for a shooter, a Gaussian Splat scan of a real place, and its creator built it with Cursor.

Build the camera and movement before adding models

It takes seven steps to get from a brief to a game that starts fast.

1. Fix the camera and controls in the brief. Say whether the view is first-person, third-person or top-down, and how the player moves on a keyboard and on a phone. OpenAI’s Codex guide suggests a PLAN.md with the player goal, main loop, inputs and controls, win and fail states and the stack (Codex use case).

2. Start with a scene, a camera and a renderer. The usage example in the Three.js README builds exactly those three, then draws each frame in an animation loop (GitHub). The renderer docs advise always defining that loop with setAnimationLoop(), not requestAnimationFrame() (Three.js docs). Block out the level with boxes and planes before any art.

3. Add movement and a follow camera, then play. For first-person mouse look, ask for the Pointer Lock API, which MDN calls ideal for first-person 3D games. The first lock needs a user action like a click (MDN). For phones, see touch controls.

4. Add physics only when the game needs it. Rapier is a 2D and 3D physics engine with official npm packages (Rapier), and the Three.js RapierPhysics addon brings it into a scene. The addon loads Rapier from a CDN, though, so it needs a connection (Three.js docs).

5. Decide how models are made. Early on, shapes built in code are handy because they don’t need any files at all. For models you keep as files, use glTF, a royalty-free format for “efficient transmission and loading of 3D scenes and models” (Khronos). Three.js loads it with GLTFLoader, which supports Draco and Meshopt compression, KTX2 textures and WebP and AVIF images (Three.js docs).

6. Keep the frame rate up. When a lot of objects share a geometry and material, InstancedMesh cuts down the draw calls (Three.js docs). And renderer.info reports draw calls, triangles and GPU memory, so the agent can measure a change before and after (Three.js docs).

7. Keep the first load light, and give the agent a check. Vibe Jam 2026 ruled out loading screens and heavy downloads (jam rules). Anthropic’s docs say to give Claude a check it can run, like tests, a build or a screenshot to compare (Claude Code docs). OpenAI’s guide has Codex test the game in a live browser with Playwright (Codex use case).

Art and sound have their own guides, how to make game assets with AI and image to 3D for games.

Where 3D gets harder than 2D

Three things get harder in 3D. The camera is the first new problem, then collisions in three dimensions, and then the rendering bill, which phones end up paying first. Godot’s web export docs say CPU and GPU performance “is at a premium when running on mobile devices” (Godot docs).

Online play adds a whole server on top. According to its entry, Call of Naija shares its TypeScript simulation between the offline client and an authoritative Node multiplayer server. Get the single-player loop fun first, though, as vibe coding a game recommends.

VR adds even more. Three.js has a VRButton addon that starts immersive VR sessions through WebXR (Three.js docs), but MDN lists WebXR as limited availability and available only over HTTPS (MDN). So check which browsers and headsets your players actually use.

Ask for a blockout, then physics and a speed check

Swap the parts in brackets for your own game. A first build could start like this.

Build a one-page browser game with Three.js. Third-person camera behind a [small boat] on [calm water]. Steer with WASD on desktop, or by dragging on the left half of the screen on a phone. Collect [10 floating crates] before [a 60-second timer] ends. Use boxes and planes for every object and load no files. Run it and send me a screenshot.

Physics comes next.

Add physics with the RapierPhysics addon from three/addons. Give rigid bodies only to the [boat] and the [crates], and keep the water a flat plane. Tell me what you changed and how you checked that it still runs smoothly on a phone.

And then the speed check.

Show renderer.info draw calls and triangles in a small debug overlay. Then turn the repeated [trees] into one InstancedMesh and report the numbers before and after.

Load a model and test it on a phone

Claude Code and Three.js goes deeper on this stack. It pins a release, gives the agent current docs and rules, tests WebGL in a headless browser and holds a draw-call budget.

When you’re ready for real models, image to 3D for games makes them from a picture and optimizes them for the browser. AI 3D animation for games then rigs a character, makes clips from text or video and plays them with an AnimationMixer.

Best vibe coding game engine compares Three.js with Phaser, PixiJS, Godot and others. How to make a game with AI covers tools and publishing, while vibe coding game ideas helps you choose what to build.

For touch input and screen fit, there’s how to make a mobile game with AI, and vibe coding game jam covers the jam behind most of our data. To see what other people made, browse the Three.js, Babylon.js and PlayCanvas hubs, the shooter and racing genres and the Vibe Jam 2026 archive.

And if you’ve made a 3D game yourself, you can submit it. Every game is reviewed before it’s listed, and our editorial policy explains what we list.