Three.js

Origem: Wikipédia, a enciclopédia livre.
Three.js
Captura de tela
Three.js
Exemplos de capturas de tela do Three.js
Autor Ricardo Cabello (Mr.doob)
Desenvolvedor Autores do Three.js[1]
Lançamento 24 de abril de 2010; há 13 anos[2]
Versão estável r83 (15 de dezembro de 2016; há 7 anos)
Escrito em JavaScript
Gênero(s) Biblioteca JavaScript
Licença MIT[1]
Estado do desenvolvimento Ativo
Página oficial threejs.org

Three.js é uma biblioteca JavaScript/API cross-browser usada para criar e mostrar gráficos 3D animados em um navegador web. Three.js usa WebGL. O código-fonte é hospedado em um repositório no GitHub.

Visão geral[editar | editar código-fonte]

Three.js permite a criação de animações 3D aceleradas de GPU usando a linguagem JavaScript como parte de um website sem depender de extensões de browsers proprietárias.[3][4] Isto é possível graças ao advento do WebGL.[5]

Bibliotecas de alto nível como Three.js ou GLGE, SceneJS, PhiloGL ou um número de outras bibliotecas tornam possível ao autor animações de computador 3D complexas que mostram no browser sem o esforço necessário para uma aplicação stand-alone tradicional ou um plugin.[6]

História[editar | editar código-fonte]

Three.js foi primeiro lançado por Ricardo Cabello ao GitHub em abril de 2010.[2] As origens da biblioteca podem ser traçadas de volta ao seu envolvimento com demoscenes no início dos anos 2000. O código foi primeiro desenvolvido em ActionScript, então em 2009 transferido para o JavaScript. Na mente de Cabello, os dois pontos fortes para transferir para o JavaScript foram, não tendo de compilar o código antes de cada execução e independência de plataforma. Com o advento do WebGL, Paul Brunt foi capaz de adicionar o renderizador para este muito facilmente, como o Three.js foi projetado com o código renderizador como um módulo ao invés do próprio core.[7] As contribuições de Cabello incluem o design de API, CanvasRenderer, SVGRenderer e sendo responsável por mesclar as entregas de vários contribuidores dentro do projeto.

O segundo contribuidor em termos de entrega, Branislav Ulicny, começou com o Three.js em 2010 após ter postado um número de demos WebGL em seu próprio site. Ele quis que as aptidões de renderizar do WebGL no Three.js ultrapassassem às do CanvasRenderer ou SVGRenderer.[7] Suas maiores contribuições geralmente envolvem materiais, sombreadores e pós-processamento.

Logo após a introdução do WebGL 1.0 no Firefox 4 em março de 2011, Joshua Koo entrou na equipe. Ele construiu sua primeira demo em Three.js para texto 3D em setembro de 2011.[7] Suas contribuições frequentemente se referem a geração de geometria.

Há mais de 650 contribuidores no total.[7]

Recursos[editar | editar código-fonte]

Three.js inclui os seguintes recursos:[8]

  • Efeitos: Anaglifo, olhos cruzados e barreira paralaxe.
  • Cenários: adiciona e remove objetos em tempo de execução; névoa
  • Câmeras: perspectiva e ortográfico; controladores: trackball, FPS, path e mais
  • Animação: armaduras, cinemática direta, cinemática inversa, animação por vértice e quadro-chave
  • Luzes: ambiente, direção, luzes de ponto e local; sombras: cast e receive
  • Materiais: Lambert, Phong, smooth shading, texturas e mais
  • Sombreadores: acesso a todas as capacidades do OpenGL Shading Language (GLSL): lens flare, depth pass e extensa biblioteca de pós-processamento
  • Objetos: malhas, partículas, sprites, linhas, fitas, ossos e mais - tudo com nível de detalhe
  • Geometria: plana, cubo, esfera, toro, texto 3D e mais; modificadores: lathe, extrude e tubo
  • Carregadores de dados: binário, imagem, JSON e cenário
  • Utilidades: completa configuração de tempo e funções matemáticas 3D incluindo tronco de bases paralelas, matriz, quaterniões, UVs e mais
  • Exporta e importa: utilidades para criar arquivos JSON compatíveis com Three.js de dentro: Blender, openCTM, FBX, Max, e OBJ
  • Suporte: a documentação da API está sob construção, fórum público e wiki em completa operação
  • Exemplos: Mais de 150 arquivos de exemplos de código mais fontes, modelos, texturas, sons e outros arquivos de suporte
  • Debugging: Stats.js,[9] WebGL Inspector,[10] Three.js Inspector[11]

