three.js

{{Infobox software

| name = Three.js

| screenshot = File:Three.js Icon.svg

| author = Ricardo Cabello (Mr.doob)

| developer = Three.js Authors{{cite web |url= https://github.com/mrdoob/three.js/blob/master/LICENSE|title=Three.js/license|publisher=github.com/mrdoob|accessdate=20 May 2012}}

| released = {{Start date and age|2010|04|24}}{{cite web |url= https://github.com/mrdoob/three.js/commit/a90c4e107ff6e3b148458c96965e876f9441b147|title=First commit |publisher=github.com/mrdoob|accessdate=20 May 2012}}

| programming language = JavaScript, GLSL

| discontinued = no

| genre = JavaScript library

| license = MIT

| website = {{URL|https://threejs.org/}}

}}

Three.js is a cross-browser JavaScript library and application programming interface (API) used to create and display animated 3D computer graphics in a web browser using WebGL. The source code is hosted in a repository on GitHub.{{Citation|last=Mr.doob|title=mrdoob/three.js|date=2021-03-04|url=https://github.com/mrdoob/three.js|access-date=2021-03-04}}

Overview

Three.js allows the creation of graphical processing unit (GPU)-accelerated 3D animations using the JavaScript language as part of a website without relying on proprietary browser plugins.O3DUnity (game engine) This is possible due to the advent of WebGL,{{cite news|title=Khronos Releases Final WebGL 1.0 Specification|url=http://www.khronos.org/news/press/khronos-releases-final-webgl-1.0-specification|accessdate=2 June 2012|newspaper=Khronos Group|date=March 3, 2011}} a low-level graphics API created specifically for the web.{{Cite web|date=2011-07-19|title=WebGL|url=https://www.khronos.org//|access-date=2022-01-22|website=The Khronos Group|language=en}}

High-level libraries such as Three.js, Babylon.js, Verge3D and many more make it possible to author complex 3D computer animations for display in the browser without the effort required for a traditional standalone application or a plugin.{{cite web|last=Crossley|first=Rob|title=Study: Average dev costs as high as $28m|url=http://www.develop-online.net/news/33625/Study-Average-dev-cost-as-high-as-28m|archive-url=https://web.archive.org/web/20100113144801/http://www.develop-online.net/news/33625/Study-Average-dev-cost-as-high-as-28m|url-status=dead|archive-date=13 January 2010|publisher=Intent Media Ltd|accessdate=2 June 2012|date=11 January 2010}}

History

Three.js was first released by Ricardo Cabello on GitHub in April 2010. The origins of the library can be traced back to his involvement with the demoscene in the early 2000s.{{cite web|url=https://www.youtube.com/watch?v=LXWYOF4VibE|author=NVScene|publisher=YouTube|title=NVScene 2015 Session: Reinventing The Wheel - One Last Time (Ricardo Cabello)|date=24 March 2015 }} The code was originally developed in the ActionScript language used by Adobe Flash, later being ported to JavaScript in 2009. In Cabello's mind, there were two strong points that justified the shift away from ActionScript: Firstly, JavaScript provided greater platform independence. Secondly, applications written in JavaScript would not need to be compiled by the developer beforehand, unlike Flash applications.

Additional contributions by Cabello include API design, CanvasRenderer, SVGRenderer, and being responsible for merging the commits by the various contributors into the project.

With the advent of WebGL, Paul Brunt was able to implement the new rendering technology quite easily as Three.js was designed with the rendering code as a module rather than in the core itself.{{cite web|date=2012-05-21|title=Three.js White Paper|url=https://github.com/mrdoob/three.js/issues/1960|publisher=Github.com|accessdate=2013-05-09}} Branislav Uličný, an early contributor, started with Three.js in 2010 after having posted a number of WebGL demos on his own site. He wanted WebGL renderer capabilities in Three.js to exceed those of CanvasRenderer or SVGRenderer. His major contributions generally involve materials, shaders, and post-processing.

Soon after the introduction of WebGL 1.0 on Firefox 4 in March 2011, Joshua Koo came on board. He built his first Three.js demo for 3D text in September 2011. His contributions frequently relate to geometry generation.

Starting from version 118, Three.js uses WebGL 2.0 by default. Older version of the standard is still available via WebGL1Renderer class.{{cite press release |url=https://github.com/mrdoob/three.js/releases/tag/r118 |title=Release r118 · mrdoob/three.js |accessdate=2023-05-24}}

Three.js has over 1950 contributors on GitHub.{{Citation|last=Mr.doob|title=mrdoob/three.js|date=2020-08-03|url=https://github.com/mrdoob/three.js|access-date=2025-04-13}}

Features

Three.js includes the following features:{{cite web|author=mrdoob |url=https://github.com/mrdoob/three.js/wiki/Features |title=Features mrdoob/three.js Wiki GitHub |publisher=Github.com |date=2012-11-26 |accessdate=2013-05-09}}

Effects: Anaglyph, cross-eyed, and parallax barrier.
Scenes: add and remove objects at run-time; fog
Cameras: perspective and orthographic; controllers: trackball, FPS, path and more
Animation: armatures, forward kinematics, inverse kinematics, morph, and keyframe
Lights: ambient, direction, point, and spot lights; shadows: cast and receive
Materials: Lambert, Phong, smooth shading, textures, and more
Shaders: access to full OpenGL Shading Language (GLSL) capabilities: lens flare, depth pass, and extensive post-processing library
Objects: meshes, particles, sprites, lines, ribbons, bones, and more - all with Level of detail
Geometry: plane, cube, sphere, torus, 3D text, and more; modifiers: lathe, extrude, and tube
Import/export: native serialization/deserialization via JSON, glTF, OBJ, USDZ, and more.
Utilities: full set of time and 3D math functions including Viewing frustum, matrix, quaternion, UVs, and more
Support: API documentation is under construction. A public forum and wiki is in full operation.
Examples: Over 150 files of coding examples plus fonts, models, textures, sounds, and other support files
Debugging: Stats.js,{{cite web|url=https://github.com/mrdoob/stats.js |title=Stats.js |publisher=Github.com |date= |accessdate=2013-05-09}} WebGL Inspector,{{cite web |url=https://benvanik.github.com/WebGL-Inspector/ |title=WebGL Inspector |publisher=Benvanik.github.com |date= |accessdate=2013-05-09 |archive-date=2023-03-14 |archive-url=https://web.archive.org/web/20230314161016/http://benvanik.github.com/WebGL-Inspector/ |url-status=dead }} Three.js Inspector{{cite web |url=https://zz85.github.com/zz85-bookmarklets/threelabs.html |title=Three.js Inspector Labs |publisher=Zz85.github.com |date= |accessdate=2013-05-09 |archive-date=2023-01-27 |archive-url=https://web.archive.org/web/20230127155952/https://zz85.github.com/zz85-bookmarklets/threelabs.html |url-status=dead }}
Virtual and Augmented Reality via WebXR{{Cite web|url=https://threejs.org/examples/?q=webxr|title=three.js examples|website=threejs.org}}