Three.js
A widely used JavaScript library for 3D graphics on the web
js is a JavaScript library that provides a high-level scene graph API — cameras, lights, materials, geometries, and renderers — over WebGL (and increasingly WebGPU), making it dramatically easier to build 3D graphics for the browser than…
Definition
Three.js is a JavaScript library that provides a high-level scene graph API — cameras, lights, materials, geometries, and renderers — over WebGL (and increasingly WebGPU), making it dramatically easier to build 3D graphics for the browser than writing raw WebGL.
Overview
Three.js was created by Ricardo Cabello (known as Mr.doob) in 2010 and has since become the most widely used 3D graphics library for the web. Its core contribution is abstracting away WebGL's verbose, low-level API — manual buffer management, shader compilation, and render state tracking — behind a familiar scene-graph model: a `Scene` containing `Mesh` objects composed of `Geometry` and `Material`, illuminated by `Light` objects, and viewed through a `Camera`, all rendered by a `WebGLRenderer` (or, more recently, an experimental `WebGPURenderer`). The library ships an extensive set of built-in geometries (boxes, spheres, planes, extrusions), materials (basic, standard PBR, physical, toon), loaders for common 3D file formats (glTF, OBJ, FBX), and post-processing effects (bloom, depth of field, outline). It also includes controls for common camera interaction patterns (orbit, first-person, trackball) and integrates with physics engines and animation systems for more complete interactive scenes. Three.js underpins a large share of production 3D web experiences: product configurators, architectural walkthroughs, data visualizations, WebXR (VR/AR) experiences, and browser-based games. Its React ecosystem counterpart, React Three Fiber, lets developers describe Three.js scenes declaratively as React component trees, which has significantly increased its adoption among web application developers who are not graphics specialists. Compared to Babylon.js, Three.js is generally seen as more minimal and closer to a rendering toolkit, giving developers more flexibility but requiring more manual assembly for game-engine-style features (physics, full scene editors), which Babylon.js bundles more comprehensively out of the box.
Key Features
- High-level scene graph API abstracting WebGL's low-level rendering pipeline
- Extensive built-in geometries, materials (including PBR), and lighting models
- Loaders for common 3D formats (glTF, OBJ, FBX, DRACO-compressed meshes)
- Built-in post-processing effects pipeline (bloom, depth of field, SSAO)
- Camera control helpers (orbit, first-person, trackball controls)
- Growing WebGPURenderer support alongside its mature WebGLRenderer
- Large ecosystem including React Three Fiber for declarative React integration
- Extensive community examples and one of the largest 3D web communities
Use Cases
Alternatives
Frequently Asked Questions
From the Blog
The Three Pillars of Observability and How to Use Them
Metrics tell you something is wrong, traces tell you where, and logs tell you why. Learn what question each signal answers, where each one goes blind, and how to instrument a service so an incident becomes a short investigation rather than a guessing game.
Read More Cloud & CybersecurityJWT Explained: How Token Authentication Works
Learn how JSON Web Tokens work: their three-part structure, signatures, stateless authentication, and the security pitfalls every developer should avoid.
Read More ProgrammingUnderstanding HTTP Status Codes for Developers
HTTP status codes are three-digit signals a server returns to describe a request's outcome. Learn the five classes and the codes every developer must know.
Read More AI & TechnologyWhat Is an Epoch, Batch and Iteration in Training
An epoch is one full pass over your training data, a batch is a slice of it, and an iteration is one weight update. Here is how the three fit together.
Read More