_ _ _ _____ ___ __ __ _(_) | _(_)___ / ( _ ) / /_ ___ ___ _ __ ___ \ \ /\ / / | |/ / | |_ \ / _ \| '_ \ / __/ _ \| '_ ` _ \ \ V V /| | <| |___) | (_) | (_) | (_| (_) | | | | | | \_/\_/ |_|_|\_\_|____/ \___/ \___(_)___\___/|_| |_| |_|
Exemplos de capturas de tela do Three.js | |
Autor | Ricardo Cabello (Mr.doob) |
Desenvolvedor | Autores do Three.js |
Lançamento | 24 de abril de 2010 |
Versão estável | r164 (26 de abril de 2024 | )
Escrito em | JavaScript |
Gênero(s) | Biblioteca JavaScript |
Licença | MIT |
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.
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. 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.
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.
Three.js inclui os seguintes recursos:
Three.js roda em todos os browsers suportados pelo WebGL 1.0.
Three.js é disponível sob a licença MIT.
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>
A biblioteca Three.js é usada para uma ampla variedade de aplicações e propósitos. As seguintes listas identificam usos selecionados e trabalhos.
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.
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: