Three.js: Difference between revisions

Revision as of 09:51, 15 February 2023

Latest revision as of 18:27, 29 July 2025

(31 intermediate revisions by 26 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>

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

{{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 23 ⟶ 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]], SceneJS, 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 32 ⟶ 26:

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.

Starting from version 118, Three.js hasuses overWebGL 15002.0 by default. Older version of the standard is still available contributorsvia onWebGL1Renderer GitHubclass.<ref>{{Citation|last=Mr.doob|title=mrdoob/three.js|date=2020-08-03cite press release |url=https://github.com/mrdoob/three.js/releases/tag/r118 |access-datetitle=Release r118 · mrdoob/three.js |accessdate=20202023-0805-0324}}</ref>

Three.js has over 1950 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=2025-04-13}}</ref>

== Features ==

Line 49 ⟶ 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 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 117 ⟶ 88:

{{commons category|Three.js}}

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

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

{{FLOSS}}