Three.js AI Game: Give Your AI the Current Docs
For a three.js AI game, start by giving your AI the library's own instructions for AI tools, because otherwise it may write outdated code. Three.js draws 3D in the browser, so you also have to decide early how things bump into each other.
What three.js is, and what it is not
Its GitHub page, read on 2 November 2026, calls it a "JavaScript 3D Library" and says it aims to be "an easy-to-use, lightweight, cross-browser, general-purpose 3D library". It has an MIT licence. It puts a scene, a camera, lights and objects on a web page. The page says nothing about physics or games, and that tells you something.
A game engine hands you a lot of the game. With three.js, you, or rather your AI, write a lot more of it: movement, collisions, menus, levels. In return your game is a web page that opens with one click and has no large program around it.
If you want a big 3D game with characters and worlds, an engine will save you pain. If you want one strange little idea that anyone can open from a link, three.js is lovely. Our 3D guide shows how to work with boxes first, whichever you pick.
Why old code is the first trap
Three.js has been around a long time, so there is a lot of old example code, and your AI has read it. The project's own file for AI tools, at threejs.org/docs/llms.txt, has a section called "Instructions for Large Language Models". It tells AI tools to use import maps, a modern way of loading the library, and marks an old loading pattern as wrong. It also makes WebGLRenderer the default choice for wide browser support, and asks for the latest version.
So hand your AI that address. Many coding tools can open it. If yours cannot, open it yourself and paste the text in.
Spielerando helps with a different question, how a mechanic should behave: it gives your AI blueprints, ready-made code and a wiki through an MCP connection. The account is free, through Google or e-mail, and your game and code are never looked at (details).
The decision to make early: how do things collide?
Three.js draws things but does not stop them from passing through each other. You have three ways to handle this.
| Option | Good for | Cost |
|---|---|---|
| Simple rules you write yourself | Boats in canals, cars on tracks, anything on a flat path | You must think of each case |
| A physics library | Stacking, tumbling, things that bounce | More to load and more to go wrong |
| A game engine | Many of these at once | You leave three.js |
Paper Boat Canal is an invented game: you steer a folded paper boat down a canal, and hitting the walls makes it soggy. Only the walls matter here, so the first option is plenty. AI tools often reach for a physics library anyway, because it sounds thorough. Ask for a reason first.
The boat is also a neat case for a diagram, in the Mermaid text format that mermaid.live draws. Rules this small are easy to walk through, and the AI cannot see the 3D view as you can, so the diagram gives it something exact to check against.
Paste this to your AI
Build Paper Boat Canal with three.js. Before writing code, read https://threejs.org/docs/llms.txt. If you cannot open it, tell me and I will paste it in. Tell me which of its instructions apply here, and which three.js version you will use and why.
The game: I steer a paper boat along a canal with the left and right keys. The current pushes it forward. Hitting a wall makes it soggier, and at full sogginess it sinks.
Before coding, write a Mermaid diagram of the boat: floating, hitting a wall, soggy, sunk, restart. Check that one hit cannot count twice and that the boat can always reach the end or sink. Build from that.
Write the collision rules yourself, with no physics library, unless you show me a concrete reason this game needs one. Show me the lines that decide a hit. Say what you saw in the browser and what you only assumed.
Or skip this and connect the MCP: your AI then finds all of this by itself.Connect the MCP
How to check it worked
- Scrape along a wall. Soggy should rise once per hit, not once per moment.
- Hit a wall at a shallow angle. The boat should not slip through.
- Open it on a phone. Decide now whether phones matter, and how to steer there.
- Reload the page. Everything should start fresh, with the boat dry.