Three.js

What is Three.js?

Three.js is an open-source JavaScript library for creating 3D content in the browser, created by Ricardo Cabello, known online as Mr.doob, and first released in April 2010. It was one of the first projects to make WebGL approachable, and it remains the default choice for browser 3D.

The library wraps WebGL in a clean object-oriented API. You create a scene, add objects like meshes and lights, attach a camera, and let the library handle rendering, matrices, shaders and the graphics pipeline for you. A rotating 3D cube takes about ten lines of code.

Today Three.js is used far beyond games: product configurators, data visualizations, architecture walkthroughs, interactive art and even film previsualization all run on it. Because it is just a JavaScript module, it integrates with React, Vue, Svelte and every other web framework.

Key Features

• Full 3D scene graph with meshes, cameras and lights
• WebGL rendering with WebGPU support in newer releases
• Materials, textures, shaders and post-processing effects
• Loaders for glTF, OBJ, FBX, STL and many other formats
• Animation system with keyframes and blending
• Built-in geometry, math and camera controls helpers
• Huge community with thousands of examples and add-ons
• Small dependency footprint as an npm package

How to get started

The fastest way to start is the official three.js editor and the examples page, where every demo has viewable source. For a real project, install three from npm in a Vite project and import what you need.

The canonical first program creates a scene, a camera, a box mesh and a light, then starts a render loop. The official documentation site has a manual that explains the core concepts, and the three.js journey community course walks through everything from primitives to post-processing in friendly language.

• Create a project and install three with npm
• Follow the 'Creating a scene' tutorial on threejs.org
• Add a camera, a mesh and a light to your scene
• Start the animation loop to render every frame
• Browse the official examples for ideas and patterns

Use cases

• Browser games and interactive 3D experiences
• Product configurators and 3D previews in ecommerce
• Data visualization and 3D charts in the browser
• Architecture and interior walkthroughs
• Interactive art, shader showcases and WebGL demos
• Embedding 3D content in React and other web apps

Pricing and licensing

Three.js is free and open source under the MIT license. You can use it in commercial products, closed-source applications and client work with no fees, no royalties and no attribution requirements.

The project is maintained by a volunteer core team and the Three.js Foundation, funded through donations and sponsors. All of its features, examples and documentation are available at no cost.

Pros and cons

Three.js's strengths are its reach, its simplicity and its incredible ecosystem. It runs in every modern browser, the learning curve from JavaScript is short, and the sheer number of examples, tutorials and community add-ons means you can almost always find a starting point.

The trade-offs: Three.js is a graphics library rather than a full game engine, so you must bring your own game loop, physics, input handling and scene management. For 2D games or full game engine features, a framework like Phaser or Babylon.js may fit better.

Alternatives

• Babylon.js: full web 3D engine with an editor and game features
• Phaser: 2D JavaScript game framework for the browser
• PixiJS: fast 2D WebGL renderer for web games and apps
• Unity: exports 3D games to the browser via WebGL
• PlayCanvas: web-based 3D engine with a visual editor