How it works
Raw WebGL, the browser's low-level 3D interface, needs a lot of code just to draw a lit cube. Three.js wraps it in familiar ideas: a scene holds meshes (a geometry plus a material), lights and cameras, and a renderer draws the scene into a canvas every frame. It includes loaders for 3D models (glTF is the usual format), physically based materials, shadows, post-processing effects and camera controls, and it also offers a WebGPU renderer.
Ricardo Cabello (mrdoob) started it in 2010, and a large ecosystem has grown around it: React Three Fiber lets React developers build scenes as components, drei adds ready-made helpers, and physics engines such as Rapier or cannon-es plug in. Babylon.js is the main alternative, with more built in for games; for flat 2D graphics, the Canvas API or SVG is lighter.
The hard parts are rarely the code. Models and textures must be optimised (compressed, with fewer polygons) to keep downloads small, and scenes need testing on low-end phones, where the graphics chip and battery limit what runs smoothly.
Three.js pros and cons
Pros
- Far less code than raw WebGL, with a large gallery of examples
- Loads standard 3D models such as glTF
- Big ecosystem, including React Three Fiber and drei
- Runs in every modern browser without plugins
- MIT licensed and free
Cons
- Frequent releases that often include breaking changes
- 3D assets can be large and slow to load on mobile
- Needs some 3D knowledge (cameras, lights, materials) to look good
- Content inside the canvas is invisible to screen readers and search engines
When to use Three.js
Pick it when
- Product viewers and configurators that customers can rotate
- Interactive hero sections and brand experiences
- Data visualisations or maps that need real depth
- Browser games and simple simulations
Skip it when
- 2D charts or diagrams, where SVG or canvas is lighter
- A full game engine is needed (Babylon.js, Unity or Godot fit better)
Three.js pricing
Three.js vs the alternatives
Related terms
More in Media and documents
Graphics and 3D