How to make a browser game with three.js and AI

Short answer: create a Vite project, install three.js, and let an AI coding agent (Claude Code, Codex or Cursor) write the game one small feature at a time while you run the dev server and playtest in your browser. Load AI generated 3D models as GLB files with three.js's GLTFLoader, then host the built dist/ folder free on itch.io or Cloudflare Pages. Versions and limits below were checked against official docs on October 19, 2026.

What you are using

• three.js: a free, open source (MIT) JavaScript 3D library. The latest release on October 19, 2026 was r186 (npm package three version 0.186.1). It renders 3D; it is not a full game engine with an editor, so physics, menus and game state are code you (or the AI) write.
• Vite: the build tool the three.js installation manual uses as its example. It runs a local dev server with hot reload and builds a static dist/ folder. Vite 8 (8.3.4 when checked) needs Node.js 20.19+ or 22.12+, per the Vite guide.
• An AI coding agent that edits files in your project folder: Claude Code, OpenAI Codex, or Cursor.

Pick an AI coding tool

All three work with a plain Vite folder. Pricing is from our directory entries (checked October 2026); confirm on each vendor page before paying.

• Claude Code: needs Claude Pro ($20/mo monthly, $17/mo billed yearly) or higher; not in the Free plan. claude.com/pricing.
• OpenAI Codex: ChatGPT Free and Go ($8/mo) include limited Codex in the desktop app, subject to rollout; Plus ($20/mo) adds the CLI, IDE extension and web. Codex docs.
• Cursor: a free plan with limited agent requests; Plus is $8/mo (Grok models only). cursor.com/pricing.

Not sure which one? Our Claude Code vs Codex vs Cursor for game dev guide compares them.

The realistic beginner workflow

1. Set up Vite and three.js once (commands below).
2. Ask the AI for one small feature: a player cube that moves, a camera that follows, a coin to collect.
3. Run the dev server with npm run dev and keep the browser tab open. Vite reloads on every save.
4. Playtest in the browser. Open the developer console (F12) and look for red errors.
5. Fix and repeat. Paste the exact error text, or describe what feels wrong, back to the agent. Commit to git when something works.

No agent can tell whether your jump feels good. That part is your job, and it is most of the fun.

Setup, step by step

1. Create the project

Install Node.js (20.19+ or 22.12+ for Vite 8). Then, using the commands from the Vite guide and the three.js manual:

npm create vite@latest my-3d-game -- --template vanilla
cd my-3d-game
npm install
npm install three
npm run dev

