10 exemplos de código aberto impressionantes do Three.js em ação

Pode parecer loucura, mas você pode construir objetos 3D com JavaScript. A maioria dos desenvolvedores da web depende de bibliotecas como Three.js para fazer isso.

Mas é um processo tão detalhado que nem todos se preocupam em analisá-lo. Agora, se você está curioso sobre coisas 3D JS, a melhor maneira de aprender é estudando os outros. É exatamente por isso que fiz esta galeria.

Estes são alguns dos melhores projetos Three.js que encontrei hospedados no CodePen. Eles apresentam vários estilos e características diferentes que farão seu motor criativo acelerar.

1. Low Poly Earth

Com um único elemento HTML e algumas dezenas de linhas de CSS/JS, temos este low poly Earth do desenvolvedor Sam Saccone.

Pode não parecer muito no começo. Mas é uma das ideias mais proeminentes que já vi e até usa um efeito de animação personalizado. As massas de terra até se destacam da Terra, dando-lhe uma aparência muito mais realista.

Qualquer um que tenha usado o Three.js antes deve saber como isso é incrível.

É certamente um salto à frente de projetos semelhantes – principalmente por sua base de código menor.

2. Esferas

Este estranho projeto semelhante a um planeta também usa Three.js com um efeito bem legal. Spheres é executado no pré-processador Stylus, que você pode ver importado para o CSS.

Ele também é executado sem HTML – o que realmente torna isso um espetáculo para ser visto. É tudo JS, tudo 3D e funciona perfeitamente em todos os navegadores modernos.

As esferas menores deslizam sobre o orbe maior usando funções geométricas da biblioteca JS. Parece loucura que isso seja possível, mas é uma prova de quão longe chegamos com CSS.

3. Rotação do Planeta

Entrando em mais ideias de planetóides, temos essa galáxia giratória maluca criada pelo desenvolvedor Bryan Jones.

Ele também usa nada além de Three.js e algum CSS básico para estilizar e organizar os planetas. Devo dizer que os efeitos 3D são surpreendentes. Ainda não consigo entender o fato de que isso é possível em um navegador da Web típico!

Mas não há como negar que este trecho do CodePen é um ótimo auxiliar de estudo se você está apenas começando no território Three.js.

4. Logotipo da Treehouse em Three.js

O recurso de aprendizado online Treehouse é simplesmente fenomenal – especialmente para iniciantes. Um de seus instrutores, Nick Pettit, criou um logotipo completo da Treehouse usando Three.js.

E deixe-me dizer que essa coisa é incrível! Nunca vi uma configuração como essa e raramente vejo canetas com comentários tão detalhados. O código de Nick torna muito mais fácil pesquisar, encontrar funções que você não entende e, em seguida, acessar o Google para obter respostas.

Tudo sobre este logotipo 3D deve provar que o JS moderno está longe de ser obsoleto.

Dica: tente clicar + arrastar sobre a tela para girar o logotipo. Coisas divertidas!

5. Barril de Madeira

Aqui está outro trecho maluco desenvolvido por Nick Pettit usando apenas código JS puro. Sem HTML, sem CSS – tudo é renderizado através da linguagem JavaScript.

Naturalmente, isso depende do elemento canvas, que você pode gerar dentro do JavaScript. Eu mesmo já usei um pouco – mas nunca nesse nível. Isso mostra o quanto você pode fazer com uma biblioteca 3D sólida.

E também prova que Nick realmente sabe ensinar. Este é apenas um dos muitos exemplos em sua conta CodePen - todos com comentários fáceis de ler para aprender à medida que você avança.

6. Três.js + TweenMax

O desenvolvedor Martand Kashyap combinou o script TweenMax junto com o Three.js para fazer essa coisa maluca.

É uma das canetas mais exclusivas desta lista, com alguns efeitos interessantes de animação. Os painéis realmente parecem superfícies 2D planas, mas as animações invertidas criam um efeito 3D natural. Fica muito louco se você olhar para ele por tempo suficiente.

Na verdade, isso foi baseado em um projeto gráfico em movimento que Martand converteu em JavaScript. Estou vendo isso com muito mais frequência e é muito impressionante.

7. Campo Estelar de Partículas

O conceito de movimento em uma superfície 2D traz à mente todos os tipos de projetos de paralaxe. Você os encontrará em toda a web, muitas vezes usando recursos experimentais em JavaScript.

E este trecho do CodePen é fantástico para reunir essas ideias. Tem uma animação bem louca com diferentes velocidades de zoom, panorâmica lateral e um monte de outros recursos relacionados.

As partículas são geradas dinamicamente e você pode clicar em qualquer lugar na página para aumentar o zoom. Isso parece um vazio de espaço sem fim – muito parecido com aquele em que vivemos. Mas este foi criado com código JS puro.

8. Cubos Haml

Para mais geometria rotativa, confira estes cubos Three.js. Eles rodam na linguagem de templates Haml junto com ~100 linhas de JavaScript.

Talvez a parte mais impressionante desse design seja o efeito de sombreamento. Você não vê isso com muita frequência, mas é uma das melhores maneiras de criar um efeito 3D de aparência realista no navegador.

Felizmente, você pode lidar com tudo isso através do Three.js – com os snippets certos. E este pode funcionar como um ótimo modelo para esse propósito.

9. Tesseract

Mike Fey desenvolveu este tesserato incrivelmente complexo renderizado no espaço 3D. Na verdade, parece mais um cubo desdobrado organizado em um espaço 3D – como um cubo dentro de um cubo.

Mas observe que esta demonstração precisa de muitas bibliotecas para funcionar. Mike tem cinco scripts JS diferentes com jQuery, jQuery UI, ThreeJS, TweenJS e um script CubeJS. Os 3 últimos estão hospedados em seu site pessoal e devem ser de acesso livre.

Não posso dizer que este projeto seria valioso no mundo real. Mas é um recurso de aprendizado incrível se você quiser mergulhar na geometria espacial 3D.

10. Fragmentos 3D

O desenvolvedor Tobias Duhr construiu esses fragmentos 3D como uma amostra do que é possível no ThreeJS. Eles funcionam como os cubos rotativos mencionados anteriormente, exceto que as formas são diferentes e o sombreamento também desaparece.

Eu consideraria isso uma introdução mais fácil para aprender o ThreeJS se você não tiver certeza por onde começar. Concedido, este não é um tutorial, portanto, não pode ensiná-lo como outros recursos.

Mas, apenas estudando este código, você sairá com algumas ideias recém-descobertas para seu próprio trabalho.

11. Árvore de Pitágoras 3D

Esta árvore de Pitágoras 3D é simplesmente deslumbrante. O desenvolvedor Josep Llodra criou este projeto com apenas 150 linhas de JavaScript, juntamente com a biblioteca Three.js.

Na verdade, é baseado neste projeto, que mencionei anteriormente. Basicamente, ele estrutura esses cubos em uma única forma definida e depois os organiza com base no tamanho e na posição.

Se você não tem certeza do que pode fazer com o Three.js, espero que esta galeria ofereça um pouco de inspiração. Mas você sempre pode encontrar mais no CodePen se estiver disposto a dar uma olhada.