Wikipédia

Three.js

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.

Three.js
AutorRicardo Cabello (Mr.doob)
DesenvolvedorAutores do Three.js[1]
Lançamento inicial24 de abril de 2010; há 16 anos[2]
Lançamento estável
184[3] Edit this on Wikidata / 16 abril 2026
Repositório
Escrito emJavaScript
TipoBiblioteca JavaScript
LicençaMIT[1]
Websitethreejs.org

Visão geral

editar

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.[4][5] Isto é possível graças ao advento do WebGL.[6]

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

História

editar

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.[8] 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.[8] 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.[8] Suas contribuições frequentemente se referem a geração de geometria.

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

Recursos

editar

Three.js inclui os seguintes recursos:[9]

  • 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,[10] WebGL Inspector,[11] Three.js Inspector[12]
  • Realidade virtual e aumentada: suporte nativo a WebXR, incluindo realidade virtual (VR) e aumentada (AR); compatível com dispositivos como Oculus Quest, Hololens e navegadores com suporte.
  • Renderizadores alternativos: além do WebGLRenderer[13], oferece SVGRenderer[14], CSS3DRenderer[15] e suporte experimental ao WebGPURenderer.
  • Materiais físicos (PBR): suporte a materiais baseados em física como MeshStandardMaterial e MeshPhysicalMaterial com reflexos realistas, mapas HDR, IBL e transparência avançada.
  • Instanciamento: uso de InstancedMesh para renderizar milhares de objetos com alta performance em tempo real.
  • Pós-processamento avançado: efeitos como bloom, desfoque de profundidade (depth of field), anti-aliasing (FXAA, SMAA), oclusão de ambiente (SSAO), outline e motion blur. Editor visual: editor online integrado para criação e manipulação de cenas 3D com exportação em JSON ou código.
  • Controles interativos: OrbitControls, DragControls, TransformControls, FlyControls e PointerLockControls para movimentação e manipulação de objetos e câmera.
  • Geometria procedural: geometria gerada dinamicamente com algoritmos customizados, subdivisões e buffer geometry.
  • Integração com física: compatível com motores de física como Cannon.js, Ammo.js, Rapier.js e Oimo.js via adaptadores.
  • Carregadores de formatos modernos: suporte completo ao formato glTF 2.0, incluindo materiais PBR, animações, esqueleto e compressão Draco.
  • Ferramentas de depuração: suporte a ferramentas modernas como three-mesh-bvh para raycasting otimizado e lil-gui para manipulação de parâmetros ao vivo.

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

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

Uso

editar

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

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
  • 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.[16]
  • Daftunes, 2012, um projeto de visualização de som interativo.[17][18]
  • PlayPit, 2012[19]
  • 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"[20][21][22]
  • 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." -[23]
  • Ellie Goulding's Lights, 12 de outubro de 2011, "uma experiência de vídeo musical interativo e colorido usando webgl"[24][25][26]
  • Hello Racer, 2011 - Premiou o FWA Site do Dia hoje, 5 de junho de 2011[27][28]
  • WebGL Reader, 2011[29]
  • The Wilderness Downtown, 2010
  • Audible Visuals, 2016, coleção de visualizadores de áudio derivados do espiral Archimedean.[30]

Visualização modelo e aplicações para criação de cenários

editar

Ferramentas de autoria para games e simulação

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

Games

editar

Educação

editar

Comunidade

editar

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

Ver também

editar

Referências

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

Bibliografia

editar

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
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=72094846"