Review | Learning Three.js

09 March 2015

Na minha opinião esse é o melhor livro pra aprender WebGL usando Three.js.



Depois que li o WebGL Up and Running resolvi conhecer um pouco mais do Three.js. O livro anterior era bom, como descrevi no post anterior, mas esse está a frente.

Elementos básicos

Esse livro começa falando sobre como construir uma cena, fazendo a composição da camêra e das luzes de maneira bem simples. Ele vai aos poucos e de forma construtiva adicionando elementos como o plano, cubos e esferas. Depois de mostrar o básico, ele mostra algum detalhe mais avançado. Por exemplo, no início, após mostrar os primeiros passos, ele já mostra como aplicar texturas e fazer algumas animações simples.

dat.GUI

Uma dica interessante do livro é o projeto dat.GUI. Não é um projeto só pra WEBGL, mas que ajuda muito nessa caso. Ele cria uma tela de controles das variáveis javascript, facilitando a visualização dos elementos.

O livro passa por vários detalhes de construção de cenários, mostra também algumas funções já prontas, como a função Fog para cenários com neblina. As possibilidades de utilização da câmera também são muito bem exploradas, mostrando a diferença de usar orthographic camera e perspective camera.

O capítulo 4 também é excelente pra entender mais sobre os diferentes tipos de material disponíveis. MeshBasicMaterial, MeshDepthMaterial, MeshFaceMaterial, etc. Um material junto com uma geometria forma um mesh.

No exemplo abaixo, o mesh do cubo mágico é feito utilizando o face material.



Conteúdo avançado

O livro vai avançando e mostrando exemplos mais avançados. Uma série de geometrias mais complexas são mostradas além de explicar como fazer a subtração, intersecção e outras operações com diferentes objetos. O livro mostra como utilizar SVG para formatos que são criados por ilustrações e mostra ajustes finos no controle dos elementos renderizados, como o exemplo a seguir:


Existem mais uma série de exemplos complexos no final do livro, passando por partículas mais complexas, shaders e animações. O exemplo abaixo mostra como um objeto 3D pode ser importado de ferramentas como Blender.



Conclusão

Pra mim, o melhor livro pra aprender WebGL com Three.js. Você pode ver todos os 109 exemplos do livro nesse post.
comments powered by Disqus