Posted onMar 29, 2024

Começando com Three.js, renderizando 3D no navegador

#threejs #helloworld #starting

Meu objetivo é explicar de forma simples sobre renderização 3D no navegador. Atualmente, há poucos recursos em português sobre o assunto, o que dificulta para quem está começando, mesmo que já tenha alguma afinidade com o tema.

Para começar, a WebGL (Web Graphics Library) é a API padrão para trabalhar com 3D no navegador. Ela é responsável por desenhar pontos, linhas e triângulos, mas para projetos mais complexos, o código pode ficar extenso. Para facilitar e manter a produtividade, utilizamos a biblioteca Three.js, que permite criar cenas, trabalhar com iluminação, materiais, texturas e muito mais.

Uma aplicação com Three.js possui três elementos principais: o Renderer, a Camera e uma Scene.

O Renderer é o componente central da Three.js, responsável por receber e renderizar a Scene e a Camera em um Canvas.

A Scene é mais complexa, permitindo adicionar luzes, texturas, modelos e outros elementos.

Por fim, a Camera define a perspectiva da Scene.

Agora que a estrutura foi explicada, vamos para o código. Nosso objetivo é ter um elemento 3D renderizado no navegador até o final deste artigo. Para isso, precisaremos apenas do Node.js instalado no terminal para baixar os pacotes necessários via npm.

Começamos criando nosso index.html:

<!DOCTYPE html><htmllang="pt-br"><head><metacharset="utf-8"><title>Meu primeiro 3D</title><style>body{margin:0;}</style></head><body><scripttype="module"src="/main.js"></script></body></html>

agora vamos criar o nosso arquivo main.js

import*asTHREEfrom'three';

Como você percebeu, já estou importando a biblioteca. Agora vamos realizar a instalação de fato usando o npm. Além disso, aproveitaremos para instalar um pacote que nos auxiliará no desenvolvimento local, o vite:

# three.jsnpminstall--save three# vitenpminstall--save-dev vite

Agora que o Vite está instalado, podemos iniciar nosso desenvolvimento local. Digite no terminal:

npx vite

Com a aplicação rodando localmente, vamos criar nossa primeira cena (Scene). Para começar, adicione um canvas com um ID no nosso HTML:

<!DOCTYPE html><htmllang="pt-br"><head><metacharset="utf-8"><title>Meu primeiro 3D</title><style>body{margin:0;}</style></head><body><canvasid="c"></canvas><scripttype="module"src="/main.js"></script></body></html>

Agora que temos nosso canvas, vamos selecioná-lo em nosso arquivo main.js e iniciar um Renderer:

import*asTHREEfrom'three';functionmain(){constcanvas=document.querySelector('#c');constrenderer=newTHREE.WebGLRenderer({antialias:true,canvas});}main()

Vamos adicionar a Camera dentro da função main() no arquivo main.js:

constcamera=newTHREE.PerspectiveCamera(75,2,0.1,5);camera.position.z=2;

Não vou entrar em detalhes sobre cada objeto da Three.js, mas recomendo fortemente a leitura da documentação. Quanto mais tempo você investir nisso, mais rápido vai entender tudo.

https://threejs.org/docs/#api/en/cameras/PerspectiveCamera

Por fim, vamos adicionar nossa cena (Scene) e dentro dela criar um cubo utilizando as formas geométricas primitivas que a biblioteca Three.js nos oferece.

constscene=newTHREE.Scene();constgeometry=newTHREE.BoxGeometry(1,1,1);constmaterial=newTHREE.MeshBasicMaterial({color:0x44aa88});constcube=newTHREE.Mesh(geometry,material);scene.add(cube);renderer.render(scene,camera);

Pronto, se tudo correu bem, agora você tem um Canvas renderizando uma forma 3D no seu navegador. Eu sei, pode não parecer muito, mas a jornada é feita de pequenas vitórias, certo?

No próximo artigo, vamos incorporar iluminação e movimento para obter uma experiência 3D mais realista.

Deixo aqui um link para inspirações:https://threejs.org/examples/#webgl_animation_keyframes

Como mencionei, o objetivo é trazer um conteúdo mais acessível e menos "gourmet" para facilitar a entrada de quem quiser se aventurar.

Espero que tenha gostado! Abaixo está o código final para referência:

index.html

<!DOCTYPE html><htmllang="pt-br"><head><metacharset="utf-8"/><title>Meu primeiro 3D</title><style>body{margin:0;}</style></head><body><canvasid="c"></canvas><scripttype="module"src="/main.js"></script></body></html>

main.js

import*asTHREEfrom"three";functionmain(){constcanvas=document.querySelector("#c");constrenderer=newTHREE.WebGLRenderer({antialias:true,canvas});constcamera=newTHREE.PerspectiveCamera(75,2,0.1,5);camera.position.z=2;constscene=newTHREE.Scene();constgeometry=newTHREE.BoxGeometry(1,1,1);constmaterial=newTHREE.MeshBasicMaterial({color:0x44aa88});constcube=newTHREE.Mesh(geometry,material);scene.add(cube);renderer.render(scene,camera);}main();