Right, so this is one of those things that sounds harder than it is. You tell an AI assistant what shape you want, in plain English, and it writes actual working code for a 3D scene that spins in a browser. I mean, it won’t get it right first go, usually. But that’s fine, that’s the whole point of the workflow.

What you’ll be able to do

You’ll be able to build interactive 3D scenes for the web using Three.js, with an AI assistant doing most of the code-writing and debugging. Think a spinning product model, a little generative art piece, a 3D logo that reacts to your mouse. Three.js is the library doing the heavy lifting under the hood, it handles the maths of cameras, lights, and geometry so you don’t have to. The AI’s job is to translate your idea into the specific calls Three.js wants, and then to fix whatever breaks when you actually run it.

This isn’t “AI makes you a game studio.” It’s closer to: AI writes the boilerplate and the fiddly bits, you steer, and Blender (free, does the actual 3D modelling if you need custom shapes) sits alongside as your asset source. Assets in this world are almost always glTF or GLB files, plus materials and lights defined in code.

Before you start

A few things worth knowing before you open a chat window.

Three.js is an open-source JavaScript library for 3D in the browser. It’s not a drag-and-drop tool, it’s code, so you’re always going to end up looking at JavaScript. The AI writes it, you run it, that’s the deal.

AI assistants like ChatGPT and Claude are genuinely good at writing and fixing Three.js scene code from a plain description. Ask for a rotating cube with a light, you’ll get one. Ask it to fix an error message, it usually can. Where they struggle is currency: Three.js updates fairly often, and the API changes shape between versions. Assistants have a habit of writing code against an older version without telling you. Worth flagging early, because it’ll bite you later if you don’t.

Here’s the split I’d suggest. Hand over: writing scene setup code, debugging error messages, explaining what a bit of Three.js does, writing Blender Python scripts for procedural shapes. Keep for yourself: deciding what the thing should actually look like, testing it in an actual browser, checking performance, and any final creative call. The AI doesn’t know what “looks right” means for your project. You do.

Get set up

You need three things really: a code editor, a way to run a local server, and an AI assistant.

For the editor, Cursor is worth a mention here because it’s built specifically for this kind of AI-assisted coding, it sits in your project and can edit files directly rather than you copy-pasting everything back and forth. Claude Code works similarly from the terminal. Neither is essential though, plain ChatGPT or Claude in a browser tab plus a normal editor like VS Code does the job fine, it’s just more copy-paste.

For running the project, Vite is the standard choice, it’s a fast dev server that most Three.js tutorials and AI-generated setups assume by default. You’ll typically ask your assistant to scaffold this for you.

For the AI itself: ChatGPT, Claude, Gemini, Copilot, all of them can write Three.js code reasonably well. I tend to reach for Claude or ChatGPT for this specific job, mostly out of habit, but there’s no wrong answer here, try what you’ve already got access to first.

One setup step that actually matters: pin your Three.js version and tell the AI which docs to use. Something like this as your very first message in a new project:

I'm starting a new Three.js project using the current release (check the `three` package on npm for the latest version number — it looks like 0.1xx.0 — and use that exact number). Please write code using the current Three.js API, not older patterns. When you're not sure if something is current, say so and point me to the relevant page on threejs.org/docs. Set up the project using Vite. Give me the file structure and the exact terminal commands to get a blank scene running locally.

That last bit, the “say so if you’re not sure” instruction, does a surprising amount of work. It won’t stop every mistake but it cuts down on confidently wrong answers.

Try it yourself

Right, here’s the actual loop. It’s simple, and it repeats.

Describe the object. Ask for a minimal scene. Run it. Paste back the error, or describe what you’re seeing on screen. Refine. Then do it again.

Start small. Don’t ask for the finished thing on your first prompt, ask for the smallest working version.

Write a minimal Three.js scene: a rotating torus knot with basic lighting, on a dark background, that fills the browser window. Use Vite as the dev server. Give me the full contents of main.js and index.html, and the terminal command to run it.

Run that. You’ll get a shape spinning on screen, or you’ll get an error in your terminal or browser console. Either is fine, that’s data. If it’s an error, paste the exact text back, don’t summarise it:

I ran the code and got this error in the browser console: [paste the exact error text here]. Here's my current main.js: [paste your file]. What's wrong and can you give me the corrected file?

Once the basic scene works, this is where it gets fun, you start layering in what you actually wanted:

The torus knot scene works. Now I want to swap the shape for a custom model I'll export from Blender as a GLB file. Show me how to load a GLB into this Three.js scene using GLTFLoader, and write a short Blender Python script I can run inside Blender to generate a simple procedural rock shape and export it as rock.glb.

