How to make a 3D game with AI: a Three.js guide

To make a 3D game with AI, describe a small game to a coding agent, let it write the code, then play each version and say what to change. In our catalog, most 3D games made this way are JavaScript games built on Three.js.

This guide covers the engine, the build order and what the 3D games we list have in common. Every tool fact on this page is as of September 2026 and links to its source.

Which 3D engine should you use?

Use Three.js unless you have a reason not to. It is the most common engine in our catalog by far. Vibe Jam 2026 allowed any engine but said “usually ThreeJS is recommended” (jam rules), and its press page 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	266	29
Babylon.js	An open game and rendering engine in a JavaScript framework, Apache-2.0 license	5	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

Sources for the table: the Three.js, Babylon.js and PlayCanvas READMEs and the React Three Fiber docs.

PlayCanvas brings 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.

Godot works for 3D too, with one catch for the web. Godot 4’s web export only targets WebGL 2 through its Compatibility renderer, and Godot 4 projects written in C# can’t export to the web at all (Godot docs). For Godot, Unity and 2D engines side by side, see best vibe coding game engine.

What the catalog’s 3D games show

Three.js games make up 66% of the catalog and most of the jam’s top 50. Data note: counts come from the 404 live games in our catalog as of September 30, 2026. Of those, 367 are Vibe Jam 2026 entries, ranked among 945 (press page), and the jam asked for at least 90% of the code to be written by AI (jam rules).

Measure	Three.js games	All listed games
Games	266	404
List mobile	176 (66%)	256 (63%)
Online multiplayer	119 (45%)	173 (43%)
Listed in the jam’s top 10	6 of 7	7
Listed in the jam’s top 50	29 of 34	34
Most common genre	Action	Action
Action / shooter / simulation	134 / 70 / 51	176 / 93 / 67

We list 7 of the jam’s top 10. Three.js runs 6 of them, including A Game About Capybaras Delivering Food (#1) and Kanso (#9). HALDANE-4 (#5), a story told in ASCII characters, lists no engine. Read the counts with the jam’s recommendation in mind.

The camera varies. Descriptions of Three.js games mention first-person, third-person, top-down and isometric views, and Null Range (#4) puts you in a spacecraft cockpit.

Some entries 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. With Claude Code, the game, server and bug fixes took about a day and a half, and polish and deployment another day and a half.
• Gaussian Splatting FPS (PlayCanvas, #103) sets a shooter inside a Gaussian Splat scan of a real place. Its creator built it with Cursor.

How do you make a 3D game with AI, step by step?

In seven steps, 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. MDN calls it ideal for first-person 3D games, and the first lock needs a user action such as 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, so it needs a connection (Three.js docs).
5. Decide how models are made. Shapes built in code need no files. 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. For many objects that share a geometry and material, InstancedMesh reduces draw calls (Three.js docs). 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: 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 get their own guides: how to make game assets with AI and image to 3D for games.

Where 3D gets harder than 2D

The camera is the first new problem, collisions in three dimensions the second, and the rendering bill the third. Phones pay that bill 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 server. 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, as vibe coding a game recommends.

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

Prompts to adapt

Replace the brackets.

A first build:

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:

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.

Speed:

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.

Keep building in 3D

• Image to 3D for games: real models from a picture, optimized for the browser.
• 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, and vibe coding game ideas helps you choose what to build.
• How to make a mobile game with AI covers touch input and screen fit, and vibe coding game jam the jam behind most of our data.
• Browse the Three.js, Babylon.js and PlayCanvas hubs, the shooter and racing genres and the Vibe Jam 2026 archive.

Made a 3D game? Submit it. Every game is reviewed before it’s listed, and our editorial policy explains what we list.