Posted on Mar 29, 2024

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

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> <html lang="pt-br"> <head> <meta charset="utf-8"> <title>Meu primeiro 3D</title> <style> body { margin: 0; } </style> </head> <body> <script type="module" src="/main.js"></script> </body> </html>

agora vamos criar o nosso arquivo main.js

import * as THREE from '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.js npm install --save three # vite npm install --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> <html lang="pt-br"> <head> <meta charset="utf-8"> <title>Meu primeiro 3D</title> <style> body { margin: 0; } </style> </head> <body> <canvas id="c"></canvas> <script type="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 * as THREE from 'three'; function main() { const canvas = document.querySelector('#c'); const renderer = new THREE.WebGLRenderer({antialias: true, canvas}); } main()

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

const camera = new THREE.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.

const scene = new THREE.Scene(); const geometry = new THREE.BoxGeometry(1, 1, 1); const material = new THREE.MeshBasicMaterial({color: 0x44aa88}); const cube = new THREE.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> <html lang="pt-br"> <head> <meta charset="utf-8" /> <title>Meu primeiro 3D</title> <style> body { margin: 0; } </style> </head> <body> <canvas id="c"></canvas> <script type="module" src="/main.js"></script> </body> </html>

main.js

import * as THREE from "three"; function main() { const canvas = document.querySelector("#c"); const renderer = new THREE.WebGLRenderer({ antialias: true, canvas }); const camera = new THREE.PerspectiveCamera(75, 2, 0.1, 5); camera.position.z = 2; const scene = new THREE.Scene(); const geometry = new THREE.BoxGeometry(1, 1, 1); const material = new THREE.MeshBasicMaterial({ color: 0x44aa88 }); const cube = new THREE.Mesh(geometry, material); scene.add(cube); renderer.render(scene, camera); } main();