Three.js — como destacar um website na multidão web

Published in

MCTW_TDW

7 min readFeb 22, 2022

Certamente, todos nós já visitámos as mais diversas e variadas páginas que a World Wide Web tem para oferecer. Desde as notícias mais frescas às receitas perfeitas para as reuniões de família, o acesso à informação nunca foi tão fácil. Esta informação é normalmente transmitida por texto, imagens, vídeo, som ou uma combinação destes meios. Infelizmente, a maioria de websites segue uma fórmula para dispor estes elementos, levando a uma falta de variedade na apresentação de informação: páginas onde é possível fazer scroll vertical, compostas principalmente por texto, sendo os outros componentes opcionais ou meramente complementos. Uma pessoa fica com a sensação de que ao ver um ou dois sites, já os viu a todos. E é aqui que entra o tópico deste artigo: Three.js, uma janela para o mundo 3D em browsers! Com esta nova dimensão vem um conjunto de novas vertentes, desde luminosidade, animação, materiais, etc., as possibilidades aumentam exponencialmente. Cabe a cada um encontrar uma combinação de imaginação, criatividade misturados com uma dose de vontade de aprender e persistência para criar um produto invejável.

O que é Three.js?

Three.js é uma API/biblioteca de JavaScript que permite criar e utilizar conteúdo 3D em browsers que suportem WebGL. Felizmente, a grande maioria dos mais populares são compatíveis com esta tecnologia, desde o Google Chrome 9+, Firefox 4+, Opera 15+, Internet Explorer 11, Microsoft Edge, Safari 5.1+, ect. Antes de continuar, é relevante explicar o que é WebGL (Web Graphics Library): uma API de JavaScript que permite ter conteúdo 3D em browsers diretamente no canvas, sem dependências de plug-ins externos. Mas então qual é a diferença entre estes sistemas? WebGL é um sistema de baixo nível enquanto que Three.js é um de alto nível. Posto de uma forma simples, WebGL é limitado por apenas poder desenhar pontos, linhas e triângulos. Para implementar funcionalidades mais complexas é necessária uma quantidade generosa de código e trabalho extra por parte do desenvolvedor.

E é com este problema que surgiu o Three.js, que simplifica significantemente o processo de implementação de alguns dos elementos comuns do mundo 3D, como iluminação, sombras, texturas e afins, sendo toda esta magia completamente independente de plug-ins de browsers. Resumidamente, Three.js é uma simplificação de WebGL para facilitar a realização de ideias inovadoras.

Parece-me interessante, mas por onde começo?

Por norma, quando se começa a aprender uma nova linguagem, o “clássico” primeiro passo acaba por ser o “Hello World!”: um projeto que retorne as palavras “Hello World!”. No caso do mundo 3D, a situação é ligeiramente diferente. Em vez de mostrar um conjunto de palavras, o primeiro desafio acaba por ser a criação de um cubo, um “Hello Cube!”. Mas, antes de chegarmos a esse ponto, precisamos de carregar a biblioteca de Three.js. Isto é fácil de fazer e pode ser executado de duas formas: através de um link que contém a biblioteca necessária ou diretamente de um ficheiro local. Vamos ver como se pode fazer:

Sim, é assim tão simples. Basta mesmo apenas aquela linha dentro do corpo da nossa página. Esta assegura que temos todo a biblioteca pronta a usar. Alternativamente, para o método local, apenas é preciso apontar para o diretório onde se encontra a biblioteca.

Na pasta “js” criei um documento chamado ”three.js” que contém todo o pacote necessário.

Agora para desenvolver o projeto em si.

Aqui estamos a estabelecer alguns elementos base sem os quais não é possível visualizar o nosso conteúdo. Precisamos de uma cena e de um renderer para criar um sítio onde exibimos o nosso trabalho, definindo o seu tamanho com setSize() e de seguida afixamo-lo ao corpo do nosso documento. Criamos também uma câmara, de modo a controlarmos a perspetiva de visualização, onde definimos o FOV (field of view, ou seja, campo de visão), o tamanho e os limites máximos e mínimos de clipping, que essensialmente controlam onde a câmara começa e acaba de mostrar o conteúdo visível.