The three.js manual installs with npm install --save three and npm install --save-dev vite; the Vite template above already includes Vite, so npm install three is all you add. Open the URL Vite prints (usually http://localhost:5173).

2. Give the agent project notes

Claude Code reads CLAUDE.md; Codex reads AGENTS.md; Cursor supports project rules. A short notes file stops the agent from adding random frameworks. Example:

# Game project notes

- Stack: Vite (vanilla JavaScript) + three.js (npm package "three", r186 at time of writing).
- Entry: index.html loads src/main.js. Game code lives in src/.
- Models, textures and sounds live in public/ (for example public/models/crate.glb).
- Import addons from 'three/addons/...', for example GLTFLoader and OrbitControls.
- Run: npm run dev (http://localhost:5173). Build: npm run build (outputs dist/).
- Keep one feature per change. Do not add frameworks or new npm packages without asking.
- Use relative asset paths so the build works on itch.io.

3. Start the agent and ask for a first scene

Open the project folder in your tool (for example run claude or codex in the folder, or open it in Cursor) and ask something like: Replace src/main.js with a three.js scene: a green ground plane, a blue cube player that moves with WASD, a camera that follows it, and a resize handler. Remove the Vite template counter code.

4. Playtest, then one feature at a time

Good next prompts: add five coins that disappear when the player touches them and a score in the corner, then add a 60 second timer and a restart button. Keep each request small enough that you can test it in under a minute.

Loading AI generated 3D models (GLB)

three.js loads glTF and GLB files with GLTFLoader, an addon that ships inside the three package. The installation manual shows the import as three/addons/loaders/GLTFLoader.js. Put models in public/models/ so Vite copies them to the build unchanged. A minimal example:

import * as THREE from 'three';
import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(60, innerWidth / innerHeight, 0.1, 100);
camera.position.set(0, 2, 5);

const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(innerWidth, innerHeight);
document.body.appendChild(renderer.domElement);

scene.add(new THREE.HemisphereLight(0xffffff, 0x444444, 2));

const loader = new GLTFLoader();
loader.load('./models/crate.glb', (gltf) => {
  scene.add(gltf.scene);
}, undefined, (err) => console.error('Model failed to load', err));

addEventListener('resize', () => {
  camera.aspect = innerWidth / innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(innerWidth, innerHeight);
});

renderer.setAnimationLoop(() => renderer.render(scene, camera));

Where to get models:

• Meshy exports GLB (also FBX, OBJ, USDZ, STL and BLEND, per its pricing FAQ). The free plan gives 100 credits a month and outputs are CC BY 4.0 (commercial use with attribution). Important: Meshy's help center says free accounts cannot download models made with Meshy 6 or Meshy 7, so plan on a paid plan (Pro is $20/mo on meshy.ai/pricing, October 2026) or another generator if you need to download.
• Other free tiers and download rules are compared in our best free AI 3D model generators guide.

Tips: AI models are often large. Keep each file small for quick loading, check the scale (scale gltf.scene if it is huge or tiny), and ask the agent to log the model's bounding box if you cannot see it.

Build and host for free

Make the build portable

Vite's default base is /. Vite's config docs list an empty string or ./ for embedded deployment, which is what itch.io needs because it serves your game from a subfolder:

// vite.config.js
import { defineConfig } from 'vite';

export default defineConfig({
  base: './', // relative paths, needed for itch.io's subfolder hosting
});

Then run npm run build (or npx vite build, as the three.js manual puts it). Everything lands in dist/. Preview it with npm run preview.

Option 1: itch.io HTML5 upload

From itch.io's HTML5 docs (checked October 19, 2026):

• Create a project, pick HTML Game from the Kind Of Game list, and upload a ZIP whose contents include index.html. Zip the files inside dist/; only ZIP is accepted (not .rar, .tar.gz or .7z).
• Limits: no more than 1,000 files after extraction, 500MB total extracted, 200MB per file, paths up to 240 characters. File names are case sensitive.
• Use relative paths. Paths starting with / fail, and missing files show as 403 errors rather than 404.
• External requests must use HTTPS. HTML5 games can only take payments as donations; sell access by making the game downloadable instead.
• itch.io gzips .js, .html and .glb files automatically.

Option 2: Cloudflare Pages

Cloudflare Pages Direct Upload lets you drag and drop a folder or ZIP in the dashboard, or deploy from a terminal with npx wrangler pages deploy dist (per the Direct Upload docs). The free plan allows up to 20,000 files per site and 25 MiB per file, per the Pages limits page (last updated September 5, 2026). Keep big GLB files under that 25 MiB cap.

No code alternatives, and when Phaser fits better

• No coding at all: Rosebud AI builds playable browser games from a text description. See also How to make a game with no coding using AI.
• 2D games: Phaser is a free, open source HTML5 game framework (version 4.2.1 on GitHub when checked). For platformers, top down or puzzle games it gives you sprites, input, tilemaps and physics out of the box, so it usually fits 2D better than three.js. AI agents handle it with the same Vite workflow.
• A full engine with an editor: see Best game engines for beginners in 2026.

Common pitfalls

• Opening index.html by double clicking. The three.js manual warns some features do not work from a file. Use npm run dev.
• Mixing three.js versions (for example a CDN addon with an npm core). The manual says to import everything from the same version.
• Old tutorial imports. Older code imports from three/examples/jsm/...; current docs use three/addons/....
• Absolute paths on itch.io. Set base: './' and load models with ./models/....
• Huge prompts. Ask for one feature, test it, commit, repeat.

Sources (checked October 19, 2026)

• three.js manual: Installation and GLTFLoader docs
• three.js releases (r186) and three on npm
• Vite getting started and Vite shared options (base)
• itch.io: Uploading HTML5 games
• Cloudflare Pages limits
• Meshy pricing
• Phaser on GitHub

FAQ

Is three.js free?

Yes. three.js is open source under the MIT license (per its npm package). The latest release when we checked on October 19, 2026 was r186, published on npm as three 0.186.1.

Do I need to know JavaScript?

It helps a lot. An AI coding agent such as Claude Code, Codex or Cursor can write most of the code, but you still read errors in the browser console, describe bugs clearly, and decide what feels fun. If you want zero code, try Rosebud AI instead.

Which AI coding tool should I use?

Any of the three works with a plain Vite project. Claude Code needs Claude Pro ($20/mo monthly) or higher; Codex has limited access on ChatGPT Free and Go and full CLI access from Plus ($20/mo); Cursor has a limited free plan. Prices are from our directory entries, checked October 2026. See our Claude Code vs Codex vs Cursor guide.

Can I use Meshy models for free?

You can generate with Meshy's free 100 monthly credits, but Meshy's help center says free accounts cannot download models made with Meshy 6 or Meshy 7. Free plan outputs are licensed CC BY 4.0, so credit Meshy. Pro is $20/mo per meshy.ai/pricing (October 2026).

Where can I host a three.js game for free?

Two easy options: upload the Vite dist folder as a ZIP to itch.io as an HTML game, or deploy dist to Cloudflare Pages (free plan allows up to 20,000 files and 25 MiB per file, per Cloudflare's limits page, last updated September 5, 2026).

Should I use Phaser instead?

If your game is 2D (platformer, top down, puzzle), Phaser is usually the simpler pick because it ships sprites, tilemaps, input and physics for 2D. three.js is a 3D rendering library, so you add game structure yourself.