three.js is a free, open source gaming project written in JavaScript and released under MIT. It has 115,636 GitHub stars, 36,557 forks and 386 open issues, and was last pushed 7 hours ago. On this registry it ranks #2 of 12 tracked projects in Gaming, with 5 head-to-head comparisons available.

What is three.js?

three.js is an MIT-licensed JavaScript 3D library that provides an easy-to-use, lightweight, cross-browser, general-purpose layer for rendering interactive 3D graphics in the browser, aimed at JavaScript developers who need 3D scenes on the web without writing raw GPU code.

What it is

three.js is an open-source JavaScript 3D library distributed through the npm package three and maintained in the mrdoob/three.js repository. It has accumulated roughly 115,636 stars and 36,557 forks, with 386 open issues at the time of the last recorded push. The project describes its aim as creating an easy-to-use, lightweight, cross-browser, general-purpose 3D library. The current builds include only the WebGL and WebGPU renderers, while the SVG and CSS3D renderers are shipped as addons. The core API is organised around a scene graph: THREE.Scene holds meshes, THREE.PerspectiveCamera defines the view, and geometry plus material objects such as THREE.BoxGeometry and THREE.MeshNormalMaterial are combined into a THREE.Mesh.

The concrete problem three.js solves is the volume of low-level browser graphics boilerplate that otherwise sits between a developer and a rendered frame. Instead of hand-writing WebGL or WebGPU context setup, shader plumbing, and the draw loop, a developer creates a camera, a scene, and a renderer, appends renderer.domElement to document.body, and calls renderer.setAnimationLoop(animate). The example in the README builds a rotating cube in a few dozen lines and links to a runnable fiddle. It lives in the JavaScript and browser ecosystem, and it replaces direct WebGL and WebGPU usage for general-purpose 3D work.

Key capabilities

  • Core entry point is the npm package three, imported as import * as THREE from 'three', with builds also served through jsDelivr.
  • WebGL and WebGPU renderers ship in the current builds; THREE.WebGLRenderer accepts options such as { antialias: true } and exposes setSize and setAnimationLoop.
  • SVG and CSS3D renderers are available as addons rather than part of the default builds.
  • Scene-graph primitives including THREE.Scene, THREE.PerspectiveCamera, THREE.BoxGeometry, THREE.MeshNormalMaterial, and THREE.Mesh cover camera, geometry, material, and mesh construction.
  • Topic coverage spans 3D, augmented reality, virtual reality, WebXR, WebGL, WebGL2, WebGPU, Canvas, SVG, HTML5, and WebAudio.
  • Documentation surface includes the maintained Examples, Docs, Manual, Wiki, and a dedicated Migration Guide for version upgrades.
  • Releases are tracked through GitHub Releases, and version distribution is visible through the npm package badge.

Who uses it and how

  • Developers building browser-based 3D scenes and games, the category the registry lists it under, use the scene-graph API alongside the WebGL or WebGPU renderer.
  • Teams targeting immersive experiences rely on the WebXR, augmented reality, and virtual reality topics to drive headset and device rendering.
  • Contributors and integrators clone the repository, often with git clone --depth=1 https://github.com/mrdoob/three.js.git, because a full-history clone is a roughly 2 GB download.
  • Application teams depend on the npm package for versioned upgrades and consult the Migration Guide when moving between releases.
  • Users route questions and discussion through the Stack Overflow three.js tag, the Discourse forum at discourse.threejs.org, and the project Discord server.

Getting started

The primary path is the npm package three, installed as a dependency and imported with import * as THREE from 'three'; the README's complete example then creates a camera, scene, cube mesh, and WebGLRenderer in a single file. Full documentation, examples, and the manual are hosted at threejs.org.

How it compares

The facts provided list no paid or commercial products that three.js replaces, and they name no comparable sibling library in this registry. On the information available, it stands alone in this registry.

When to use it — and when not to

three.js is a client-side library, so a self-hoster operates no database, object storage, or SMTP service, only static JavaScript assets and a page that imports them. The README is deliberately sparse: it is close to a single usage snippet with badges, and installation and deployment guidance lives on the external site rather than in the repository. Teams that need a non-JavaScript runtime, a bundled editor or asset pipeline, or exhaustive in-repo documentation should look elsewhere, and contributors should expect a 2 GB full-history clone unless they pass the depth parameter.

project readme (upstream, from github) — read inline

three.js

NPM Package Build Size NPM Downloads jsDelivr Downloads Discord

JavaScript 3D library

The aim of the project is to create an easy-to-use, lightweight, cross-browser, general-purpose 3D library. The current builds only include WebGL and WebGPU renderers but SVG and CSS3D renderers are also available as addons.

ExamplesDocsManualWikiMigratingQuestionsForumDiscord

Usage

This code creates a scene, a camera, and a geometric cube, and it adds the cube to the scene. It then creates a WebGL renderer for the scene and camera, and it adds that viewport to the document.body element. Finally, it animates the cube within the scene for the camera.

import * as THREE from 'three';

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

// init

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

const scene = new THREE.Scene();

const geometry = new THREE.BoxGeometry( 0.2, 0.2, 0.2 );
const material = new THREE.MeshNormalMaterial();

const mesh = new THREE.Mesh( geometry, material );
scene.add( mesh );

const renderer = new THREE.WebGLRenderer( { antialias: true } );
renderer.setSize( width, height );
renderer.setAnimationLoop( animate );
document.body.appendChild( renderer.domElement );

// animation

function animate( time ) {

	mesh.rotation.x = time / 2000;
	mesh.rotation.y = time / 1000;

	renderer.render( scene, camera );

}

If everything goes well, you should see this.

Cloning this repository

Cloning the repo with all its history results in a ~2 GB download. If you don't need the whole history you can use the depth parameter to significantly reduce download size.

git clone --depth=1 https://github.com/mrdoob/three.js.git

Change log

Releases

Frequently asked questions

Is three.js free to use?

three.js is open source under the MIT licence. There is no licence fee and no seat count — you can self-host it or, where the project offers one, pay a vendor for a managed version instead.

What does three.js do?

JavaScript 3D Library.

What is three.js written in?

three.js is primarily written in JavaScript. Its source is publicly available at https://github.com/mrdoob/three.js, and it has 115,636 GitHub stars.