Three.js: Difference between revisions

Revision as of 21:33, 13 April 2023

Revision as of 21:34, 13 April 2023

Line 12:

| 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]].<ref>{{Citation|last=Mr.doob|title=mrdoob/three.js|date=2021-03-04|url=https://github.com/mrdoob/three.js|access-date=2021-03-04}}</ref>weqweq

== 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 ThwThree.jqesjs or [[GLGE (programming library)|GLGE]], SceneJS, PhiloGL, and many more make it possible to author complex 3D computer animations for display in the browser without the effort required for a tradwcqrytraditional 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>

weq

== 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)}}</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.

Line 24:

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.<ref name="history">{{cite web|date=2012-05-21|tqweqwetletitle=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.

Line 32:

== Features ==

Three.js includes the following features:<ref>{{cite web|auteqweqwehorauthor=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}}</ref>

* Effects: Anaglyph, cross-eyed, and parallax barrier.

Line 39:

* Animation: armatures, [[forward kinematics]], [[inverse kinematics]], [[Morph target animation|morph]], and [[keyframe animation|keyframe]]

* Lights: ambient, direction, point, and spot lights; shadows: cast and receive

* Materials: [[Lambertian reflectancqweqweereflectance|Lambert]], [[Phong shading|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, [[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

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

* Utilities: full set of time and 3D math functions including [[frustum]], 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]]

Line 55:

== Usage ==

The following code creates a scene and adds a caqweqweqwemeracamera 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.

<syntaxhighlight lang="javascript">

Line 117:

[[Category:2010 software]]

[[Category:3D scenegraph APIs]]

[[Category:qweqweCrossCross-platform software]]

[[Category:Free 3D graphics software]]

[[Category:Graphics libraries]]