Three.js

From Wikipedia, the free encyclopedia
  (Redirected from Threejs)
Jump to navigation Jump to search
Three.js
Screen captures of Three.js examples
Screen captures of Three.js examples
Original author(s)Ricardo Cabello (Mr.doob)
Developer(s)Three.js Authors[1]
Initial releaseApril 24, 2010; 8 years ago (2010-04-24)[2]
Stable release
r94 / June 28, 2018; 5 months ago (2018-06-28)
Repository Edit this at Wikidata
Written inJavaScript
TypeJavaScript library
LicenseMIT[1]
Websitethreejs.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. Three.js uses WebGL. The source code is hosted in a repository on GitHub.

Overview[edit]

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[edit]

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. The code was first developed in ActionScript, then in 2009 ported to JavaScript. 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.[7] Cabello's contributions include API design, CanvasRenderer, SVGRenderer and being responsible for merging the commits by the various contributors into the project.

The second contributor in terms of commits, Branislav Ulicny 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.[7] 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.[7] His contributions frequently relate to geometry generation.

There are over 900 contributors in total.[7]

Features[edit]

Three.js includes the following features:[8]

  • 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, public forum and wiki in full operation
  • Examples: Over 150 files of coding examples plus fonts, models, textures, sounds and other support files
  • Debugging: Stats.js,[9] WebGL Inspector,[10] Three.js Inspector[11]
  • Virtual reality: accessing WebVR [12]

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

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

Usage[edit]

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

<script src="js/three.min.js"></script>

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.

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

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

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

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

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

    function animate() {
        requestAnimationFrame( animate );
        render();
    }

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

        renderer.render( scene, camera );
    }

</script>

Selected uses and works[edit]

The Three.js library is being used for a wide variety of applications and purposes. The following lists identify selected uses and works.

Mixed media[edit]

  • The Little Black Jacket, 2012, CHANEL's classic revisited by Karl Lagerfeld and Carine Roitfeld. An online exhibition displaying 113 pictures of celebrities photographed by Karl Lagerfeld.[13]
  • Daftunes, 2012, an interactive sound visualizing project.[14][15]
  • PlayPit, 2012[16]
  • 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"[17][18][19]
  • 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." -[20]
  • Ellie Goulding's Lights, 12 October 2011, "an interactive & colorful music video experience using webgl"[21][22][23]
  • Hello Racer, 2011 - Awarded the FWA Site Of The Day for today, June 5, 2011[24][25]
  • WebGL Reader, 2011[26]
  • The Wilderness Downtown, 2010
  • Audible Visuals, 2016, collection of audio visualizers derived from the Archimedean spiral.[27]

Model visualization and scene creation applications[edit]

Game and simulation authoring tools[edit]

  • AgentCubes - a game design tool including 3D modeling and drag and drop programming , 2013[46][47]

Games[edit]

Education[edit]

Community[edit]

Online IDEs with built-in support for Three.js are available at WebGL Playground,[75] HTML Snippet[76] and jsFiddle.[77] Documentation is available for the API[78] as well as general advice on the Wiki.[79] Support for developers committing to the library is provided via the Issues forum on GitHub,[80] while support for developers building apps and web pages is provided via StackOverflow.[81] Real-time on-line support is provided using IRC via Freenode.[82] Most of the developers are also on Twitter.

See also[edit]

