Criando um sistema solar simples com three.js – parte 3

Olá pessoal, tudo certo!?

Vamos então para a parte final do nosso projeto de um sistema solar utilizando three.js. O objetivo de hoje é colocar uma iluminação na cena e também aplicar as texturas no sol e na Terra.

Iluminação

A three.js oferece vários tipos de iluminação que pode utilizar. No nosso caso, vamos trabalhar com uma PointLight simples que irá gerar o efeito de degradê nos objetos, mas não irá gerar sombras da Terra sobre a lua e vice-versa. O código abaixo mostra a função que cria a luz e a adiciona na cena.
Apenas criamos uma luz de cor branca (poderia ser de outra cor). Vale ressaltar que não precisamos informar os parâmetros intensity e distance na hora de criar a luz (ver documentação). Por fim, apenas posicionamos a luz onde desejamos na cena. Esta posição poderia ser a mesma da câmera, mas o feito degradê não seria tão visível.
Além de adicionar a iluminação na cena, para que ela funcione devemos alterar o tipo de material dos objetos. No momento estamos utilizando MeshBasicMaterial e para que o efeito da luz ocorra, iremos utilizar MeshLambertMaterial como no exemplo abaixo.

Textura

Antes de partir para o código das texturas, é necessário baixar as imagens que farão as devidas texturas. Seguem os links para as texturas do sol e da Terra.
Adicionar as texturas é simples, visto que a three.js já fornece o método THREE.ImageUtils.loadTexture que cria uma textura a partir da URL de uma imagem. Com a textura criada apenas precisamos associá-la ao material do nosso objeto como no exemplo abaixo através da propriedade map.
Com essas alterações o nosso sistema solar está pronto. Espero que tenham gostado desta introdução a three.js em conjunto com alguns conceitos de computação gráfica e peço desculpas na demora para publicar esta última parte.
Nos vemos no próximo post 🙂
Abaixo segue o código completo e o link para o GitHub.

 

Anúncios

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s