AI / Workflows
AI workflows for Three.js
The loop that turns a prompt into a scene that renders: which tool to reach for, how to open, what to load into the agent, and how to iterate without breaking what already works.
- 01Choose the model on evidence
- 02Open with a walking skeleton
- 03Load a Three.js agent skill
- 04Verify in the browser, not the diff
ChatGPT
Bolt.new
From asking to done, in 3 steps
An AI workflow is everything around the prompt: the tool you picked, the context the agent is holding, and the checks you run before you accept a change. Get those right and a model that was inventing APIs an hour ago starts producing scenes you can ship.
Pick the tool
Three.js is a narrow, fast-moving API, and assistants differ sharply on it. Chat suits a single scene. Once the project spans files, a coding agent that reads your repo is worth the setup.
Open with a proven prompt
Your first prompt sets the architecture for everything after it. Ask for a walking skeleton first (renderer, camera, one lit object, animation loop, resize handler) and describe the idea only once that runs.
Iterate against what renders
Judge the frame rather than the code. Describe what looks wrong in plain words and change one thing per pass. Keep the last version that worked, so a bad turn costs you a minute instead of an afternoon.
Step 01 in depth
Tool choice is the biggest single variable
Three.js exposes a narrow, quickly moving API, and general coding ability does not predict how well a model handles it. The same assistant that writes clean application code will reach for lighting and colour-management settings that were removed revisions ago, or hand you a shader that never compiles.
Match the tool to the job. A chat assistant handles a single self-contained scene. A coding agent earns its setup once the project spans files and you want it reading what already exists. Keep the choice under review, because capability moves with every release.
- 01Match the tool to the job
- 02Re-check after each release
- 03Agents for multi-file work
Sponsorship
Support us, grow the community
Three.js Resources is independent and free to use. Take a sponsored slot to help keep it growing, and put your product in front of 200,000+ monthly visitors building 3D on the web.
Get a Sponsor Slot →
Step 02 in depth
Give the agent the context it is missing
Most Three.js mistakes come from staleness rather than stupidity. Training data skews to older revisions, so models write code that was correct two years ago. Two cheap fixes cover nearly all of it: name the Three.js version in your prompt, and load an agent skill that carries the current APIs.
Skills matter most where guessing hurts most: WebGPU, TSL node materials and post-processing. Wrong code there often renders nothing at all rather than throwing an error you can read.
- 01Pin the revision in the prompt
- 02Load a WebGPU / TSL skill
- 03Start from a proven prompt
Step 03 in depth
Iterate on the frame, not the diff
Three.js has an advantage over most AI-assisted work, which is that the result is visible immediately. Judge each pass by what renders, describe what looks wrong the way you would to another person, and change one thing at a time so you always know which change caused which effect.
Commit every version that works. When a pass goes bad, reset to the last good commit instead of asking the model to unpick its own edit. Recovery prompts usually add damage rather than removing it.
- 01One change per pass
- 02Commit every working scene
- 03Reset instead of unpicking
F.A.Q
Frequently Asked Questions.
Everything people ask about running the AI workflow.
The basics
What the workflow is, and why models struggle.
It is the repeatable loop around the model: choosing an assistant that handles 3D well, opening with a prompt that reliably produces a running scene, loading an agent skill so the assistant uses current Three.js and WebGPU APIs, then iterating against what actually renders in the browser. The loop matters more than the model. Without it you get plausible code that throws on load.
Training data is dominated by older Three.js versions, so models reach for APIs that were removed or renamed: legacy lighting and colour-management settings, geometry classes that no longer exist, shader patterns from before TSL. The library also ships roughly monthly, so even a recent model is behind. Naming your revision in the prompt and loading an agent skill fixes most of it.
Tools & context
What to load, and which assistant to use.
Yes, and they help most where models are weakest. A skill file loaded into Claude Code or Cursor gives the agent current API signatures for WebGPU, TSL and post-processing, which is where a guessed call fails silently instead of erroring. For the effort involved it is the biggest single improvement you can make.
Chat is faster for a single self-contained scene, or a snippet you will paste in yourself. A coding agent that edits files in your repo and runs the dev server is better once the project has more than a couple of files, because it can read what already exists instead of rebuilding it from your description.
It can, with help. TSL is recent enough that unguided models fall back on GLSL patterns that do not compile against the node material system. Load a WebGPU or TSL skill, name the Three.js revision you are on, and ask for small node graphs you can check one at a time rather than a finished effect.
Staying in control
Keeping a working scene working.
Commit every version that renders, ask for one change at a time, and make the assistant state what it intends to change before it changes it. When a pass goes wrong, reset to the last good commit. Recovery prompts tend to compound the damage rather than undo it.
Ready to run the workflow?
Start from a prompt that already works, then load the skill your agent needs.