Começando com Three.js, renderizando 3D no navegador
Tags: threejs, helloworld, starting
Published: 2024-03-29 12:03:57

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:

```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

```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:

```bash
# 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:

```bash
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:

```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:

```js
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:

```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.

```js
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
```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
```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();

```

|- > node_modules
|- index.html
|- main.js
|- package-lock.json
|- package.json

<hr><br>

> Agora vamos deixar nosso projeto mais imersivo?
> A segunda parte do nosso artigo já está pronta [Parte 2](https://dev.to/baltz/comecando-com-threejs-imersao-com-3d-no-navegador-3k8k)