User:theoA/Three.js

Note: After saving, you have to bypass your browser's cache to see the changes. Google Chrome, Firefox, Microsoft Edge and Safari: Hold down the ⇧ Shift key and click the Reload toolbar button. For details and instructions about other browsers, see Wikipedia:Bypass your cache.

{{See also| [[User:Theoa/Threejs]] - which displays the proposed article properly.}}
{{See also| [[wiki/User_talk:Theoa/Three.js]] - which discusses the display issues.}}

{{lowercase title}}
{{Infobox software
| name                   = Three.js
| logo                   = 
| author                 = Mr.doob
| developer              = Three.js Authors <ref>{{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               = {{initial release|2010|04|24}} <ref>{{cite web |url= https://github.com/mrdoob/three.js/blob/master/README.md|title=Three.js/readme.md |publisher=github.com/mrdoob|accessdate=20 May 2012}}</ref>
| latest release version = 49
| latest release date    = {{release date|2012|04|21}} <ref>{{cite web |url= https://github.com/mrdoob/three.js/blob/master/README.md|title=Three.js/readme.md |publisher=github.com/mrdoob|accessdate=20 May 2012}}</ref>
| latest preview version =
| latest preview date    =
| programming language   = [[JavaScript]]
| status                 = Active
| genre                  = [[JavaScript library]]
| license                = [[MIT License|MIT]] <ref>{{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>
| website                = {{url|https://github.com/mrdoob/three.js}}
| size                   = 364.242&nbsp;KB
}}
'''Three.js'''
is a lightweight [[cross-browser]] [[JavaScript library]]/[[API]] for creating and displaying animated 3D graphics on a [[Web browser]]. Three.js scripts may be used in conjunction with the [[HTML5]] [[canvas element]], [[SVG]] or [[WebGL]].
 
The Three.js library is considered to be easy to use, efficient and having a nice feature set.
<ref>{{cite web |url=http://www.netmagazine.com/features/behind-scenes-lights-latest-webgl-sensation |title=Behind the scenes of 'Lights': the latest WebGL sensation!|publisher=.net magazine |authourlink= Carlos Ulloa|date=9 November 2011|accessdate=20 May 2012}}</ref>
<ref>{{cite web |url=http://www.londonwebstandards.org/2011/09/|title=LWS WebGL (sort of) Live Blog|publisher=London Web Standards|authorlink=Nick Smith|date=27 September 2011|accessdate=20 May 2012}}</ref>

Three.js source code is hosted in a repository on [[GitHub]]. The Three.js repository is the 33rd most forked repository
<ref>{{cite web |url=https://github.com/popular/forked|title=Popular Forked Repositories|publisher=GitHub.com|accessdate=20 May 2012}}</ref>
and the 12th most watched repository 
<ref>{{cite web |url=https://github.com/popular/watched|title=Popular Watched Repositories|publisher=GitHub.com|accessdate=20 May 2012}}</ref>
out of over 2.6 million GitHeb repositories. [[Alexa Internet]] reports that queries for 'Three.js' rank third in the number of queries driving traffic to github.com.
<ref>{{cite web |url=http://www.alexa.com/siteinfo/github.com#|title=GitHub.com Site Info|publisher=Alexa Internet|accessdate=05-20-2012}}</ref>

== Features ==

Three.js includes the following features:

* Renderers: canvas, SVG and WebGL; effects: anaglylph, crosseyed, stereo and more
* Scenes: add and remove objects at run-time; fog
* Cameras: perspective and orthographic; controllers: trackball, [[First-person_shooter|FPS]], path and more
* Animation: [[Morph target animation|morph]] and [[keyframe animation|keyframe]]
* Lights: ambient, direction, point and spot lights; shadows: cast and receive
* Materials: [[Lambertian_reflectance|Lambert]], [[Phong_shading|Phong]], smooth shading, textures and more
* Shaders: access to full WebGL 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]]
* 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 [[frustrum]], matrix,[[Quaternian]], [[UV_mapping|UVs]] and more
* Export/Import: utilities to create Three.js-compatible JSON files from within: [[Blender]], [[openCTM]], [[FBX]], [[3D_Studio_Max|Max]], and [[Wavefront_.obj_file|OBJ]]
* Support: API documentation is under construction, public forum and wiki in full operation
* Examples: Over 150 files of coding examples plus fonts, models, textures, sounds and other support files <ref>https://github.com/mrdoob/three.js/wiki/Features</ref>

Three.js runs in all browsers supported by WebGL. See [[WebGL#Implementation|WebGL Implementation]].

Three.js is made available under the [[MIT license]].<ref>{{cite web |url= https://github.com/mrdoob/three.js/blob/master/README.md|title=Three.js/readme.md |publisher=github.com/mrdoob|accessdate=20 May 2012}}</ref>

== Usage ==
The Three.js library is a single JavaScript file. It can included within a web page by linking to a local or remote copy.

<source lang=javascript><script src="js/Three.js"></script></source>


<source lang=javascript><script src="http://mrdoob.github.com/three.js/build/Three.js"></script></source>


The following code creates a scene, adds a camera and a cube to the scene, creates a <canvas> renderer and adds its viewport in the document.body element. Once loaded, the cube rotates about its X- and Y-axis.

<source lang=javascript>
<script>

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

    init();
    animate();

    function init() {
        scene = new THREE.Scene();

        camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 1, 10000 );
        camera.position.z = 1000;
        scene.add( camera );

        geometry = new THREE.CubeGeometry( 200, 200, 200 );
        material = new THREE.MeshBasicMaterial( { color: 0xff0000, wireframe: true } );

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

        renderer = new THREE.CanvasRenderer();
        renderer.setSize( window.innerWidth, window.innerHeight );

        document.body.appendChild( renderer.domElement );
    }

    function animate() {
        // note: three.js includes requestAnimationFrame shim
        requestAnimationFrame( animate );
        render();
    }

    function render() {
        mesh.rotation.x += 0.01;
        mesh.rotation.y += 0.02;

        renderer.render( scene, camera );
    }

</script>
</source>

== Use in Mixed Media ==

[http://www.daftunes.com/ ''Daftunes''], 2012, an interactive sound visualizing project. [http://www.chromeexperiments.com/detail/daftunes/]

[http://playpit.kowareru.com/ ''PlayPit''], 2012.

[http://www.ro.me/ ''Rome'' the album | ''3 Dreams in Black'' the film], 2011, produced by [[Chris Milk]]. "'3 Dreams of Black' is the trippiest WebGL interactive music video you've seen all day" [http://www.engadget.com/2011/05/12/3-dreams-of-black-is-the-trippiest-webgl-interactive-music-vid/] [http://googleblog.blogspot.com/2011/05/3d-dreams-in-modern-browser.html]

''[[One Millionth Tower]]'', 2011 - "It exists in a 3-D setting made possible by a JavaScript library called three.js, which lets viewers walk around the high-rise neighborhood." - [http://highrise.nfb.ca/onemillionthtower/1mt_webgl.php][http://www.wired.com/underwire/2011/11/one-millionth-tower/].

[http://lights.elliegoulding.com/ ''Ellie Goulding's Lights''], 12 October 2011, "an interactive & colorful music video experience using #webgl" [http://lights.elliegoulding.com/credits.html] [http://www.thefwa.com/site/ellie-goulding-lights-/]

[http://helloracer.com/webgl/ ''Hello Racer''], 2011, "Great news. HelloRacer WebGL has been awarded the FWA Site Of The Day for today, June 5th 2011." - [http://helloenjoy.com/2011/fwa-site-of-the-day-helloracer-webgl/]

[http://fhtr.org/webglreader/ ''WebGL Reader''], 2011

''[[The Wilderness Downtown]]'', 2010

== Use in Data Visualization and Fab Applications ==
[http://mayhewlabs.com/3dpcb 3D Gerber Viewer]

http://ourbricks.com/

http://blackjk3.github.com/threefab/

http://code.google.com/p/kuda/

http://danielribeiro.github.com/WebGLCraft/

http://p3d.in/

http://shapesmith.net/

http://stackhack.com/

http://sunglass.io/

http://replimat.com/thingiview/examples/pre_parsed_json_inline.html

http://idflood.github.com/ThreeNodes.js/public/

http://errolschwartz.com/projects/threescene/

== Use in Games ==

[http://www.playmapscube.com/ ''Cube - a game about Google Maps''], 2012

[http://www.theamazingspidermangame.com/ ''The Amazing Spiderman Game''], 2012

[http://tinyworld.tinco.nl/ ''Tiny World of Life''], 2012

[http://marblesoccer.com/ ''Marble Soccer''], 2012

[http://fridek.github.com/Threejs-Tetris/ ''Three.js Tetris''], 2012

[http://triggerrally.com/ ''Trigger Rally'']

[http://chuclone.com/ ''ChuClone''], 2012

[http://yagiz.me/zombiesvscow/ ''Zombies vs Cow''], 2012

[http://pacmaze.com/ ''PacMaze''], 2011



== See also ==

[[WebGL]]<br/>
[[Canvas element]]<br/>
[[SVG]]

== References ==
{{Reflist}}

== 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 familar with the concepts of WebGL. These textbooks include:

{{Refbegin}}
* {{cite book | last = Parisi | first = Tony | title = Webgl Up and Running | publisher = Oreilly & Associates Inc | location = Sebastopol | year = 2012 | isbn = 9781449323578 }}

* {{cite book | last = Seidelin | first = Jacob | title = HTML5 games : creating fun with HTML5, CSS3, and WebGL | publisher = John Wiley & Sons | location = Chichester, West Sussex, U.K | pages = 412-414 | year = 2012 | isbn = 1119975085 }} - "Three.js can make game development easier by taking care of low-level details"

* {{cite book | last = Williams | first = James | title = Learning HTML5 game programming : a hands-on guide to building online games using Canvas, SVG, and WebGL | publisher = Addison-Wesley | location = Upper Saddle River, NJ | year = 2012 | pages - Chapter 7 |isbn = 0321767365 }}

* {{cite book | last = Raasch | first = Jon | title = Smashing WebKit | publisher = Wiley | location = Chichester | pages = 181, 182, 216 |  year = 2011 | isbn = 1119999138 }}
{{Refend}}

== External links ==
* [https://github.com/mrdoob/three.js GitHub repository for mrdoob/three.js and official site]

{{DEFAULTSORT:Three.js}}
[[Category:JavaScript libraries]]
[[Category:Software using the MIT license]]
[[Category:2010 software]]

 [[ar:]]
[[bg:Three.js]]
[[ca:Three.js]]
[[cs:Three.js]]
[[de:Three.js]]
[[es:Three.js]]
[[eu:Three.js]]
 [[fa:]]
[[fr:Three.js]]
[[ko:Three.js]]
[[id:Three.js]]
[[it:Three.js]]
[[he:Three.js]]
[[ka:Three.js]]
[[hu:Three.js]]
 [[ml:]]
[[mn:Three.js]]
[[nl:Three.js]]
[[ja:Three.js]]
[[no:Three.js]]
[[pl:Three.js]]
[[pt:Three.js]]
[[ro:Three.js]]
[[ru:Three.js]]
[[sk:Three.js]]
[[fi:Three.js]]
[[sv:Three.js]]
 [[ta:]]
 [[th:]]
[[uk:Three.js]]
[[vi:Three.js]]
[[zh:Three.js]]