Acesse o painel da sua conta

Não tem uma conta? Registrar

Entrar em contato

Visite também nosso site craftxp.com.br

  • img
  • img
  • img
  • img
  • img
  • img

Entre em contato

Three.js e WebGL: Criando Experiências 3D Imersivas no Navegador com JavaScript

Three.js e WebGL: Criando Experiências 3D Imersivas no Navegador com JavaScript

A Revolução dos Gráficos 3D na Web

Por muito tempo, renderizar gráficos 3D no navegador era uma tarefa complexa que exigia plugins pesados como Flash ou Java Applets. Tudo mudou com a chegada do WebGL (Web Graphics Library), uma API JavaScript baseada no OpenGL ES que permite renderização 3D acelerada por hardware diretamente na tag <canvas>.

O Three.js surgiu como a biblioteca mais popular para abstrair a complexidade do WebGL, oferecendo uma API amigável para criar cenas 3D, animações, efeitos visuais e até mesmo aplicações de Realidade Virtual (VR) e Aumentada (AR) no navegador.

O que é Three.js?

Three.js é uma biblioteca JavaScript de código aberto que simplifica drasticamente a criação de gráficos 3D na web. Em vez de escrever centenas de linhas de código WebGL bruto, você pode criar uma cena 3D completa com poucas linhas:

import * as THREE from 'three';

const cena = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
const renderizador = new THREE.WebGLRenderer();
renderizador.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderizador.domElement);

const geometria = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshStandardMaterial({ color: 0x00ff88 });
const cubo = new THREE.Mesh(geometria, material);
cena.add(cubo);

camera.position.z = 5;

function animar() {
  requestAnimationFrame(animar);
  cubo.rotation.x += 0.01;
  cubo.rotation.y += 0.01;
  renderizador.render(cena, camera);
}
animar();

Conceitos Fundamentais

Antes de mergulhar, é essencial entender os quatro pilares do Three.js:

  • Scene (Cena): O container que armazena todos os objetos, luzes e câmeras. É o mundo onde tudo acontece.
  • Camera (Câmera): Define a perspectiva do observador. Os tipos mais comuns são PerspectiveCamera (efeito de profundidade realista) e OrthographicCamera (sem distorção de perspectiva).
  • Renderer (Renderizador): Responsável por desenhar a cena na tela. O WebGLRenderer é o padrão, mas existe também o CSS2DRenderer para elementos HTML sobrepostos.
  • Mesh (Malha): Combina uma geometria (forma) com um material (aparência). É o objeto visível na cena.

Geometrias e Materiais

Three.js ofere dezenas de geometrias prontas e materiais sofisticados:

// Geometrias comuns
const cubo = new THREE.BoxGeometry(1, 1, 1);
const esfera = new THREE.SphereGeometry(1, 32, 32);
const cilindro = new THREE.CylinderGeometry(1, 1, 2, 32);
const toro = new THREE.TorusGeometry(1, 0.4, 16, 100);
const plano = new THREE.PlaneGeometry(5, 5);

// Materiais
const padrao = new THREE.MeshStandardMaterial({ color: 0xff5733, roughness: 0.5, metalness: 0.3 });
const fisico = new THREE.MeshPhysicalMaterial({ color: 0x00aaff, clearcoat: 0.3, transparent: true, opacity: 0.8 });
const basico = new THREE.MeshBasicMaterial({ color: 0xffffff, wireframe: true });

Iluminação: Dando Vida à Cena

Sem luz, objetos com MeshStandardMaterial aparecem totalmente pretos. Three.js oferece vários tipos de luz:

  • AmbientLight: Iluminação suave e uniforme que atinge todos os lados dos objetos. Essencial para evitar áreas completamente escuras.
  • DirectionalLight: Simula luz solar, com direção definida e sombras projetadas.
    • PointLight: Emite luz em todas as direções a partir de um ponto, como uma lâmpada.
  • SpotLight: Holofote cônico ideal para efeitos dramáticos.
  • HemisphereLight: Luz do céu e do chão com cores diferentes, perfeita para cenas externas realistas.
const luzAmbiente = new THREE.AmbientLight(0x404060);
cena.add(luzAmbiente);

const luzSolar = new THREE.DirectionalLight(0xffffff, 1);
luzSolar.position.set(5, 10, 7);
luzSolar.castShadow = true;
cena.add(luzSolar);

Carregando Modelos 3D Externos

Para aplicações reais, você não vai criar tudo com geometrias primitivas. Three.js suporta carregamento de modelos GLTF/GLB, FBX, OBJ e outros formatos:

import { GLTFLoader } from 'three/addons/loaders/GLTFLoader.js';

const loader = new GLTFLoader();
loader.load('modelo.glb', (gltf) => {
  cena.add(gltf.scene);
}, undefined, (erro) => {
  console.error('Erro ao carregar modelo:', erro);
});

O formato GLTF é o padrão da indústria para a web — eficiente, compacto e suporta texturas, animações e até skins de esqueletos para personagens.

Animações e Interatividade

O loop de animação com requestAnimationFrame é o coração de qualquer aplicação Three.js. Para animações mais complexas, use o sistema de mixers e clips:

// Animação importada de modelo GLTF
const mixer = new THREE.AnimationMixer(gltf.scene);
const acao = mixer.clipAction(gltf.animations[0]);
acao.play();

function animar() {
  requestAnimationFrame(animar);
  mixer.update(0.01);
  renderizador.render(cena, camera);
}
animar();

Para interatividade com mouse, use o Raycaster para detectar cliques em objetos 3D:

const raycaster = new THREE.Raycaster();
const mouse = new THREE.Vector2();

window.addEventListener('click', (evento) => {
  mouse.x = (evento.clientX / window.innerWidth) * 2 - 1;
  mouse.y = -(evento.clientY / window.innerHeight) * 2 + 1;
  
  raycaster.setFromCamera(mouse, camera);
  const interseccoes = raycaster.intersectObjects(cena.children);
  
  if (interseccoes.length > 0) {
    interseccoes[0].object.material.color.setHex(0xff0000);
  }
});

Three.js no Mundo Real

Three.js não é apenas para demonstrações técnicas. Empresas como Google (Earth Studio), BMW (configurador de carros), IKEA (visualizador de móveis em AR) e plataformas como Sketchfab usam Three.js em produção. As aplicações incluem:

  • E-commerce: Visualizadores 3D de produtos que aumentam a taxa de conversão em até 40%
  • Arquitetura: Tours virtuais interativos de imóveis e plantas 3D
  • Educação: Simulações científicas e modelos anatômicos interativos
  • Jogos: Jogos 3D direto no navegador sem instalação
  • Data Visualization: Gráficos 3D interativos para grandes volumes de dados

Próximos Passos

Three.js tem um ecossistema vasto e ativo. Para continuar seus estudos:

  1. Explore a documentação oficial com exemplos interativos
  2. Experimente o React Three Fiber (R3F) — um renderizador Three.js declarativo para React que combina a reatividade do React com o poder do Three.js
  3. Aprenda shaders customizados com GLSL para efeitos visuais avançados
  4. Mergulhe em WebGPU — a sucessora do WebGL que promete desempenho ainda maior (já disponível experimentalmente no Three.js r160+)

Com Three.js, o navegador se torna uma plataforma 3D poderosa e acessível. O único limite é sua criatividade — e a GPU do usuário!

Craft XP
Craft XP