Agora que temos os componentes necessários prontos, passamos à parte do que queremos que seja visível.

Para criarmos o nosso cubo, precisamos duas propriedades: a geometria, para ditar a forma do nosso objeto, e um material, de modo a alterarmos a sua aparência. Three.js já inclui algumas geometrias de base e como queremos obter um cubo, criamos uma utilizando a função BoxGeometry(). É possível também controlar aspetos como as dimensões e número de divisões das faces. Em seguida usamos MeshBasicMaterial() para atribuir um material ao nosso cubo, neste caso uma simples cor, lilás. Adicionamos estes atributos ao objeto, controlamos a distância da câmara, o seu eixo “z”, e voilà, a nossa obra prima:

Da forma como o cubo está posicionado, apenas conseguimos ver umas das suas faces, por isso vamos dar-lhe um toque para lhe dar um pouco de vida: animação!

Nesta parte definimos uma função onde declaramos que o nosso cubo deve sofrer uma rotação nos eixos “x” e “y”. Um ponto bastante importante a ter atenção é a necessidade de mover o nosso render para dentro desta função, pois este, igualmente às alterações de rotação, precisa de ser constantemente atualizado num loop, de modo a poder mostrar as alterações ao longo do tempo.

E ainda podemos ir mais longe com outra vertente 3D, a iluminação.

Como MeshBasicMaterial() não é afetado por iluminação, temos de fazer a alteração para MeshStandardMaterial().

Definimos aqui uma luz do tipo PointLight(), com a mesma cor do nosso objeto, e a sua posição no mundo 3D, sendo por fim adicionada à nossa cena para um resultado bastante visível:

E assim, com pouco mais de 30 linhas de código, criamos a nossa própria cena 3D com um objeto animado com iluminação!

E agora?

Agora é uma questão de dar largas à imaginação e à criatividade. Como referido antes, uma nova dimensão traz consigo uma miríade de novas possibilidades. E Three.js não está limitado a usar os modelos e texturas base, pois é possível carregar elementos pré-feitos. Caso se trate de uma falta de inspiração, nada está perdido. Fortemente recomendo uma visita a https://threejs.org/, onde se encontram disponíveis inúmeros exemplos, possíveis graças ao uso desta biblioteca. Websites como o de Bruno Simon, Garden Eight, Dvein, With.in, e exemplos de Three.js (onde se ecnontram pequenas demonstrações do poder desta tecnologia) mostram o que acontece quando as suas capacidades se unem com a imaginação.

Pros/cons

Como tudo na vida, nada é perfeito, por isso vamos comparar as vantagens e desvantagens de usar o Three.js:

Vantagens:

Facilidade de aprendizagem;
Bastantes guias e tutoriais;
Excelente documentação;
Possibilidade de criação de websites inovadores e sem igual;
Responsividade;
Potencial para criar uma experiência mais imersiva para o utilizador final;
Rico em funcionalidades.

Desvantagens:

3D requer um nível de processamento mais elevado, o que leva a maiores tempos para carregar;
Aprender uma nova tecnologia leva o seu tempo;
Three.js não é uma ferramenta universal, o tempo e o trabalho dedicado a um projeto pode ser desnecessário se é pretendido algo simples.

Conclusão

Three.js é uma poderosa ferramenta para qualquer web developer ter no seu kit. É a resposta perfeita quando se pretende criar algo que dê nas vistas e fique na memória. Com esta biblioteca, a imaginação é o limite! Desde a criação de um website de vendas com um aspeto visual inédito a um de apresentação pessoal com elementos interativos, as possibilidades de criação de um produto único são infinitas. Tal e qual o slogan usado pela Apple entre 1997 e 2002: