Three.js: Difference between revisions

Revision as of 08:53, 20 January 2022

Latest revision as of 18:27, 29 July 2025

(39 intermediate revisions by 32 users not shown)

Line 1:

{{Short description|JavaScript library for 3D graphics}}

{{Infobox software

| name = Three.js

| screenshot = File:Three.js Icon.svg

| author = Ricardo Cabello ([[Mr.doob]])

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

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

| programming language = [[JavaScript]], [[OpenGL Shading Language|GLSL]]

| latest release version = r136

| latest release date = {{Start date and age|2021|12|25}}<ref>

{{cite web

|url = https://github.com/mrdoob/three.js/releases

|title = Releases · mrdoob/three.js · GitHub

|access-date = 11 March 2021

|website = github.com

}}</ref>

| programming language = [[JavaScript]]

| discontinued = no

| genre = [[JavaScript library]]

Line 22 ⟶ 15:

== 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 plugin]]s.<ref>[[O3D]]</ref><ref>[[Unity (game engine)]]</ref> This is possible due to the advent of [[WebGL]].,<ref>{{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}}</ref> a low-level graphics API created specifically for the web.<ref>{{Cite web|date=2011-07-19|title=WebGL|url=https://www.khronos.org//|access-date=2022-01-22|website=The Khronos Group|language=en}}</ref>

High-level libraries such as Three.js or [[GLGE (programming library)|GLGE]], SceneJS, PhiloGL, or a number of other libraries make it possible to author complex 3D computer animations that display in the browser without the effort required for a traditional standalone application or a plugin.<ref>{{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}}</ref>

High-level libraries such as Three.js or, [[GLGE (programming library)|GLGEBabylon.js]], SceneJS, PhiloGL, or a number[[Verge3D]] ofand othermany librariesmore make it possible to author complex 3D computer animations thatfor display in the browser without the effort required for a traditional standalone application or a plugin.<ref>{{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}}</ref>

== History ==

Three.js was first released by Ricardo Cabello toon GitHub in April 2010.<ref name="firstcommit" /> The origins of the library can be traced back to his involvement with the [[demoscene]] in the early 2000s.<ref>{{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 }}</ref> The code was firstoriginally developed in the [[ActionScript]] andlanguage used by [[Adobe Flash]], later being ported to JavaScript in 2009. In Cabello's mind, thethere were two strong points forthat justified the transfershift toaway JavaScriptfrom didActionScript: notFirstly, compileJavaScript theprovided code before each run andgreater platform independence. With the advent of [[WebGL]]Secondly, Paulapplications Brunt was able to add the renderer for this quite easily as Three.js was designed with the rendering code as a module rather thanwritten in theJavaScript corewould itself.<refnot name="history">{{citeneed web|url=https://github.com/mrdoob/three.js/issues/1960to |title=Three.js White Paper |publisher=Github.com |date=2012-05-21 |accessdate=2013-05-09}}</ref> Cabello's contributions include API design, CanvasRenderer, SVGRenderer, and being responsible for merging thebe commitscompiled by the variousdeveloper contributorsbeforehand, intounlike theFlash projectapplications.

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

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.<ref name="history" /> His major contributions generally involve materials, shaders, and post-processing.

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.<ref name="history">{{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}}</ref> 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.<ref name="history" /> 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.<ref name="history" /> His contributions frequently relate to geometry generation.

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.<ref name="history" /> His contributions frequently relate to geometry generation.

There are over 1300 contributors on GitHub.<ref>{{Citation|last=Mr.doob|title=mrdoob/three.js|date=2020-08-03|url=https://github.com/mrdoob/three.js|access-date=2020-08-03}}</ref>

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

ThereThree.js arehas over 13001950 contributors on GitHub.<ref>{{Citation|last=Mr.doob|title=mrdoob/three.js|date=2020-08-03|url=https://github.com/mrdoob/three.js|access-date=20202025-0804-0313}}</ref>

== Features ==

Line 48 ⟶ 45:

* Objects: meshes, particles, sprites, lines, ribbons, [[skeletal animation|bones]], and more - all with [[Level of detail (computer graphics)|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]], [[Wavefront .obj file|OBJ]], [[Universal Scene Description|USDZ]], and more.

* Data loaders: binary, image, [[JSON]], and scene

* Utilities: full set of time and 3D math functions including [[Viewing frustum]], [[Matrix (Mathematics)|matrix]], [[quaternion]], [[UV mapping|UVs]], and more

* Export and import: utilities to create Three.js-compatible JSON files from within: [[Blender (software)|Blender]], [[openCTM]], [[FBX]], [[3D Studio Max|Max]], and [[Wavefront .obj file|OBJ]]

* 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,<ref>{{cite web|url=https://github.com/mrdoob/stats.js |title=Stats.js |publisher=Github.com |date= |accessdate=2013-05-09}}</ref> WebGL Inspector,<ref>{{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 }}</ref> Three.js Inspector<ref>{{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 }}</ref>

* Virtual and Augmented Reality via [[WebXR]]<ref>{{Cite web|url=https://threejs.org/examples/?q=webxr|title=three.js examples|website=threejs.org}}</ref>

* Physically based rendering (PBR): support for physically accurate materials like MeshStandardMaterial and MeshPhysicalMaterial<ref>{{cite web |url=https://threejs.org/docs/#api/en/materials/MeshStandardMaterial |title=MeshStandardMaterial – three.js docs |website=threejs.org}}</ref><ref>{{cite web |url=https://threejs.org/docs/#api/en/materials/MeshPhysicalMaterial |title=MeshPhysicalMaterial – three.js docs |website=threejs.org}}</ref>

Three.js runs in all browsers supported by WebGL 1.0.

* Instancing: use of InstancedMesh for efficient rendering of thousands of repeated objects<ref>{{cite web |url=https://threejs.org/docs/#api/en/objects/InstancedMesh |title=InstancedMesh – three.js docs |website=threejs.org}}</ref>

Three.js is made available under the [[MIT License]].<ref name="license" />

* Post-processing: built-in post-processing pipeline with effects such as bloom, depth of field, outline, motion blur, SSAO, and FXAA<ref>{{cite web |url=https://threejs.org/docs/#examples/en/postprocessing/EffectComposer |title=EffectComposer – three.js docs |website=threejs.org}}</ref><ref>{{cite web |url=https://threejs.org/examples/?q=post#webgl_postprocessing |title=Post-processing examples – three.js |website=threejs.org}}</ref>

== Usage ==

The following code creates a scene, adds a camera, and a cube to the scene, creates a WebGL renderer and adds its viewport in the document.body element. Once loaded, the cube rotates about its x- and y-axis.

* Built-in editor: graphical scene editor available online for building and exporting 3D scenes<ref>{{cite web |url=https://threejs.org/editor/ |title=three.js editor |website=threejs.org}}</ref>

<syntaxhighlight lang="javascript">

import * as THREE from 'js/three.module.js';

* Interactive controls: built-in controls such as OrbitControls, DragControls, TransformControls, and PointerLockControls for user interaction and navigation<ref>{{cite web |url=https://threejs.org/docs/#examples/en/controls/OrbitControls |title=OrbitControls – three.js docs |website=threejs.org}}</ref><ref>{{cite web |url=https://threejs.org/docs/#examples/en/controls/TransformControls |title=TransformControls – three.js docs |website=threejs.org}}</ref>

var camera, scene, renderer;

var geometry, material, mesh;

* Alternative renderers: in addition to WebGLRenderer,<ref>{{cite web |url=https://threejs.org/docs/#api/en/renderers/WebGLRenderer |title=WebGLRenderer – three.js docs |website=threejs.org}}</ref> Three.js also provides SVGRenderer<ref>{{cite web |url=https://threejs.org/docs/#examples/en/renderers/SVGRenderer |title=SVGRenderer – three.js docs |website=threejs.org}}</ref> and CSS3DRenderer,<ref>{{cite web |url=https://threejs.org/docs/#examples/en/renderers/CSS3DRenderer |title=CSS3DRenderer – three.js docs |website=threejs.org}}</ref> as well as experimental support for WebGPURenderer.

init();

animate();

Three.js runs in all browsers supportedwith bysupport for WebGL 1.0 or WebGL 2.0.

function init() {

Three.js is made available under the [[MIT License]].<ref name="license" />

camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 0.01, 10 );

camera.position.z = 1;

scene = new THREE.Scene();

geometry = new THREE.BoxGeometry( 0.2, 0.2, 0.2 );

material = new THREE.MeshNormalMaterial();

mesh = new THREE.Mesh( geometry, material );

scene.add( mesh );

renderer = new THREE.WebGLRenderer( { antialias: true } );

renderer.setSize( window.innerWidth, window.innerHeight );

document.body.appendChild( renderer.domElement );

}

function animate() {

requestAnimationFrame( animate );

mesh.rotation.x += 0.01;

mesh.rotation.y += 0.02;

renderer.render( scene, camera );

}

</syntaxhighlight>

== See also ==

Line 123 ⟶ 88:

{{commons category|Three.js}}

* {{Official website|https://threejs.org/}}

*[https://threejs-journey.com ThreeJS Journey - Learning WebGL with Three.js]

{{FLOSS}}