Three.js

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.

Three.js
Screen captures of Three.js examples
Original author(s)Ricardo Cabello (Mr.doob)
Developer(s)Three.js Authors[1]
Initial releaseApril 24, 2010 (2010-04-24)[2]
Stable release
r114 / March 1, 2020 (2020-03-01)
Repository
Written inJavaScript
TypeJavaScript library
LicenseMIT[1]
Websitethreejs.org

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.[3][4] This is possible due to the advent of WebGL.[5]

High-level libraries such as Three.js or 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.[6]

History

Three.js was first released by Ricardo Cabello to GitHub in April 2010.[2] The origins of the library can be traced back to his involvement with the demoscene in the early 2000s.[7] The code was first developed in ActionScript and ported to JavaScript in 2009. In Cabello's mind, the two strong points for the transfer to JavaScript were not having to compile the code before each run and platform independence. With the advent of WebGL, Paul Brunt was able to add the renderer for this quite easily as Three.js was designed with the rendering code as a module rather than in the core itself.[8] Cabello's contributions include API design, CanvasRenderer, SVGRenderer, and being responsible for merging the commits by the various contributors into the project.

Branislav Ulicny, 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.[8] 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.[8] His contributions frequently relate to geometry generation.

Michael Herzog became an active contributor in late 2015. He is the second greatest contributor in terms of commits, behind Ricardo Cabello.[9]

There are over 1300 contributors on GitHub.[10]

Features

Three.js includes the following features:[11]

  • 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
  • Data loaders: binary, image, JSON, and scene
  • Utilities: full set of time and 3D math functions including frustum, matrix, quaternion, UVs, and more
  • Export and import: utilities to create Three.js-compatible JSON files from within: Blender, openCTM, FBX, Max, and 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,[12] WebGL Inspector,[13] Three.js Inspector[14]
  • Virtual and Augmented Reality via WebXR [15]

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

Three.js is made available under the MIT License.[1]

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.

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

var camera, scene, renderer;
var geometry, material, mesh;

init();
animate();

function init() {

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

}

Community

Online IDEs with built-in support for Three.js are available at WebGL Playground,[16] HTML Snippet[17], and jsFiddle.[18] Documentation is available for the API[19] as well as general advice on the Wiki.[20] Support for developers committing to the library is provided via the Issues forum on GitHub,[21] while support for developers building apps and web pages is provided via Stack Overflow.[22] Real-time on-line support is provided using IRC via Freenode.[23] Most of the developers are also on Twitter.

See also

References
  1. "Three.js/license". github.com/mrdoob. Retrieved 20 May 2012.
  2. "First commit". github.com/mrdoob. Retrieved 20 May 2012.
  3. O3D
  4. Unity (game engine)
  5. "Khronos Releases Final WebGL 1.0 Specification". Khronos Group. March 3, 2011. Retrieved 2 June 2012.
  6. Crossley, Rob (11 January 2010). "Study: Average dev costs as high as $28m". Intent Media Ltd. Archived from the original on 13 January 2010. Retrieved 2 June 2012.
  7. NVScene. "NVScene 2015 Session: Reinventing The Wheel - One Last Time (Ricardo Cabello)". YouTube.
  8. "Three.js White Paper". Github.com. 2012-05-21. Retrieved 2013-05-09.
  9. "Contributors to mrdoob/three.js".
  10. Mr.doob (2020-08-03), mrdoob/three.js, retrieved 2020-08-03
  11. mrdoob (2012-11-26). "Features mrdoob/three.js Wiki GitHub". Github.com. Retrieved 2013-05-09.
  12. "Stats.js". Github.com. Retrieved 2013-05-09.
  13. "WebGL Inspector". Benvanik.github.com. Retrieved 2013-05-09.
  14. "Three.js Inspector Labs". Zz85.github.com. Retrieved 2013-05-09.
  15. "three.js examples". threejs.org.
  16. "WebGL Playground". WebGL Playground. Retrieved 2013-05-09.
  17. "HTML Snippet". Html5snippet.net. 2011-05-15. Retrieved 2013-05-09.
  18. "jsFiddle". jsFiddle. Retrieved 2013-05-09.
  19. "Three.js API reference". Mrdoob.github.com. 2000-01-01. Retrieved 2013-05-09.
  20. mrdoob (2013-03-15). "Three.js Wiki". Github.com. Retrieved 2013-05-09.
  21. mrdoob. "Three.js Issues". Github.com. Retrieved 2013-05-09.
  22. "Three.js". StackOverflow. Retrieved 2013-05-09.
  23. "Freenode - Three.js". Webchat.freenode.net. Retrieved 2013-05-09.

Bibliography

A number of computer science textbooks refer to Three.js as a tool for simplifying the development process for WebGL applications as well as an easy method for becoming familiar with the concepts of WebGL. These textbooks in order of appearance include:

This article is issued from Wikipedia. The text is licensed under Creative Commons - Attribution - Sharealike. Additional terms may apply for the media files.