← All open source projects

three.js

mrdoob/three.js

three.js is a JavaScript library for 3D graphics in the browser: scenes, cameras, materials, animation, WebGL, and WebGPU.

Forks 36,382
Author mrdoob
Language JavaScript
License MIT
Synced 2026-06-07

What it is

three.js is a JavaScript library for creating 3D graphics in the browser. It hides much of the low-level WebGL and WebGPU work while keeping understandable concepts: scene, camera, geometry, material, light, renderer, and animation loop.

It is not a full game engine. three.js provides the graphics layer and a large set of examples, while game logic, physics, state, and application UI are assembled by the developer or added through other libraries.

How it appeared and why it stuck

The project began when 3D in the browser was a difficult low-level task. three.js offered a friendlier model: write a scene in JavaScript and get the result in a normal browser without a separate player.

Over time the library became the standard name for web 3D. It is used in product demos, configurators, learning scenes, artistic sites, editors, data visualization, and game prototypes.

What is inside

The repository includes the library core, additional renderers, format loaders, materials, geometries, examples, documentation, and a manual. The example gallery is especially valuable because it shows real techniques that can be adapted into projects.

A cube in a scene

This example shows the basic three.js model: a camera looks at a scene, an object is added to the scene, and the renderer draws each frame in a loop.

Language: JavaScript
import * as THREE from "three";

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(70, innerWidth / innerHeight, 0.01, 10);
camera.position.z = 1;

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

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

renderer.setAnimationLoop((time) => {
  cube.rotation.y = time / 1000;
  renderer.render(scene, camera);
});

Where it helps

three.js helps when 3D should live directly inside a web product: a product viewer, room map, learning simulation, molecule visualization, game scene, or material editor.

If you need a complete game architecture with physics, scenes, assets, and an editor, three.js alone may be too low level. For embedded graphics and custom interfaces, that flexibility is often the point.

Strengths and limits

The strength is maturity and a huge example base. Almost any common task can be found first in the official gallery and then adapted.

The limitation is that performance and scene complexity remain the developer’s responsibility. Model, texture, shadow, and object-count optimization do not disappear just because the library is pleasant to use.