Three.js
Three.js | |
---|---|
![]() | |
Autor | Ricardo Cabello (Mr.doob) |
Desenvolvedor | Autores do Three.js[1] |
Lançamento | 24 de abril de 2010; há 14 anos[2] |
Versão estável | r164 (26 de abril de 2024; há 4 meses) |
Escrito em | JavaScript |
Gênero(s) | Biblioteca JavaScript |
Licença | MIT[1] |
Estado do desenvolvimento | Ativo |
Página oficial | threejs |
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
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
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
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
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
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
- 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
- 3D Gerber Viewer[27]
- Clara.io[28]
- Kuda[29]
- Our Bricks[30]
- P3D[31]
- repovizz[32]
- Shapesmith[33]
- Stackhack[34]
- Sunglass[35]
- ThingView[36]
- Three Fab[37]
- ThreeNodes[38]
- ThreeScene[39]
- Verold Studio[40]
- WebGL Craft[41]
- zb3D Grapher[42]
- SimLab Composer[43]
Ferramentas de autoria para games e simulação
- AgentCubes - uma ferramenta para projetar games incluindo modelagem 3D e programação arraste e solte, 2013[44][45]
Games
- Cube - um game sobre Google Maps, 2012[46][47]
- Ocuara - a Survival Horror MMO Proof-of-concept, 2014[48]
- MafiaEmpires - um Mafia MMO, 2014[49]
- Tiny Shipping, 2012[50][51]
- Marble Soccer, 2012[52][53]
- Three.js Tetris, 2012[54][55]
- Trigger Rally, 2012[56][57]
- ChuClone, 2012[58][59][60]
- WebGL Zombies vs Cow, 2012[61][62]
- Pacmaze, 2011 - um software livre multiplayer online 3D clone do Pac-Man[63][64][65]
- Slimetribe - turn-based and RPG-like game experiment, 2012[66]
- Street basketball, 2016[67]
- / Laby, 2017[68]
Educação
- Interactive 3D Graphics - Massive Open Online Course, 2013[69]
- PhysGL.org (http://www.physgl.org) - Empacotadores JavaScript para three.js com um IDE baseado em web, para fazer gráficos 3D, facilmente acessível a estudantes e professores, 2012[70]
Comunidade
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
- Google Chrome Experiments
- Lista de frameworks WebGL
Referências
- ↑ a b c «Three.js/license». github.com/mrdoob. Consultado em 20 de maio de 2012
- ↑ a b «First commit». github.com/mrdoob. Consultado em 20 de maio de 2012
- ↑ O3D
- ↑ Unity
- ↑ «Khronos Releases Final WebGL 1.0 Specification». Khronos Group. 3 de março de 2011. Consultado em 2 de junho de 2012
- ↑ 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
- ↑ a b c d «Three.js White Paper». Github.com. 21 de maio de 2012. Consultado em 9 de maio de 2013
- ↑ mrdoob (26 de novembro de 2012). «Features mrdoob/three.js Wiki GitHub». Github.com. Consultado em 9 de maio de 2013
- ↑ «Stats.js». Github.com. Consultado em 9 de maio de 2013
- ↑ «WebGL Inspector». Benvanik.github.com. Consultado em 9 de maio de 2013
- ↑ «Three.js Inspector Labs». Zz85.github.com. Consultado em 9 de maio de 2013
- ↑ Lagerfeld, Karl (2012). «The Little Black Jacket». CHANEL. Consultado em 2 de junho de 2012. Arquivado do original em 3 de junho de 2012
- ↑ «Google Chrome Experiments - Daftunes». Chromeexperiments.com. Consultado em 9 de maio de 2013
- ↑ «Daftunes». Daftunes.com. Consultado em 9 de maio de 2013
- ↑ Eiji Muroichi @muroicci. «PlayPit». Playpit.kowareru.com. Consultado em 9 de maio de 2013
- ↑ «Rome the album | 3 Dreams in Black the film». Ro.me. Consultado em 9 de maio de 2013
- ↑ Hollister, Sean (12 de maio de 2011). «3 Dreams of Black is the Trippiest». Engadget.com. Consultado em 9 de maio de 2013
- ↑ Koblin, Aaron (13 de maio de 2011). «3D Dreams in Modern Browser». Googleblog.blogspot.com. Consultado em 9 de maio de 2013
- ↑ One Millionth TowerOne Millionth Tower
- ↑ «'Ellie Goulding's Lights». Lights.elliegoulding.com. Consultado em 9 de maio de 2013. Arquivado do original em 9 de janeiro de 2013
- ↑ «Ellie Goulding Credits». Lights.elliegoulding.com. Consultado em 9 de maio de 2013. Arquivado do original em 9 de janeiro de 2013
- ↑ «Ellie Goulding Lights». Thefwa.com. Consultado em 9 de maio de 2013. Arquivado do original em 10 de junho de 2013
- ↑ «Hello Racer». Helloracer.com. Consultado em 9 de maio de 2013
- ↑ «FWA Site of the Day». Helloenjoy.com. 5 de junho de 2011. Consultado em 9 de maio de 2013
- ↑ «WebGL Reader». Fhtr.org. Consultado em 9 de maio de 2013
- ↑ https://github.com/soniaboller/soniaboller.github.io/tree/master/audible-visuals
- ↑ «3D Gerber Viewer». Mayhewlabs.com. 18 de janeiro de 2013. Consultado em 9 de maio de 2013
- ↑ «Clara.io 3D Editor». exocortex.com. 5 de novembro de 2013. Consultado em 10 de dezembro de 2013
- ↑ «Kuda». Code.google.com. Consultado em 9 de maio de 2013
- ↑ «Our Bricks». Our Bricks. Consultado em 9 de maio de 2013. Arquivado do original em 12 de maio de 2013
- ↑ «P3D». P3d.in. Consultado em 9 de maio de 2013
- ↑ «repovizz». Consultado em 9 de janeiro de 2015
- ↑ Benjamin Nortier. «Shapesmith». Shapesmith. Consultado em 9 de maio de 2013
- ↑ «Stackhack». Stackhack. Consultado em 9 de maio de 2013
- ↑ «Sunglass». Sunglass.io. Consultado em 9 de maio de 2013
- ↑ «ThingView». Consultado em 17 de abril de 2017. Arquivado do original em 7 de janeiro de 2011
- ↑ Jason Kadrmas. «Three Fab». Blackjk3.github.com. Consultado em 9 de maio de 2013
- ↑ «ThreeNodes». Idflood.github.com. Consultado em 9 de maio de 2013. Arquivado do original em 20 de janeiro de 2013
- ↑ «ThreeScene». Errolschwartz.com. Consultado em 9 de maio de 2013
- ↑ «Verold Studio». Verold.com. Consultado em 9 de maio de 2013. Arquivado do original em 13 de maio de 2013
- ↑ «WebGL Craft». Danielribeiro.github.com. Consultado em 9 de maio de 2013
- ↑ Kaala. «zb3D Grapher». Consultado em 30 de novembro de 2013. Cópia arquivada em 23 de novembro de 2013
- ↑ «SimLab Composer». simlab-soft.com. 19 de agosto de 2015. Consultado em 19 de agosto de 2015
- ↑ «AgentCubes - a game design tool». Agentsheets.com. Consultado em 9 de maio de 2013
- ↑ «The Scalable Game Design arcade featuring Three.js based games». Scalablegamedesign.cs.colorado.edu. Consultado em 9 de maio de 2013
- ↑ «Cube - a game about Google Maps». Playmapscube.com. Consultado em 9 de maio de 2013
- ↑ Creative, Google. «Cube | Awwwards | Site of the day». Awwwards. Consultado em 9 de maio de 2013
- ↑ «Ocuara». ocuara.com. Consultado em 1 de janeiro de 2014
- ↑ «MafiaEmpires». www.wizardsworkshop.co.uk. Consultado em 5 de abril de 2014
- ↑ «Tiny Shipping». Ld23.librador.com. Consultado em 9 de maio de 2013
- ↑ «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
- ↑ «Marble Soccer». Marblesoccer.com. 13 de abril de 2011. Consultado em 9 de maio de 2013
- ↑ Acosta, Darien (9 de abril de 2012). «WebGL - Game - Marble Soccer». Webgl.com. Consultado em 9 de maio de 2013
- ↑ «Three.js Tetris». Fridek.github.com. Consultado em 9 de maio de 2013
- ↑ «3D Tetris with Three.js tutorial - part 1». Smashinglabs.pl. Consultado em 9 de maio de 2013
- ↑ «Trigger Rally». Triggerrally.com. Consultado em 9 de maio de 2013
- ↑ «Trigger Rally - online edition». CreativeJS. 2 de março de 2012. Consultado em 9 de maio de 2013
- ↑ «ChuClone». Chuclone.com. Consultado em 9 de maio de 2013
- ↑ «ChuClone». Chrome Experiments. Consultado em 9 de maio de 2013
- ↑ html5 games (7 de novembro de 2011). «ChuClone». html5 games. Consultado em 9 de maio de 2013
- ↑ «WebGL Zombies vs Cow». Yagiz.me. Consultado em 9 de maio de 2013. Arquivado do original em 18 de setembro de 2013
- ↑ «Zombies vs Cow - 3D Site Links». 3dsitelinks.com. Consultado em 9 de maio de 2013
- ↑ «Pacmaze». Pacmaze.com. Consultado em 9 de maio de 2013. Arquivado do original em 31 de janeiro de 2013
- ↑ «;Pacmaze by Jerome Etienne». Chrome Experiments. Consultado em 9 de maio de 2013
- ↑ 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
- ↑ «Slimetribe». Zbigniew Lipka. Consultado em 8 de novembro de 2013
- ↑ «Developing a street basketball game». Alexander Buzin. Consultado em 8 de agosto de 2016
- ↑ «Laby». Magnum. Consultado em 13 de março de 2017
- ↑ Interactive 3D Graphics
- ↑ "3D computer graphics for everyone"
- ↑ «WebGL Playground». WebGL Playground. Consultado em 9 de maio de 2013
- ↑ «HTML Snippet». Html5snippet.net. 15 de maio de 2011. Consultado em 9 de maio de 2013
- ↑ «jsFiddle». jsFiddle. Consultado em 9 de maio de 2013
- ↑ «Three.js API reference». Mrdoob.github.com. 1 de janeiro de 2000. Consultado em 9 de maio de 2013
- ↑ mrdoob (15 de março de 2013). «Three.js Wiki». Github.com. Consultado em 9 de maio de 2013
- ↑ mrdoob. «Three.js Issues». Github.com. Consultado em 9 de maio de 2013
- ↑ «Three.js». StackOverflow. Consultado em 9 de maio de 2013
- ↑ «Freenode - Three.js». Webchat.freenode.net. Consultado em 9 de maio de 2013
Bibliografia
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
- Williams, James (2013). Three.js By Example. Vancouver, Canada: Leanpub
Ligações externas
![](http://upload.wikimedia.org/wikipedia/commons/thumb/4/4a/Commons-logo.svg/22px-Commons-logo.svg.png)
- Sítio oficial (em inglês)
- three.js no GitHub