Usando Three.js para adicionar elementos 3D aos seus sites

O design plano é ótimo, mas os elementos 3D levam os layouts de web design a um novo nível. Os sites com gráficos 3D animados e cenas 3D interativas estão se tornando mais populares do que nunca. Os clientes agora querem esses tipos de designs em seus sites e eles vão perguntar por eles. Aprender como incorporar design 3D em seus projetos de web design só vai melhorar sua carreira e atrair mais clientes. Felizmente, recursos como Three.js estão facilmente disponíveis para designers e desenvolvedores Divi adicionarem elementos 3D personalizados a seus sites.

Nesta postagem, veremos os fundamentos do Three.js e por que ele é uma boa escolha para adicionar elementos 3D aos seus sites. Sim, até mesmo seus sites Divi. Para começar com Three.js, você precisará de algum conhecimento de codificação, especificamente HTML, CSS e Javascript. Se você ainda está aprendendo a codificar, siga o tutorial passo a passo no site Three.js desde o início. Se a terminologia de onde adicionar o código é nova para você, há muitos tutoriais disponíveis para orientá-lo nas etapas técnicas. Eu sugiro que você assista a alguns vídeos, talvez faça um curso de Skillshare ou Udemy para realmente ter uma ideia de como incorporar a biblioteca Three.js em seus projetos.

Vamos lá.

O que é Three.js

Em primeiro lugar, o que é Three.js?

Three.js é uma biblioteca javascript 3D que fornece renderizadores <canvas>, <svg>, CSS3D e WebGL. Ele traz designs 3D para o seu navegador sem a necessidade de um plugin. A biblioteca pode ajudá-lo a criar elementos 3D simples, interações 3D complexas e jogos animados criativos. Three.js é uma biblioteca de código aberto com um repositório Github onde os usuários podem compartilhar suas próprias criações Three.js.

De todos os renderizadores que o Three.js cobre, o mais comumente usado é o WebGL. A criação de elementos 3D apenas com WebGL requer muitas linhas de código e muito conhecimento matemático. Three.js torna muito mais fácil criar uma cena e renderizá-la com WebGL.

Compreendendo uma cena 3D e a terminologia de Three.js

Para criar uma animação 3D com Three.js, primeiro você deve entender como uma cena 3D é configurada. Os três elementos necessários para construir uma configuração 3D são os seguintes:

1. A cena
2. A câmera
3. O renderizador

A cena é onde você configura todos os elementos 3D que Three.js exibirá. Visualmente, lembra um palco de teatro ou um aparelho de televisão. a câmera é o ponto de vista da cena e como um humano veria tecnicamente os elementos na cena. O renderizador junta tudo e desenha a cena. Se você é fluente em animação 3D, certamente reconhece isso como um padrão para a configuração de uma cena.

Depois que a cena é configurada, os objetos são colocados nela. Os objetos são construídos em três etapas:

1. A geometria
2. O material
3. A malha

A geometria de um objeto é o esqueleto ou contorno básico de uma forma. Para dar à geometria uma cor ou textura, o material é aplicado. A combinação da geometria e do material é chamada de malha .

A biblioteca Three.js já tem muitas geometrias básicas para você usar. Não há necessidade de construí-los do zero. Você só precisa chamá-los da biblioteca para o seu código e, em seguida, personalizá-los. Além de usar códigos hexadecimais para cores como o material, você pode criar texturas com imagens ou encontrá-las em bibliotecas de textura.

Depois que a cena é configurada e as geometrias são adicionadas, você adiciona funções para iluminar a cena, animar os objetos e muito mais. Além dos objetos básicos disponíveis na biblioteca Three.js, você também pode fazer upload de outras imagens 3D de bibliotecas online ou que você criar no Blender.

Primeiros passos com Three.js

Não poderia ser mais fácil se sentir confortável com Three.js. O site Three.js tem toda a documentação de que você precisa para entender como a biblioteca funciona e como você pode usá-la.

No site Three.js e em seu Github, você encontrará uma versão ao vivo do código para o aplicativo Three.js mais simples. Eles usam JSFiddle, mas você também pode vê-lo funcionando em CodePen ou Codesandbox.io

Eu sugiro que você siga as etapas no site Three.js para realmente entender como tudo funciona. Com Codepen, seu Terminal ou software de codificação preferido. Toda a biblioteca Three.js está disponível no site Threejs.org para ser usada assim que você definir seu cenário e começar a perceber o que pode ser feito. Abaixo você pode ver o aplicativo Three.js básico funcionando no JSFiddle. Clique em “Editar com JSFiddle” para brincar com o código.

Recursos de aprendizagem Three.js

Como Three.js é uma API de código aberto, sempre há coisas acontecendo em seu repositório GitHub. O que significa que sempre há muitas coisas novas para aprender. Felizmente, eles criaram um manual digital que é constantemente atualizado para alterações. Você pode encontrá-lo em discoverthreejs.com. Este é de longe o melhor recurso que existe. Se você precisar de um tutorial passo a passo sobre como configurar o aplicativo e usar os recursos da biblioteca, aqui está um ótimo curso sobre Skillshare que o conduz por todas as etapas na documentação do Three.js.

Da mesma forma, este tutorial do YouTube mostra os fundamentos da configuração de uma cena com Three.js, mas espera que você conheça habilidades básicas de desenvolvimento web.

Se você quiser se aprofundar em Three.js e WebGL, este curso da Udemy explica tudo e promete que você será fluente na criação de conteúdo 3D até o final.

Procurando um tutorial básico, rápido e sujo? Este tutorial de código passo a passo no CreativeBloq é exatamente o que você precisa.

Exemplos Three.js

Não há nada melhor do que um pouco de inspiração para começar a projetar seus próprios projetos 3D com Three.js. Para ver algumas criações incríveis do Three.js, basta acessar o site deles e explorar.

Usando Three.js com Divi

Usar Three.js com Divi é bastante simples. Você só precisa adicionar a biblioteca javascript aos arquivos do seu projeto e adicioná-la ao seu HTML. Para adicionar um aplicativo a qualquer layout Divi, primeiro crie o design 3D separadamente no seu software de codificação favorito ou no terminal do seu computador. Quando a compilação estiver pronta, copie o javascript em um módulo de código. Certifique-se de usar as tags <script> de abertura e fechamento.

Conclusão

Three.js é um recurso poderoso para adicionar elementos 3D a um site. Nesta postagem, vimos os fundamentos básicos de como o Three.js funciona. A API envolve tanto que você realmente precisa mergulhar fundo e experimentar. As possibilidades são infinitas. De um simples cubo giratório a um jogo interativo complexo dentro de um rico mundo digital. O que você criará com Three.js?

Imagem em destaque via theromb / shutterstock.com