Temos recursos em nossos navegadores com os quais não teríamos sonhado 5 ou 10 anos atrás. Mundos de jogo 3D inteiros podem ser executados no navegador e sites interativos podem ser experiências mais imersivas.
Com uma certa empresa de realidade virtual sendo comprada por uma determinada empresa de mídia social, agora é a hora perfeita para começar a trabalhar com o 3D. Surpreendentemente, agora podemos criar 3D com JavaScript puro, incluindo malhas e materiais.
É claro que, mesmo sendo possível, requer uma enorme quantidade de código, e é aí que o Three.js entra, permitindo que construamos ambientes 3D com simplicidade e com menos código.
Infelizmente, porque é novo, o 3D não é suportado por todos os navegadores. No momento, estamos restritos ao Chrome, Safari e Firefox.
Com o passar do tempo, o suporte ao IE irá melhorar, mas, por enquanto, você precisará de um substituto para os devotos da Microsoft.
A primeira coisa que precisamos fazer é ir até o site three.js e faça o download da versão mais recente da biblioteca.
Em seguida, faça referência a ele no cabeçalho do documento, como faria com qualquer outro arquivo JavaScript, e estamos prontos para começar.
A primeira coisa que precisamos fazer para renderizar qualquer coisa com o 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 do qual o usuário está olhando. O Three.js tem muitas opções aqui, mas para simplificar, vamos usar uma câmera em perspectiva:
var camera = new THREE.PerspectiveCamera(100, window.innerWidth / window.innerHeight, 0.1, 1000);Esse método usa quatro parâmetros: o primeiro é o campo de visão, o segundo é a proporção (recomendo sempre basear isso na viewport do usuário), o plano de recorte próximo e, por fim, o plano de recorte mais distante. Esses dois últimos parâmetros determinam os limites de renderização, de modo que os objetos que estão muito próximos ou muito distantes não são desenhados, o que desperdiçaria recursos.
Em seguida, precisamos configurar o Renderizador WebGL:
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 renderizador e, em seguida, definir seu tamanho para a viewport do usuário. Finalmente, adicionamos a instância à página para criar uma tela em branco para trabalharmos com ela.
Até agora, tudo o que fizemos foi preparar o palco, agora vamos criar nosso primeiro objeto 3D.
Para este tutorial, será um cilindro simples:
var geometry = new THREE.CylinderGeometry( 5, 5, 20, 32 );Este método também leva 4 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 configuramos a matemática do objeto, agora precisamos envolvê-lo em um material para que ele realmente pareça algo 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 o wireframe para true porque ele mostrará o objeto com mais clareza quando chegarmos a animá-lo.
Finalmente, precisamos adicionar nosso cilindro à nossa cena, assim:
var cylinder = new THREE.Mesh( geometry, material );scene.add( cylinder );
A última coisa a fazer antes de renderizarmos a cena é definir a posição da câmera:
camera.position.z = 20;Como você pode ver, o JavaScript envolvido é extremamente simples, porque o Three.js está lidando com todas as coisas complicadas, então não precisamos fazê-lo.
Se você testar o arquivo em um navegador agora, verá que nada está acontecendo. Isso é porque nós não dissemos a cena para renderizar. Para renderizar a cena, precisamos do seguinte código:
function render() {requestAnimationFrame(render);renderer.render(scene, camera);}render();Se você der uma olhada no arquivo em seu navegador, verá que ele realmente renderiza um cilindro, mas não é muito empolgante.
Para realmente melhorar o valor do 3D, você precisa começar a animação, o que podemos fazer com algumas pequenas alterações em nossa função de renderização :
function render() {requestAnimationFrame(render);cylinder.rotation.z += 0.01;cylinder.rotation.y += 0.1;renderer.render(scene, camera);}render();Se você testar em seu navegador agora, verá um cilindro 3D com animação adequada.
Se você quiser ver uma demonstração e brincar com o código que você pode faça isso aqui.
Como você pode ver, criar essa cena (reconhecidamente muito simples) levou menos de duas dúzias de linhas de código, e há muito pouca matemática envolvida.
Se você verificar o exemplos no site three.js você verá um trabalho incrível que foi feito.
Esta incrível biblioteca para JavaScript realmente baixou o nível de entrada para codificar 3D a ponto de que qualquer um que possa escrever JavaScript básico possa se envolver.