Three.js: Difference between revisions

Revision as of 20:18, 27 June 2023

Latest revision as of 18:27, 29 July 2025

(21 intermediate revisions by 18 users not shown)

Line 3:

| 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>

Line 17:

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)|GLGEBabylon.js]], Scene.js, PhiloGL,[[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.<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 on 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 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.

Line 28:

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.

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>

Three.js has over 17001950 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=20232025-0504-2413}}</ref>

== Features ==

Line 46:

* 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.

* Utilities: full set of time and 3D math functions including [[Viewing frustum]], [[Matrix (Mathematics)|matrix]], [[quaternion]], [[UV mapping|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,<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 and adds a camera and cube to the scene. Next, it creates a WebGL renderer and appends its viewport to the body of the [[webpage]] document. Once Three.js has finished loading, the cube rotates about its x and y axes.

* 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 'three';

* 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>

// init

* 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.

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

camera.position.z = 1;

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

const scene = new THREE.Scene();

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

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

const material = new THREE.MeshNormalMaterial();

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

scene.add( mesh );

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

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

renderer.setAnimationLoop( animation );

document.body.appendChild( renderer.domElement );

// animation

function animation( time ) {

mesh.rotation.x = time / 2000;

mesh.rotation.y = time / 1000;

renderer.render( scene, camera );

}

</syntaxhighlight>

== See also ==

Line 112 ⟶ 88:

{{commons category|Three.js}}

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

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

{{FLOSS}}