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

Agora vamos deixar nosso projeto mais imersivo?
A segunda parte do nosso artigo já está pronta Parte 2

Simplify your DevOps and maximize your time.

Since 2007, Heroku has been the go-to platform for developers as it monitors uptime, performance, and infrastructure concerns, allowing you to focus on writing code.

Learn More