Tableless

Busca Menu

Iniciando com Three.js – 3D nos navegadores

Seja o primeiro a comentar por

Utilizando WebGL conseguimos criar gráficos 2D e 3D performáticos em navegadores, porém, utilizar a API da WebGL diretamente para criação destes gráficos é bastante complexo. A Three.js é uma biblioteca criada pelo Mr. Doob e que facilita esse processo.

A Three.js é compatível com todos os navegadores que suportam WebGL. Existem diversos exemplos de utilização dessa biblioteca que podem ser visualizados na Seção de Exemplos da Three.js.

Primeiros Passos:

Vamos baixar o código-fonte da Three.js ou usar uma CDN para prosseguir com o artigo e preparar o nosso HTML.

<!DOCTYPE html>
<html lang="pt-BR">
<head>
	<meta charset="UTF-8">
	<title>Iniciando com Three.js - Tableless</title>
	<style>
		body {
			margin: 0;
		}
		canvas {
			height: 100%;
			width: 100%;
		}
	</style>
</head>
<body>
	<script src="//cdnjs.cloudflare.com/ajax/libs/three.js/r70/three.min.js"></script>
	<script>
		/* Aqui irá o nosso código */
	</script>
</body>
</html>

Iniciando com a Three.js:

Para que seja possível exibir algo com a Three.js precisamos ter 3 coisas: a cena, a câmera e o renderizador.

var scene = new THREE.Scene();
var camera = new THREE.PerspectiveCamera( 75, window.innerWidth / window.innerHeight, 0.1, 1000 );
var renderer = new THREE.WebGLRenderer();
renderer.setSize( window.innerWidth, window.innerHeight );
document.body.appendChild( renderer.domElement );
  • Scene – Este será o seu palco, aqui serão armazenados todos os elementos que desejamos renderizar.
  • Camera – Iremos utilizar a PerspectiveCamera( fov, aspect, near, far ) para prosseguir, ela irá receber como argumento:
    – Fov: É o campo de visão;
    – Aspect Ratio: É a relação matemática obtida pela divisão entre as medidas da largura e da altura;
    Os demais argumentos o near e o far não farão diferença nesse momento, mas poderão ser usados para melhoras performáticas em games.
  • Renderer – Este é o nosso renderizador e utilizaremos o WebGLRenderer para isto.

Criando nosso elemento:

var geometry = new THREE.SphereGeometry( 5, 0, 0 );
var material = new THREE.MeshNormalMaterial ( {wireframe: true} );
var sphere = new THREE.Mesh( geometry, material );
scene.add( sphere );

camera.position.z = 15;

Para criar um elemento precisamos de uma geometria, a geometria contém os vértices e as faces do elemento e é o que estamos fazendo na declaração. A Three.js possuí algumas geometrias já criadas para auxiliar no desenvolvimento, entre elas: BoxGeometry, CircleGeometry, CylinderGeometry, entre outras… A Three.js contém geometrias já implementadas, porém, também conseguimos importar ou criar geometrias trabalhando com sua documentação.

Agora precisamos de um material para colorir nosso elemento e utilizaremos a MeshNormalMaterial para isso. Existem outros tipos de materiais que poderão ser usados e você poderá conhecê-los lendo a Documentação da Three.js.

A Mesh é um objeto que recebe uma geometria, e aplica um material, ela será inserida em sua cena e também poderá sofrer transformações e outros, como por exemplo: rotação, movimentação …

Adicionamos então a nossa Mesh em nossa cena e movimentamos a camera para obtermos uma melhor visualização do elemento. Por padrão, quando chamamos scene.add() adicionamos o nosso elemento nas coordenadas: (0,0,0).

Renderizando a cena:

Se você tentou executar o código percebeu que não é possível visualizar nosso elemento. Isso acontece porquê não estamos renderizando. Para que seja realizada essa renderização, precisamos de algo chamado Render Loop, ele será o responsável por renderizar nossa cena.

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

Isso irá criar um loop que irá renderizar a cena 60 vezes por segundo, utilizar o requestAnimationFrame() é a melhor alternativa para isso. Pronto! Agora conseguimos ver o nosso elemento em ação.

Animando o elemento:

Se você rodou o código, agora você conseguiu visualizar o nosso elemento. Vamos ver como podemos animá-lo e para isso iremos trabalhar novamente na função render().

function render() {
	requestAnimationFrame( render );
	sphere.rotation.x += .01;
	sphere.rotation.y += .01;
	renderer.render( scene, camera );
}
render();

Refinando:

Ok, temos o nosso elemento e também estamos animando ele, agora certamente se ocorrer um resize na janela o nosso elemento não obedecerá a proporção, vamos dar um acabamento final e consertar isso. Basta adicionar no final de nosso código:

window.addEventListener('resize', function() {
	var WIDTH = window.innerWidth,
	HEIGHT = window.innerHeight;
	renderer.setSize(WIDTH, HEIGHT);
	camera.aspect = WIDTH / HEIGHT;
	camera.updateProjectionMatrix();
});

Após modificar o tamanho do nosso renderizador e atualizar o aspect ratio da câmera precisamos atualizar a sua projeção para que seja aplicada a modificação, para isso utilizamos o updateProjectionMatrix().

See the Pen ByYEJK by Ronny Amarante (@ronnyamarante) on CodePen.

Conclusões:

Agora temos o nosso primeiro elemento criado com a Three.js, a intenção desse artigo é despertar o interesse nessa incrível biblioteca. Achei importante não fugir muito do Getting Started da biblioteca e adicionar alguns pontos importantes.

Publicado no dia