LoginRegister

What Is Three.js?

Three.js is a free, open-source JavaScript library for rendering 3D graphics in a web browser using WebGL or WebGPU. It wraps the browser's low-level graphics APIs in a much friendlier scene graph (cameras, lights, meshes, materials), so you can build interactive 3D experiences with plain JavaScript and no plugin, app or install required for the visitor.

Last updated . Verified against three.js r181.

Read the FAQJump to code

What Three.js actually is

Three.js is a rendering library, not a game engine, a modeling tool, or a physics engine. It takes the browser's native graphics APIs, WebGL and now WebGPU, which are powerful but extremely low-level and verbose to use directly, and wraps them in an object-oriented scene graph: you create a Scene, add Mesh objects built from a Geometry and a Material, position a Camera, add Light objects, and call renderer.render(scene, camera).

It's the most widely used 3D library for the web by a large margin: the largest ecosystem, the most tutorials, the most Stack Overflow answers, and the framework most other web 3D tools (like React Three Fiber) are built on top of. It's free, open source, and has no licensing cost regardless of what you build with it.

What Three.js is not

It's worth being precise about the boundaries, since "3D library" gets conflated with a lot of adjacent things:

  • Not a game engine. No built-in physics, no visual editor, no asset pipeline tooling out of the box; you add those yourself. See the physics guide for how that composition works in practice.
  • Not a 3D modeling tool. You don't sculpt or model inside Three.js; you build models in Blender, Maya or similar and load them in. See the GLTFLoader guide.
  • Not a rendering engine that replaces the browser. It runs inside a normal web page, alongside your regular HTML/CSS/JS, not as a separate application.
  • Not exclusive to WebGL anymore. Modern Three.js also supports WebGPU as a rendering backend. See WebGPU vs WebGL for what that changes.

The renderer choice: WebGL vs WebGPU

Three.js can render through two different browser graphics APIs. WebGLRenderer has been the default for over a decade and runs in essentially every browser. WebGPURenderer is newer, exposes compute shaders, and has lower CPU overhead. Importantly, it now falls back to WebGL automatically where WebGPU isn't available, which is why most new projects can simply start with WebGPURenderer today. Full comparison: WebGPU vs WebGL.

The ecosystem around Three.js

Three.js's minimalism is exactly why a large ecosystem has grown around it, rather than everything living in the core library:

  • React Three Fiber: write Three.js scenes as React components, plus its own ecosystem (drei helpers, postprocessing, physics bindings).
  • TresJS: the equivalent idea for Vue.
  • Physics: Cannon.js, Rapier or Ammo.js, added separately.
  • TSL: the node-based shading language for custom materials on both WebGL and WebGPU.
  • A large tools directory: loaders, editors, converters and helper libraries; browse the full tools directory.

When Three.js isn't the right fit, such as when you just need to display a model or want a hosted visual editor, see Three.js alternatives.

Code

The smallest possible scene (r181)
1import * as THREE from 'three'
2
3const scene = new THREE.Scene()
4const camera = new THREE.PerspectiveCamera(50, innerWidth / innerHeight, 0.1, 100)
5camera.position.z = 3
6
7const renderer = new THREE.WebGLRenderer()
8renderer.setSize(innerWidth, innerHeight)
9document.body.appendChild(renderer.domElement)
10
11const cube = new THREE.Mesh(new THREE.BoxGeometry(), new THREE.MeshStandardMaterial({ color: 'orange' }))
12scene.add(cube)
13scene.add(new THREE.DirectionalLight(0xffffff, 2).translateZ(3))
14
15renderer.setAnimationLoop(() => {
16  cube.rotation.y += 0.01
17  renderer.render(scene, camera)
18})
The same scene on WebGPU (r181)
1import * as THREE from 'three/webgpu'
2import { color } from 'three/tsl'
3
4const renderer = new THREE.WebGPURenderer() // falls back to WebGL automatically
5renderer.setSize(innerWidth, innerHeight)
6document.body.appendChild(renderer.domElement)
7
8const material = new THREE.MeshStandardNodeMaterial()
9material.colorNode = color(0xffa500)
10const cube = new THREE.Mesh(new THREE.BoxGeometry(), material)
11// ...scene/camera/light setup identical to the WebGL version above

Learn this properly

Learn Practical TSL

Your First Node Material

The fastest hands-on way to go from "what is Three.js" to actually building with it.

Start the lesson (6 minutes) →

Frequently asked questions

Is Three.js a programming language?

No. Three.js is a JavaScript library. You use it from regular JavaScript or TypeScript code; it doesn't introduce a new language, just a set of classes and APIs for building and rendering 3D scenes.

Is Three.js free to use?

Yes. Three.js is open source under the MIT license, free for both personal and commercial projects with no licensing fee.

Do I need to know WebGL to use Three.js?

No. Three.js exists specifically so you don't have to write raw WebGL. It provides a scene graph, materials and geometries as a much friendlier abstraction. Understanding roughly how a GPU renders things helps for advanced work, but it's not a prerequisite to start.

What can you build with Three.js?

Product configurators, data visualizations, interactive portfolios, browser games, WebXR/VR experiences, generative art, and any other real-time 3D content that runs in a web browser. See the showcase for real production examples.

Keep reading

React Three Fiber

React Three Fiber (R3F) is a React renderer for Three.js: it lets you build a Three.js scene declaratively as React comp…

WebGPU vs WebGL

WebGPU is the successor to WebGL: a lower-level, more modern graphics API that exposes compute shaders and reduces CPU o…

Three.js Alternatives

The main alternatives to Three.js are Babylon.js (a more complete, batteries-included engine), PlayCanvas (an engine wit…

All What is Three.js

Back to the what is three.js hub.