Top Qs
Linha do tempo
Chat
Contexto

Three.js

Da Wikipédia, a enciclopédia livre

Three.js
Remove ads

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.

Factos rápidos Autor, Desenvolvedor ...
Remove ads

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]

Remove ads

História

Resumir
Perspectiva

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]

Remove ads

Recursos

Resumir
Perspectiva

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]
  • 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[12], oferece SVGRenderer[13], CSS3DRenderer[14] 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]

Remove ads

Uso

Resumir
Perspectiva

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>
Remove ads

Usos selecionados e trabalhos

Resumir
Perspectiva

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

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

Ferramentas de autoria para games e simulação

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

Games

Educação

  • Interactive 3D Graphics - Massive Open Online Course, 2013[72]
  • 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[73]
Remove ads

Comunidade

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

Remove ads

Ver também

  • Google Chrome Experiments
  • Lista de frameworks WebGL

Referências

Bibliografia

Ligações externas

Loading related searches...

Wikiwand - on

Seamless Wikipedia browsing. On steroids.

Remove ads
Remove ads