Three.js

Three.js
Name	Three.js
Caption	A 3D scene rendered with the library, showing a torus knot with realistic materials and lighting.
Developer	Ricardo Cabello and community
Released	24 April 2010
Programming language	JavaScript
Genre	3D graphics library
License	MIT License

Three.js. It is a cross-browser JavaScript library and application programming interface used to create and display animated 3D computer graphics in a web browser. The library provides a high-level abstraction over WebGL, making complex 3D rendering accessible without requiring deep knowledge of the underlying graphics pipeline. It is a core project within the ecosystem of tools for web-based real-time computer graphics and interactive experiences.

Overview

The primary goal is to simplify the process of building 3D animation and visualizations for the World Wide Web. It acts as a scene graph, where developers can create a hierarchical structure of 3D objects, materials, lighting, and cameras to be rendered. By handling the complexities of WebGL shaders and matrix transformations, it allows artists and engineers to focus on creative and application logic. Its architecture is designed to be flexible, supporting various renderers including WebGL 2.0, WebGPU, SVG, and Canvas.

Core Concepts

Fundamental to its design are several key abstractions. The Scene object serves as the root container for all objects, lights, and cameras. Meshes are created by combining a Geometry (like BoxGeometry or SphereGeometry) with a Material (such as MeshBasicMaterial or MeshPhongMaterial). A Camera, typically a PerspectiveCamera or OrthographicCamera, defines the viewer's perspective. The WebGLRenderer manages the drawing of the scene to the screen, while animation loops are driven by requestAnimationFrame.

Features and Capabilities

It includes a wide array of features for building sophisticated applications. Support for various light sources includes AmbientLight, DirectionalLight, PointLight, and SpotLight. Advanced materials support bump mapping, environment mapping, and normal mapping. The library includes loaders for many 3D formats, such as glTF, OBJ, FBX, and Collada. Post-processing effects like bloom, depth of field, and screen-space ambient occlusion are available through the EffectComposer. It also supports physics engines, virtual reality via WebXR Device API, and augmented reality experiences.

Development and Ecosystem

The project is developed as open-source software primarily on GitHub, with significant contributions from a large community including organizations like Google and Mozilla. The codebase is maintained using modern JavaScript tools and follows semantic versioning. A rich ecosystem of plugins and extensions has emerged, such as Physi.js for physics, Three.js Inspector for debugging, and Post-processing libraries. The official documentation includes extensive examples and an active community forum for support, fostering its use in both commercial and academic projects like those at MIT Media Lab.

Applications and Examples

It is employed in a diverse range of fields requiring interactive 3D content. Notable uses include data visualization in projects by NASA, interactive product configurators for companies like BMW, educational simulations, and video games playable directly in the browser. Artistic and experimental websites, such as those featured on Chrome Experiments and Awwwards, often leverage its capabilities for creative storytelling. It is also a foundational technology for online museum exhibits, architectural visualization, and metaverse platforms.

History and Background

The library was initially created by Spanish developer Ricardo Cabello (known as Mr.doob) and first released to the public in April 2010. Its development was motivated by the limitations of early Adobe Flash for 3D and the advent of the WebGL standard, which was pioneered by Vladimir Vukićević at Mozilla. Early versions were heavily influenced by the ActionScript library Papervision3D. Over time, it evolved through major revisions, with r71 being a significant update that refined the API and introduced a modular architecture. Its growth has been closely tied to the advancement of web standards like ECMAScript 2015 and the increasing performance of JavaScript engines in browsers like Google Chrome and Mozilla Firefox.

Category:3D graphics software Category:JavaScript libraries Category:WebGL Category:Free graphics software Category:Free software programmed in JavaScript