May.19

Desenvolvendo em 3D no Browser com Three.js

Hoje nós temos funcionalidades em nossos navegadores que não teríamos sonhado há 5 ou 10 anos atrás. Mundos inteiros em 3D que podem ser executados no navegador e sites interativos com experiências mais imersivas.

E já que uma certa empresa de realidade virtual está sendo comprada por uma determinada empresa de mídia social, agora é o momento perfeito para começar a trabalhar com 3D. Por incrível que pareça, agora podemos criar 3D somente com JavaScript, incluindo várias possibilidades.

É claro que, mesmo que seja possível, isso exige uma enorme quantidade de código, e é aí que Three.js entra, ele nos permite construir ambientes 3D de forma simples e com menos código.

Compatibilidade do navegador

Infelizmente, por ser novo, o 3D não é suportado em todos os navegadores. No momento, estamos restritos ao Chrome, Safari e Firefox.

Com o passar do tempo o IE vai nos alcançar, mas por enquanto você vai precisar de um fallback para os devotos da Microsoft.

Introdução.

A primeira coisa que precisamos fazer é acessar o site da three.js e baixar a última versão da biblioteca.

Em seguida, faremos referência a ela no Head do documento, como você faria com qualquer outro arquivo JavaScript, e estamos prontos para começar.

Criando nossa primeira cena

A primeira coisa que precisamos fazer, para criar qualquer coisa com three.js é criar uma cena, uma câmera e um renderizador.

Começando com uma cena:

var scene = new THREE.Scene();

Em seguida, precisamos de uma câmera. Pense nisso como o ponto de vista de que o usuário está olhando a cena. O Three.js oferece um monte de opções aqui, mas para simplificar, vamos usar uma câmera de perspectiva:

var camera = new THREE.PerspectiveCamera(100, window.innerWidth / window.innerHeight, 0.1, 1000);

Este método tem quatro parâmetros:

  1. O campo de visão.
  2. A relação de aspecto.
  3. O plano de recorte próximo.
  4. E o plano de recorte afastado.

Estes dois últimos parâmetros determinam os limites da renderização, de modo que os objetos que estão muito perto ou muito longe não são desenhados, o que desperdiçaria recursos.

Em seguida, é preciso configurar o WebGL Renderer:
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );

Como você pode ver, a primeira coisa aqui é criar uma instância do processador, em seguida, definir o seu tamanho para janela do utilizador, finalmente, adicioná-lo à página para criar uma tela em branco para que possamos trabalhar.

Adicionando alguns objetos.

Até agora, tudo o que fizemos foi configurar a área de trabalho, agora nós vamos criar o nosso primeiro objeto 3D. Para este tutorial vai ser um cilindro simples:

var geometry = new THREE.CylinderGeometry( 5, 5, 20, 32 );

Este método também tem quatro parâmetros: o primeiro é o raio do topo do cilindro, o segundo é o raio do fundo do cilindro, o terceiro é a altura, o último é o número de segmentos de altura.

Nós criamos a matemática do objeto, agora precisamos envolvê-la em um material para que ele realmente apareça na tela:

var material = new THREE.MeshBasicMaterial( { color: 0x0000ff, wireframe: true} );

Este código adiciona um material simples para o objeto, neste caso uma cor azul. Eu configurei wireframe para True, porque ele vai mostrar o objeto de forma mais clara, uma vez que começar a animá-lo.

Finalmente, é preciso adicionar o nosso cilindro na nossa cena, assim:

var cylinder = new THREE.Mesh( geometry, material );
scene.add( cylinder );

A última coisa a fazer antes de renderizar a cena é definir a posição da câmera:

camera.position.z = 20;

Como você pode ver, o JavaScript envolvido é extremamente simples, isso porque o Three.js lida com todas as coisas complicadas, assim nós não precisamos.

Renderização da cena.

Se você testar o arquivo em um navegador agora você verá que nada está acontecendo. Isso é porque nós não colocamos a cena para renderizar. Para renderizar a cena nós precisamos do seguinte código:


function render() {
requestAnimationFrame(render);
renderer.render(scene, camera);
}
render();

Se você agora dar uma olhada no arquivo em seu navegador, você vai vê-lo, de fato, renderizar um cilindro, mas não é muito emocionante.

Para realmente aumentar o valor do 3D você precisa começar a animar, o que podemos fazer com um par de pequenas mudanças para a nossa função render:


function render() {
requestAnimationFrame(render);
cylinder.rotation.z += 0.01;
cylinder.rotation.y += 0.1;
renderer.render(scene, camera);
}
render();

Se você testar no seu navegador agora você vai ver um cilindro 3D corretamente animado.

Conclusão.

Se você quiser ver uma demonstração e brincar com o código você pode
fazer isso aqui.

Como você pode ver, criar esta cena (na verdade muito simples) levou menos de duas linhas dúzia de código, e há muito pouco de matemática envolvida. Se você verificar os exemplos no site da three.js você verá alguns trabalhos incríveis que tem sido feito.

Esta biblioteca fantástica para JavaScript tem realmente reduzido o nível de entrada para a codificação 3D ao ponto de que qualquer um que pode escrever JavaScript básico pode se envolver.

Compartilhe isso:
  • facebook
  • twitter
  • gplus

Sobre R.Junior

Comentários(1)

  1. Adriano
    2276 days ago

    Cara, excelente post.
    Muito obrigado por compartilhar seu conhecimento.

Deixe um comentário