Jump to content

Three.js

From VR & AR Wiki
Three.js
Information
Type 3D graphics library
Developer Ricardo Cabello (Mr.doob) and contributors
Written In JavaScript, GLSL
License MIT License
Release Date 24 April 2010
Website https://threejs.org

Three.js is an open-source JavaScript library and application programming interface (API) for creating and displaying 3D computer graphics in a web browser.[1] It abstracts the low-level WebGL and WebGPU graphics APIs into a higher-level scene-graph model of cameras, lights, materials, and meshes, so that GPU-accelerated 3D scenes can be built in JavaScript without browser plugins.[2] Three.js includes a WebXR integration that turns a scene into a virtual reality or augmented reality experience, which is the basis for much of the library's use in browser-based VR and AR.[3]

The library was created by the Spanish programmer Ricardo Cabello, who works under the name Mr.doob, and was first released on 24 April 2010.[2] It is distributed under the MIT License and developed on GitHub, where it has more than 2,000 contributors and over 113,000 stars, making it one of the most widely used 3D libraries on the web.[1][4] The most recent release as of 2026 is revision r184, published on 16 April 2026.[1]

History

Three.js grew out of Cabello's work in the demoscene and his earlier experiments with 3D graphics in Adobe Flash. He had written a 3D engine in ActionScript for Flash, named three.as, before porting the renderer to JavaScript in 2009 as web browsers began to gain native graphics capabilities.[2] The first JavaScript version was published to GitHub on 24 April 2010.[2]

Early versions rendered through software paths such as a 2D Canvas renderer and an SVG renderer rather than the GPU. WebGL support was added by contributor Paul Brunt as the standard became available in browsers, and Firefox 4 shipped WebGL 1.0 in March 2011.[2] The standalone 2D Canvas renderer was later moved out of the core library at revision r69, leaving WebGL as the primary renderer.[5] From revision r118 onward, the WebGL renderer defaults to WebGL 2.0.[2]

An experimental WebGPU renderer was developed alongside the WebGL one and reached a production-ready milestone in revision r171, released on 29 November 2024, which let developers swap in the WebGPU renderer with a one-line change and an automatic fallback to WebGL 2.0 where WebGPU is unavailable.[6] WebGPU reached baseline support across the major browsers, including Safari, in early 2026, making it usable for general audiences.[7]

Architecture and features

Three.js organizes a 3D world as a scene graph. A Scene object holds a hierarchy of objects; a camera defines the viewpoint; a renderer draws the scene to an HTML canvas element each frame.[2] The library provides geometry primitives, loaders for common 3D asset formats, and a range of materials and shading models, including Lambert and Phong shading and physically based rendering.[2]

Other built-in capabilities include keyframe animation, skeletal and morph-target animation, lights and shadows, particle systems, post-processing effects such as bloom and anti-aliasing, and integration with the Web Audio API for positional sound.[2] Shaders are written in GLSL, the OpenGL Shading Language, which is why the project is described as being written in JavaScript and GLSL.[2]

WebXR support

Three.js exposes virtual and augmented reality through the WebXR Device API, the browser standard that succeeded the earlier WebVR API for immersive sessions.[3] The library bundles a set of WebXR helpers in its examples and add-ons, the most prominent being VRButton and ARButton, helper classes whose createButton() method renders a button that checks for device support and starts a VR or AR session when activated.[8]

To render in XR, an application sets renderer.xr.enabled = true on the WebGL renderer and replaces the usual browser animation callback with renderer.setAnimationLoop(), which is driven by the headset's frame timing rather than the page's refresh rate.[3] The WebXR add-ons also cover input and tracking: controller models through XRControllerModelFactory, hand tracking through XRHandModelFactory, plane detection through XRPlanes, depth sensing, and lighting estimation through XREstimatedLight.[9] The repository ships runnable WebXR demos such as webxr_vr_sandbox, webxr_vr_panorama, and webxr_vr_rollercoaster.[9]

Because these sessions run inside a standard browser, a Three.js WebXR scene can be entered from a compatible headset without installing a native application; Chromium-based browsers and the browsers on standalone headsets implement the WebXR Device API for both VR and AR.[3]

VR and AR relevance

Three.js is one of the common foundations for WebXR content on the open web, used both directly and as the rendering layer beneath higher-level frameworks. The declarative VR framework A-Frame, originally developed by the Mozilla VR team, is an entity-component-system framework built on top of Three.js, so A-Frame scenes are ultimately rendered by it.[10] Browser-based VR and AR experiences, product configurators, and metaverse-style 3D environments frequently use Three.js for rendering, an approach distinct from native engines such as Unity and Unreal Engine in that the experience loads from a URL and runs in the browser.[2][3]

References