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.O3DUnity Isto é possível graças ao advento do WebGL.
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.
História Three.js foi primeiro lançado por Ricardo Cabello ao GitHub em abril de 2010. 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. 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. 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. Suas contribuições frequentemente se referem a geração de geometria.
Há mais de 650 contribuidores no total.
Recursos
Three.js inclui os seguintes recursos:
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, WebGL Inspector, Three.js Inspector 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 WebGLRendererWebGLRenderer – Documentação oficial, oferece SVGRendererSVGRenderer – Documentação oficial, CSS3DRendererCSS3DRenderer – Documentação oficial 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.
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. Daftunes, 2012, um projeto de visualização de som interativo. PlayPit, 2012 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" 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." -One Millionth TowerOne Millionth Tower Ellie Goulding's Lights, 12 de outubro de 2011, "uma experiência de vídeo musical interativo e colorido usando webgl" Hello Racer, 2011 - Premiou o FWA Site do Dia hoje, 5 de junho de 2011 WebGL Reader, 2011 The Wilderness Downtown, 2010 Audible Visuals, 2016, coleção de visualizadores de áudio derivados do espiral Archimedean.https://github.com/soniaboller/soniaboller.github.io/tree/master/audible-visuals
Visualização modelo e aplicações para criação de cenários 3D Gerber Viewer Clara.io Kuda Our Bricks P3D repovizz Shapesmith Stackhack Sunglass ThingView Three Fab ThreeNodes ThreeScene Verold Studio WebGL Craft zb3D Grapher SimLab Composer
Ferramentas de autoria para games e simulação
AgentCubes - uma ferramenta para projetar games incluindo modelagem 3D e programação arraste e solte, 2013
Games
Cube - um game sobre Google Maps, 2012 Ocuara - a Survival Horror MMO Proof-of-concept, 2014 MafiaEmpires - um Mafia MMO, 2014 Tiny Shipping, 2012 Marble Soccer, 2012 Three.js Tetris, 2012 Trigger Rally, 2012 ChuClone, 2012 WebGL Zombies vs Cow, 2012 Pacmaze, 2011 - um software livre multiplayer online 3D clone do Pac-Man Slimetribe - turn-based and RPG-like game experiment, 2012 Street basketball, 2016 / Laby, 2017
Educação
Interactive 3D Graphics - Massive Open Online Course, 2013Interactive 3D Graphics 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"3D computer graphics for everyone"
Comunidade IDEs online com suporte embutido para Three.js estão disponíveis no WebGL Playground, HTML Snippet e jsFiddle. Documentação está disponível para a API assim como recomendações gerais na Wiki. Suporte para desenvolvedores praticando na biblioteca é fornecido via fórum de problemas no GitHub, enquanto o suporte para desenvolvedores construindo aplicativos e páginas web é fornecido via StackOverflow. Suporte online em tempo real é fornecido usando IRC via Freenode. Muitos desenvolvedores estão também no Twitter.
Ver também
Google Chrome Experiments Lista de frameworks WebGL
Referências
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:
- "Three.js can make game development easier by taking care of low-level details"
Ligações externas
Categoria:Software de 2010 Categoria:APIs de cena gráfica 3D Categoria:Softwares multiplataformas Categoria:Bibliotecas gráficas Categoria:Bibliotecas JavaScript Categoria:Software usando a licença MIT