That third prompt is doing two jobs at once, which is a bit greedy of me, but it shows how the loop scales: once the base scene is solid, you can ask for loaders, procedural geometry, animation, whatever, one addition at a time. Don’t ask for five features in one prompt. You’ll get five half-working features and no idea which one broke.

Check the result

Don’t just eyeball it and call it done. A few concrete checks.

Open your browser’s developer console (F12, or right-click and Inspect) and actually read it, not just glance at it. Errors show up here even when the scene looks fine on the surface. Warnings about deprecated Three.js methods will show up here too, and they’re worth acting on, they’re usually the “outdated API” problem announcing itself early.

Check your frame rate. Most browsers have a performance or FPS overlay in dev tools, or you can ask your assistant to add a simple FPS counter to the scene temporarily. If it’s stuttering, the two usual suspects are draw calls (how many separate objects the scene is rendering, each one costs something) and texture size (a 4000x4000 pixel texture on a phone screen is wasted effort, and slow). Ask the AI directly:

This scene is running at [X] fps and feels sluggish on my laptop. Here's my scene code: [paste it]. Can you check for obvious performance issues, things like unnecessary draw calls, texture sizes, or geometry complexity, and suggest specific fixes?

Test in more than one browser if you can, Chrome and Firefox at minimum, because WebGL support and performance genuinely differ between them. And resize the window. A shocking number of first-attempt Three.js scenes only look right at the exact window size they were built at, because the camera aspect ratio isn’t being recalculated on resize.

Lastly, just look at it properly. Does the lighting make sense? Is the object the right size relative to everything else in the scene? Small stuff, but it’s the stuff an AI genuinely cannot judge for you.

If it doesn’t work

Sometimes the loop stalls. Usually it’s one of a few things.

The AI is using an old API and you didn’t catch it. Fix: ask directly, “is this current for the version I specified, and if not what changed.” Point it back at threejs.org/docs.

The error message you pasted was incomplete. Assistants can only work with what you give them, half an error and no context gets you a guess, not a fix. Paste the whole console output, and the relevant file, every time.

You asked for too much in one go. If a prompt has four features bundled into it and something breaks, you often can’t tell which feature caused it. Split it up, retest one thing at a time.

On privacy: don’t paste API keys, credentials, or anything from a private or client project’s config files into a chat window, even by accident, it happens more than you’d think when you’re pasting a whole file quickly. If your scene loads assets from a private server or has any authentication in it, strip that out before you paste the code, or just describe the shape of the problem instead of pasting the real file. Same goes for any real personal data baked into test content, don’t hand it over just because it happened to be in the file you copied.

And if none of that’s the issue and it’s still broken, it’s fine to just start the file again. Ask for the minimal working scene from scratch and rebuild your feature back in one step at a time. Sometimes that’s genuinely faster than debugging.

Questions people ask

Which AI assistant is best for writing Three.js code?

ChatGPT, Claude, Gemini and Copilot can all write Three.js code reasonably well. Claude or ChatGPT are a habitual choice for this job, but there's no wrong answer — try what you've already got access to first.

Why does AI-generated Three.js code use outdated methods?

Three.js updates fairly often and the API changes shape between versions, so assistants have a habit of writing code against an older version without telling you. Pin your version in your first message and ask it to flag when it isn't sure, pointing you to threejs.org/docs.

What do I need to set up before building a Three.js scene?

Three things: a code editor, a way to run a local server, and an AI assistant. Vite is the standard dev server most Three.js tutorials and AI-generated setups assume, and you'll typically ask your assistant to scaffold it.

How do I check my Three.js scene actually works?

Open the browser developer console (F12 or right-click and Inspect) and read it properly for errors and deprecation warnings, check your frame rate, test in Chrome and Firefox, and resize the window to catch aspect-ratio problems.

What shouldn't I paste into the chat when debugging Three.js?

Don't paste API keys, credentials, or anything from a private or client project's config files. Strip out authentication or private server details before pasting code, and don't hand over real personal data baked into test content.

Keep exploring

Once you’ve got a scene running and you’re comfortable with the loop, the natural next step is combining this with a proper site around it, which is where the guide on how to get AI to build me a website comes in. And if you need custom textures or 2D art assets to bring into your 3D scenes, the guide on how to get AI to create an image covers that side of things.

Three.js itself is a big library, this guide has really only covered the getting-started loop. There’s a lot more in the docs once you’re ready for it, shaders, physics, post-processing, the works.

Sources and review notes

Review date: 15 September 2026 — every source above was opened and checked against the text on that date.