References[edit]

  1. ^ a b c "Three.js/license". github.com/mrdoob. Retrieved 20 May 2012.
  2. ^ a b "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. ^ a b c d "Three.js White Paper". Github.com. 2012-05-21. Retrieved 2013-05-09.
  8. ^ mrdoob (2012-11-26). "Features mrdoob/three.js Wiki GitHub". Github.com. Retrieved 2013-05-09.
  9. ^ "Stats.js". Github.com. Retrieved 2013-05-09.
  10. ^ "WebGL Inspector". Benvanik.github.com. Retrieved 2013-05-09.
  11. ^ "Three.js Inspector Labs". Zz85.github.com. Retrieved 2013-05-09.
  12. ^ [1]
  13. ^ Lagerfeld, Karl (2012). "The Little Black Jacket". CHANEL. Archived from the original on 3 June 2012. Retrieved 2 June 2012.
  14. ^ "Google Chrome Experiments - Daftunes". Chromeexperiments.com. Retrieved 2013-05-09.
  15. ^ "Daftunes". Daftunes.com. Retrieved 2013-05-09.
  16. ^ Eiji Muroichi @muroicci. "PlayPit". Playpit.kowareru.com. Retrieved 2013-05-09.
  17. ^ "Rome the album | 3 Dreams in Black the film". Ro.me. Retrieved 2013-05-09.
  18. ^ Hollister, Sean (2011-05-12). "3 Dreams of Black is the Trippiest". Engadget.com. Retrieved 2013-05-09.
  19. ^ Koblin, Aaron (2011-05-13). "3D Dreams in Modern Browser". Googleblog.blogspot.com. Retrieved 2013-05-09.
  20. ^ One Millionth TowerOne Millionth Tower
  21. ^ "'Ellie Goulding's Lights". Lights.elliegoulding.com. Archived from the original on 2013-01-09. Retrieved 2013-05-09.
  22. ^ "Ellie Goulding Credits". Lights.elliegoulding.com. Archived from the original on 2013-01-09. Retrieved 2013-05-09.
  23. ^ "Ellie Goulding Lights". Thefwa.com. Archived from the original on 2013-06-10. Retrieved 2013-05-09.
  24. ^ "Hello Racer". Helloracer.com. Retrieved 2013-05-09.
  25. ^ "FWA Site of the Day". Helloenjoy.com. 2011-06-05. Retrieved 2013-05-09.
  26. ^ "WebGL Reader". Fhtr.org. Retrieved 2013-05-09.
  27. ^ https://github.com/soniaboller/soniaboller.github.io/tree/master/audible-visuals
  28. ^ "3D Gerber Viewer". Mayhewlabs.com. 2013-01-18. Retrieved 2013-05-09.
  29. ^ "Clara.io 3D Editor". exocortex.com. 2013-11-05. Retrieved 2013-12-10.
  30. ^ "Kuda". Code.google.com. Retrieved 2013-05-09.
  31. ^ "Our Bricks". Our Bricks. Archived from the original on 2013-05-12. Retrieved 2013-05-09.
  32. ^ "P3D". P3d.in. Retrieved 2013-05-09.
  33. ^ "repovizz". Retrieved 2015-01-09.
  34. ^ Benjamin Nortier. "Shapesmith". Shapesmith. Retrieved 2013-05-09.
  35. ^ "SimLab Composer". simlab-soft.com. 2015-08-19. Retrieved 2015-08-19.
  36. ^ "Stackhack". Stackhack. Retrieved 2013-05-09.
  37. ^ "Sunglass". Sunglass.io. Retrieved 2013-05-09.
  38. ^ ThingView
  39. ^ Jason Kadrmas. "Three Fab". Blackjk3.github.com. Retrieved 2013-05-09.
  40. ^ "ThreeNodes". Idflood.github.com. Retrieved 2013-05-09.
  41. ^ "ThreeScene". Errolschwartz.com. Retrieved 2013-05-09.
  42. ^ "Verge3D". Soft8Soft. Retrieved 2017-11-09.
  43. ^ "Verold Studio". Verold.com. Archived from the original on 2013-05-13. Retrieved 2013-05-09.
  44. ^ "WebGL Craft". Danielribeiro.github.com. Retrieved 2013-05-09.
  45. ^ Kaala. "zb3D Grapher". Archived from the original on 23 November 2013. Retrieved 30 November 2013.
  46. ^ "AgentCubes - a game design tool". Agentsheets.com. Retrieved 2013-05-09.
  47. ^ "The Scalable Game Design arcade featuring Three.js based games". Scalablegamedesign.cs.colorado.edu. Retrieved 2013-05-09.
  48. ^ "Freeciv WebGL". The Freeciv project. Archived from the original on 2017-09-02. Retrieved 2017-09-21.
  49. ^ "Cube - a game about Google Maps". Playmapscube.com. Retrieved 2013-05-09.
  50. ^ Creative, Google. "Cube | Awwwards | Site of the day". Awwwards. Retrieved 2013-05-09.
  51. ^ "Ocuara". ocuara.com. Retrieved 2014-01-01.
  52. ^ "MafiaEmpires". www.wizardsworkshop.co.uk. Retrieved 2014-04-05.
  53. ^ "Tiny Shipping". Ld23.librador.com. Retrieved 2013-05-09.
  54. ^ "10 of the best educational games of Ludum Dare 23, part 2". Brainsforgames.rachelnponce.com. 2012-05-09. Retrieved 2013-05-09.
  55. ^ "Marble Soccer". Marblesoccer.com. 2011-04-13. Retrieved 2013-05-09.
  56. ^ Acosta, Darien (2012-04-09). "WebGL - Game - Marble Soccer". Webgl.com. Retrieved 2013-05-09.
  57. ^ "Three.js Tetris". Fridek.github.com. Retrieved 2013-05-09.
  58. ^ "3D Tetris with Three.js tutorial - part 1". Smashinglabs.pl. Retrieved 2013-05-09.
  59. ^ "Trigger Rally". Triggerrally.com. Retrieved 2013-05-09.
  60. ^ "Trigger Rally - online edition". CreativeJS. 2012-03-02. Retrieved 2013-05-09.
  61. ^ "ChuClone". Chuclone.com. Retrieved 2013-05-09.
  62. ^ "ChuClone". Chrome Experiments. Retrieved 2013-05-09.
  63. ^ html5 games (2011-11-07). "ChuClone". html5 games. Retrieved 2013-05-09.
  64. ^ "WebGL Zombies vs Cow". Yagiz.me. Archived from the original on 2013-05-18. Retrieved 2013-05-09.
  65. ^ "Zombies vs Cow - 3D Site Links". 3dsitelinks.com. Retrieved 2013-05-09.
  66. ^ "Pacmaze". Pacmaze.com. Archived from the original on 2013-01-31. Retrieved 2013-05-09.
  67. ^ ";Pacmaze by Jerome Etienne". Chrome Experiments. Retrieved 2013-05-09.
  68. ^ Internet Catch Of The Day (2011-08-20). "Pac Maze!". Internet Catch of the Day. Archived from the original on 2013-01-26. Retrieved 2013-05-09.
  69. ^ "Slimetribe". Zbigniew Lipka. Retrieved 2013-11-08.
  70. ^ "Developing a street basketball game". Alexander Buzin. Retrieved 2016-08-08.
  71. ^ "Laby". Magnum. Retrieved 2017-03-13.
  72. ^ "Real Time Carport Prices and Visualization in 3D". Cibirix. Retrieved 2018-01-02.
  73. ^ Interactive 3D Graphics
  74. ^ "3D computer graphics for everyone"
  75. ^ "WebGL Playground". WebGL Playground. Retrieved 2013-05-09.
  76. ^ "HTML Snippet". Html5snippet.net. 2011-05-15. Retrieved 2013-05-09.
  77. ^ "jsFiddle". jsFiddle. Retrieved 2013-05-09.
  78. ^ "Three.js API reference". Mrdoob.github.com. 2000-01-01. Retrieved 2013-05-09.
  79. ^ mrdoob (2013-03-15). "Three.js Wiki". Github.com. Retrieved 2013-05-09.
  80. ^ mrdoob. "Three.js Issues". Github.com. Retrieved 2013-05-09.
  81. ^ "Three.js". StackOverflow. Retrieved 2013-05-09.
  82. ^ "Freenode - Three.js". Webchat.freenode.net. Retrieved 2013-05-09.

Bibliography[edit]

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:

  • Dirksen, Jos (2013). Learning Three.js: The JavaScript 3D Library for WebGL. UK: Packt Publishing. ISBN 9781782166283.
  • Parisi, Tony (2012). Webgl Up and Running. Sebastopol: Oreilly & Associates Inc. ISBN 9781449323578.
  • Seidelin, Jacob (2012). HTML5 games : creating fun with HTML5, CSS3, and WebGL. Chichester, West Sussex, U.K: John Wiley & Sons. pp. 412–414. ISBN 1119975085. - "Three.js can make game development easier by taking care of low-level details"
  • Williams, James (2012). Learning HTML5 game programming : a hands-on guide to building online games using Canvas, SVG, and WebGL. Upper Saddle River, NJ: Addison-Wesley. pp. 117–120, 123–131, 136, 140–142. ISBN 0321767365.
  • Raasch, Jon (2011). Smashing WebKit. Chichester: Wiley. pp. 181, 182, 216. ISBN 1119999138.

External links[edit]