Three.js

What it is

Three.js is a JavaScript library for drawing 3D graphics in the browser. The project describes its aim as an “easy-to-use, lightweight, cross-browser, general-purpose 3D library”, and that is a fair summary. It gives you a scene graph, cameras, lights, materials, geometry, loaders for common formats such as glTF, and renderers that sit on top of WebGL and WebGPU. SVG and CSS3D renderers are available as add-ons.

It is a library rather than an engine. There is no editor you are expected to live in (there is a basic web editor, but most people never touch it), no built-in physics, no entity system and no opinion about how your game loop should be structured. You get rendering, maths and asset loading, and you build the rest yourself or pull it in from elsewhere.

It has been around since 2010, it is MIT licensed, and releases are numbered rather than semantically versioned: at the time of writing the homepage shows r185. Expect small breaking changes between releases and keep the official migration guide to hand when you upgrade.

Where it fits in AI game development

Three.js is probably the most common target when people ask a language model for “a 3D thing in the browser”. There are a few reasons for that. It has been popular for a long time, so there is a very large body of example code, forum answers and tutorials for models to have learnt from. It runs from a single HTML file with no build step if you want it to, which makes generated prototypes easy to open and share. And the API is small enough that a model can hold most of it in its head.

In practice it serves three purposes:

• Fast prototypes. Describe a mechanic, have an assistant write a self-contained Three.js page, open it, iterate. For testing whether an idea feels right, this loop is hard to beat.
• Visualising simulations. Agent-based models, flocking, cellular automata and economic toys are often easier to understand in 3D. Three.js is a thin, fast layer for drawing thousands of instanced objects driven by your own simulation code.
• A renderer for AI-generated assets. Image-to-3D and text-to-3D tools typically export glTF or GLB, which Three.js loads with GLTFLoader.

The caveat with AI-written Three.js code is version drift. Models trained on older material will sometimes reach for removed APIs or old import paths. If generated code throws on load, that is the first thing to check.

Strengths

• Small and focused. You only pay for what you use, and the core concepts (scene, camera, renderer, mesh) are few.
• Examples. The official examples page is one of the best learning resources in web graphics. Most techniques you need already have a working example you can read.
• Ecosystem. Physics libraries, post-processing, and React bindings (React Three Fiber) all exist as separate projects, so you can assemble the stack you want.
• WebGPU path. The library ships both WebGL and WebGPU renderers, so you can start on WebGL today and move over as browser support settles.
• Permissive licence. MIT means no royalties and no awkward terms for commercial work.

Limits

• It is not a game engine. Physics, input handling, audio management, UI, save systems and level tooling are your problem. For a real game, that is a lot of glue code, and AI assistants will happily generate glue code that does not scale.
• No real editor workflow. If you want to lay out levels visually, you will be leaning on Blender or a third-party tool.
• Breaking changes. The release-number scheme and willingness to change APIs mean older tutorials, and older model knowledge, go stale.
• Performance is on you. Draw calls, instancing, texture sizes and garbage collection all matter, and Three.js will not stop you making slow choices.

Getting started

Install it from npm and use it with any bundler (Vite is a sensible default):

npm install three

This is lightly adapted from the example in the project’s README. It renders a spinning cube:

import * as THREE from 'three';

const width = window.innerWidth, height = window.innerHeight;

const camera = new THREE.PerspectiveCamera(70, width / height, 0.01, 10);
camera.position.z = 1;

const scene = new THREE.Scene();
const mesh = new THREE.Mesh(
  new THREE.BoxGeometry(0.2, 0.2, 0.2),
  new THREE.MeshNormalMaterial()
);
scene.add(mesh);

const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(width, height);
renderer.setAnimationLoop((time) => {
  mesh.rotation.x = time / 2000;
  mesh.rotation.y = time / 1000;
  renderer.render(scene, camera);
});
document.body.appendChild(renderer.domElement);

From there, read the manual’s “Creating a scene” page, then browse the examples for whatever you need next: loading glTF models, shadows, instancing or post-processing. When asking an assistant for Three.js code, state which release you are on and ask it to use ES module imports from three and three/addons/.

Verdict

Three.js is the right choice when you want 3D in the browser and prefer to own the architecture yourself. It is excellent for prototypes, visualisations and AI-assisted experiments, and it pairs well with generated 3D assets. If you want physics, tooling and structure out of the box, look at Babylon.js or a full engine instead.