Three.js

Three.js

Three.js
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; há 14 anos
Versão estável	r164 (26 de abril de 2024; há 5 meses)
Escrito em	JavaScript
Gênero(s)	Biblioteca JavaScript
Licença	MIT
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.

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:

• 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

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.

• 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." -
• 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.

• 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

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

• 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

• Interactive 3D Graphics - Massive Open Online Course, 2013
• 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

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.

• Google Chrome Experiments
• Lista de frameworks WebGL

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:

• Williams, James (2013). Three.js By Example. Vancouver, Canada: Leanpub 

O Commons possui uma categoria com imagens e outros ficheiros sobre Three.js

• Sítio oficial (em inglês)
• three.js no GitHub