Three.js roda em todos os browsers suportados pelo WebGL 1.0.

Three.js é disponível sob a licença MIT.[1]

Uso[editar | editar código-fonte]

A biblioteca Three.js é um simples arquivo JavaScript. Ela pode ser incluida dentro de uma página web por ligação a uma cópia local ou remota. 

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

O seguinte código cria um cenário, adiciona uma câmera e um cubo ao cenário, cria um renderizador WebGL e adiciona sua janela de exibição no document.body element. Uma vez carregado, o cubo gira em eixos X e Y. 

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

Usos selecionados e trabalhos[editar | editar código-fonte]

A biblioteca Three.js é usada para uma ampla variedade de aplicações e propósitos. As seguintes listas identificam usos selecionados e trabalhos.

Mídia mixada[editar | editar código-fonte]

  • The Little Black Jacket, 2012, clássico de CHANEL revisitado por Karl Lagerfeld e Carine Roitfeld. Uma exibição online mostrando 113 fotos de celebridades fotografadas por Karl Lagerfeld.[12]
  • Daftunes, 2012, um projeto de visualização de som interativo.[13][14]
  • PlayPit, 2012[15]
  • o álbum Rome| O filme 3 Dreams in Black, 2011, produzido por Chris Milk. "'3 Dreams of Black' é o vídeo musical interativo WebGL mais viajado que você tem visto todo dia"[16][17][18]
  • One Millionth Tower, 2011 - "Existe em uma configuração 3D feita possível por uma biblioteca JavaScript chamada three.js, que permite aos espectadores andar por aí no bairro alto." -[19]
  • Ellie Goulding's Lights, 12 de outubro de 2011, "uma experiência de vídeo musical interativo e colorido usando webgl"[20][21][22]
  • Hello Racer, 2011 - Premiou o FWA Site do Dia hoje, 5 de junho de 2011[23][24]
  • WebGL Reader, 2011[25]
  • The Wilderness Downtown, 2010
  • Audible Visuals, 2016, coleção de visualizadores de áudio derivados do espiral Archimedean.[26]

Visualização modelo e aplicações para criação de cenários[editar | editar código-fonte]

Ferramentas de autoria para games e simulação[editar | editar código-fonte]

  • AgentCubes - uma ferramenta para projetar games incluindo modelagem 3D e programação arraste e solte, 2013[44][45]

Games[editar | editar código-fonte]

Educação[editar | editar código-fonte]

Comunidade[editar | editar código-fonte]

IDEs online com suporte embutido para Three.js estão disponíveis no WebGL Playground,[71] HTML Snippet[72] e jsFiddle.[73] Documentação está disponível para a API[74] assim como recomendações gerais na Wiki.[75] Suporte para desenvolvedores praticando na biblioteca é fornecido via fórum de problemas no GitHub,[76] enquanto o suporte para desenvolvedores construindo aplicativos e páginas web é fornecido via StackOverflow.[77] Suporte online em tempo real é fornecido usando IRC via Freenode.[78] Muitos desenvolvedores estão também no Twitter.

Ver também[editar | editar código-fonte]

Referências[editar | editar código-fonte]

  1. ↑ a b c «Three.js/license». github.com/mrdoob. Consultado em 20 de maio de 2012 
  2. ↑ a b «First commit». github.com/mrdoob. Consultado em 20 de maio de 2012 
  3. ↑ O3D
  4. ↑ Unity
  5. ↑ «Khronos Releases Final WebGL 1.0 Specification». Khronos Group. 3 de março de 2011. Consultado em 2 de junho de 2012 
  6. ↑ Crossley, Rob (11 de janeiro de 2010). «Study: Average dev costs as high as $28m». Intent Media Ltd. Consultado em 2 de junho de 2012 
  7. ↑ a b c d «Three.js White Paper». Github.com. 21 de maio de 2012. Consultado em 9 de maio de 2013 
  8. ↑ mrdoob (26 de novembro de 2012). «Features mrdoob/three.js Wiki GitHub». Github.com. Consultado em 9 de maio de 2013 
  9. ↑ «Stats.js». Github.com. Consultado em 9 de maio de 2013 
  10. ↑ «WebGL Inspector». Benvanik.github.com. Consultado em 9 de maio de 2013 
  11. ↑ «Three.js Inspector Labs». Zz85.github.com. Consultado em 9 de maio de 2013 
  12. ↑ Lagerfeld, Karl (2012). «The Little Black Jacket». CHANEL. Consultado em 2 de junho de 2012. Arquivado do original em 3 de junho de 2012 
  13. ↑ «Google Chrome Experiments - Daftunes». Chromeexperiments.com. Consultado em 9 de maio de 2013 
  14. ↑ «Daftunes». Daftunes.com. Consultado em 9 de maio de 2013 
  15. ↑ Eiji Muroichi @muroicci. «PlayPit». Playpit.kowareru.com. Consultado em 9 de maio de 2013 
  16. ↑ «Rome the album | 3 Dreams in Black the film». Ro.me. Consultado em 9 de maio de 2013 
  17. ↑ Hollister, Sean (12 de maio de 2011). «3 Dreams of Black is the Trippiest». Engadget.com. Consultado em 9 de maio de 2013 
  18. ↑ Koblin, Aaron (13 de maio de 2011). «3D Dreams in Modern Browser». Googleblog.blogspot.com. Consultado em 9 de maio de 2013 
  19. ↑ One Millionth TowerOne Millionth Tower
  20. ↑ «'Ellie Goulding's Lights». Lights.elliegoulding.com. Consultado em 9 de maio de 2013. Arquivado do original em 9 de janeiro de 2013 
  21. ↑ «Ellie Goulding Credits». Lights.elliegoulding.com. Consultado em 9 de maio de 2013. Arquivado do original em 9 de janeiro de 2013 
  22. ↑ «Ellie Goulding Lights». Thefwa.com. Consultado em 9 de maio de 2013. Arquivado do original em 10 de junho de 2013 
  23. ↑ «Hello Racer». Helloracer.com. Consultado em 9 de maio de 2013 
  24. ↑ «FWA Site of the Day». Helloenjoy.com. 5 de junho de 2011. Consultado em 9 de maio de 2013 
  25. ↑ «WebGL Reader». Fhtr.org. Consultado em 9 de maio de 2013 
  26. ↑ https://github.com/soniaboller/soniaboller.github.io/tree/master/audible-visuals
  27. ↑ «3D Gerber Viewer». Mayhewlabs.com. 18 de janeiro de 2013. Consultado em 9 de maio de 2013 
  28. ↑ «Clara.io 3D Editor». exocortex.com. 5 de novembro de 2013. Consultado em 10 de dezembro de 2013 
  29. ↑ «Kuda». Code.google.com. Consultado em 9 de maio de 2013 
  30. ↑ «Our Bricks». Our Bricks. Consultado em 9 de maio de 2013. Arquivado do original em 12 de maio de 2013 
  31. ↑ «P3D». P3d.in. Consultado em 9 de maio de 2013 
  32. ↑ «repovizz». Consultado em 9 de janeiro de 2015 
  33. ↑ Benjamin Nortier. «Shapesmith». Shapesmith. Consultado em 9 de maio de 2013 
  34. ↑ «Stackhack». Stackhack. Consultado em 9 de maio de 2013 
  35. ↑ «Sunglass». Sunglass.io. Consultado em 9 de maio de 2013 
  36. ↑ «ThingView». Consultado em 17 de abril de 2017. Arquivado do original em 7 de janeiro de 2011 
  37. ↑ Jason Kadrmas. «Three Fab». Blackjk3.github.com. Consultado em 9 de maio de 2013 
  38. ↑ «ThreeNodes». Idflood.github.com. Consultado em 9 de maio de 2013. Arquivado do original em 20 de janeiro de 2013 
  39. ↑ «ThreeScene». Errolschwartz.com. Consultado em 9 de maio de 2013 
  40. ↑ «Verold Studio». Verold.com. Consultado em 9 de maio de 2013. Arquivado do original em 13 de maio de 2013 
  41. ↑ «WebGL Craft». Danielribeiro.github.com. Consultado em 9 de maio de 2013 
  42. ↑ Kaala. «zb3D Grapher». Consultado em 30 de novembro de 2013. Cópia arquivada em 23 de novembro de 2013 
  43. ↑ «SimLab Composer». simlab-soft.com. 19 de agosto de 2015. Consultado em 19 de agosto de 2015 
  44. ↑ «AgentCubes - a game design tool». Agentsheets.com. Consultado em 9 de maio de 2013 
  45. ↑ «The Scalable Game Design arcade featuring Three.js based games». Scalablegamedesign.cs.colorado.edu. Consultado em 9 de maio de 2013 
  46. ↑ «Cube - a game about Google Maps». Playmapscube.com. Consultado em 9 de maio de 2013 
  47. ↑ Creative, Google. «Cube | Awwwards | Site of the day». Awwwards. Consultado em 9 de maio de 2013 
  48. ↑ «Ocuara». ocuara.com. Consultado em 1 de janeiro de 2014 
  49. ↑ «MafiaEmpires». www.wizardsworkshop.co.uk. Consultado em 5 de abril de 2014 
  50. ↑ «Tiny Shipping». Ld23.librador.com. Consultado em 9 de maio de 2013 
  51. ↑ «10 of the best educational games of Ludum Dare 23, part 2». Brainsforgames.rachelnponce.com. 9 de maio de 2012. Consultado em 9 de maio de 2013 
  52. ↑ «Marble Soccer». Marblesoccer.com. 13 de abril de 2011. Consultado em 9 de maio de 2013 
  53. ↑ Acosta, Darien (9 de abril de 2012). «WebGL - Game - Marble Soccer». Webgl.com. Consultado em 9 de maio de 2013 
  54. ↑ «Three.js Tetris». Fridek.github.com. Consultado em 9 de maio de 2013 
  55. ↑ «3D Tetris with Three.js tutorial - part 1». Smashinglabs.pl. Consultado em 9 de maio de 2013 
  56. ↑ «Trigger Rally». Triggerrally.com. Consultado em 9 de maio de 2013 
  57. ↑ «Trigger Rally - online edition». CreativeJS. 2 de março de 2012. Consultado em 9 de maio de 2013 
  58. ↑ «ChuClone». Chuclone.com. Consultado em 9 de maio de 2013 
  59. ↑ «ChuClone». Chrome Experiments. Consultado em 9 de maio de 2013 
  60. ↑ html5 games (7 de novembro de 2011). «ChuClone». html5 games. Consultado em 9 de maio de 2013 
  61. ↑ «WebGL Zombies vs Cow». Yagiz.me. Consultado em 9 de maio de 2013. Arquivado do original em 18 de setembro de 2013 
  62. ↑ «Zombies vs Cow - 3D Site Links». 3dsitelinks.com. Consultado em 9 de maio de 2013 
  63. ↑ «Pacmaze». Pacmaze.com. Consultado em 9 de maio de 2013. Arquivado do original em 31 de janeiro de 2013 
  64. ↑ «;Pacmaze by Jerome Etienne». Chrome Experiments. Consultado em 9 de maio de 2013 
  65. ↑ Internet Catch Of The Day (20 de agosto de 2011). «Pac Maze!». Internet Catch of the Day. Consultado em 9 de maio de 2013. Arquivado do original em 26 de janeiro de 2013 
  66. ↑ «Slimetribe». Zbigniew Lipka. Consultado em 8 de novembro de 2013 
  67. ↑ «Developing a street basketball game». Alexander Buzin. Consultado em 8 de agosto de 2016 
  68. ↑ «Laby». Magnum. Consultado em 13 de março de 2017 
  69. ↑ Interactive 3D Graphics
  70. ↑ "3D computer graphics for everyone"
  71. ↑ «WebGL Playground». WebGL Playground. Consultado em 9 de maio de 2013 
  72. ↑ «HTML Snippet». Html5snippet.net. 15 de maio de 2011. Consultado em 9 de maio de 2013 
  73. ↑ «jsFiddle». jsFiddle. Consultado em 9 de maio de 2013 
  74. ↑ «Three.js API reference». Mrdoob.github.com. 1 de janeiro de 2000. Consultado em 9 de maio de 2013 
  75. ↑ mrdoob (15 de março de 2013). «Three.js Wiki». Github.com. Consultado em 9 de maio de 2013 
  76. ↑ mrdoob. «Three.js Issues». Github.com. Consultado em 9 de maio de 2013 
  77. ↑ «Three.js». StackOverflow. Consultado em 9 de maio de 2013 
  78. ↑ «Freenode - Three.js». Webchat.freenode.net. Consultado em 9 de maio de 2013 

Bibliografia[editar | editar código-fonte]

Um número de livros de ciência da computação referem-se ao Three.js como uma ferramenta para simplificar o processo de desenvolvimento para aplicações WebGL assim como um método fácil para tornar-se familiar com os conceitos de WebGL. Estes livros, em ordem de apresentação, incluem:

  • 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 

Ligações externas[editar | editar código-fonte]

O Commons possui uma categoria com imagens e outros ficheiros sobre Three.js
Obtida de "https://pt.wikipedia.org/w/index.php?title=Three.js&oldid=67191506"