Criando um sistema solar simples com three.js – Parte 2

Olá pessoal, tudo certo!?

No post de hoje vamos dar continuidade ao nosso projeto de sistema solar utilizando o three.js. O objetivo de hoje é trabalhar as tranformações geométricas e a animação.

Inicialmente, quero me desculpar pela demora nesta continuação, acabei me perdendo com algumas datas o que acabou gerando a demora para escrever.

Antes de começar, se você não tem muito conhecimento sobre transformações geométricas, é interessante abrir este PDF que traz algumas explicações que podem ser úteis durante a leitura deste post.

Vamos começar com uma pequena adaptação no código. Iremos trocar as esferas por cubos porque é melhor para ver o efeito de rotação.

[gist https://gist.github.com/ejulio/83518fe85497956ee1a1 file=”trocar-esferas-cubos.js” /]

No código acima estão demonstradas as três linhas que precisamos trocar para que as esferas se tornem cubos na cena. Com a troca feita e os cubos aparecendo, podemos começar o loop de renderização. O loop de renderização como o nome já diz é a rotina que fica repetindo a renderização da cena. Para fazer um loop de renderização iremos utilizar o método requestAnimationFrame disponível nos novos navegadores.

[gist https://gist.github.com/ejulio/83518fe85497956ee1a1 file=”loop-renderizacao.js” /]

Além do loop de renderização, precisamos também de uma método auxiliar que converte graus em radianos. O three.js trabalha apenas com radianos nos métodos de rotação, por isso precisamos fazer esta conversão.

[gist https://gist.github.com/ejulio/83518fe85497956ee1a1 file=”calcular-radianos.js” /]

Agora que temos a estrutura auxilizar pronta podemos partir para as transformações geométricas. Vamos iniciar com a rotação do sol.

[gist https://gist.github.com/ejulio/83518fe85497956ee1a1 file=”rotacionar-sol.js” /]

Primeiramente criamos um método responsável apenas pela rotação do sol. Neste método criamos uma matriz e nesta matriz representamos uma rotação no eixo Y através do método makeRotationY(). Depois de criar e configurar a matriz, aplicamos esta matriz ao nosso sol. Neste momento ainda não acontece nada com o sol, porque ainda temos que chamar este método no nosso loop de renderização como no cóigo abaixo.

[gist https://gist.github.com/ejulio/83518fe85497956ee1a1 file=”loop-renderizacao-2.js” /]

Como podemos perceber ao executar o projeto, apenas com a rotação no sol foi possível ver a Terra rotacionando também. Esse efeito ocorreu devido a estrutura de grafo de cena que adicionamos no final do post anterior. A ideia de grafo de cena é a estruturação da cena como uma árvore de objetos para que ao aplicar uma transformação em um “nó pai” essa transformação seja aplicada aos “nós filhos”. Vamos agora para a rotação da Terra.

[gist https://gist.github.com/ejulio/83518fe85497956ee1a1 file=”rotacionar-terra.js” /]

O método que faz a rotação da Terra é semelhante ao do sol, onde há apenas a mudança quanto ao fato de que precisamos movimentar a Terra para o centro para depois rotacionarmos e posteriormente voltarmos ao local original¹. A movimentação para o centro ocorre utilizando a matrizTranslacaoCentro que faz uma translação para o ponto x = 0, y = 0, z = 0 (por isso os valores negativos referentes a posição da Terra). Posteriormente, para retornar a Terra para a sua devida posição, fazemos uma translação de volta utilizando a matrizTranslacaoPosicao.

Agora que rotacionamos a Terra, podemos utilizar as mesmas técnicas para rotacionar a lua.

[gist https://gist.github.com/ejulio/83518fe85497956ee1a1 file=”rotacionar-lua.js” /]

Como você pode perceber, não há muita diferença entre os códigos de rotação da Terra e da lua, apenas o grau da rotação. Se você quiser fazer a rotação mais rápida ou mais lenta, basta apenas mudar o número que passamos para o método calcularRadianos.

Era isso para esse post. Até o momento já alcançamos o objetivo da animação e agora só faltam as texturas e iluminações. Abaixo segue o código completo até este momento.

[gist https://gist.github.com/ejulio/83518fe85497956ee1a1 file=”codigo-final.html” /]

No próximo post (semana que vem) vamos falar dos dois assuntos que faltam.

Espero que tenham gostado. Nos vemos na próxima semana com o último post desta pequena série de introdução ao three.js.

Abraço.


 

¹ Vou tentar explicar a ideia de ter que movimentar o objeto para a origem e depois retornar. Existem 3 tipos de transformações geométricas: translação (move um objeto em um ou mais eixos), rotação (rotaciona um objeto em relação a um eixo) e escala (aumenta/diminui o tamanho de um objeto em relação a um ou mais eixos). Destas três transformações a única que “não se importa com a posição atual do objeto” é a translação. A escala e a rotação mudam a posição do objeto caso o objeto não esteja na origem (x = 0, y = 0, z = 0). Por isso, para que a rotação da Terra seja sobre o seu próprio eixo e não a origem, transladamos a Terra para a origem, rotacinamos e voltamos a Terra para o local inicial. Se você quiser ver o efeito que ocorre em caso de não aplicar as translações, apenas comente as translações e execute o exemplo e você deverá ver a rotação da Terra alterada.

Anúncios

4 pensamentos sobre “Criando um sistema solar simples com three.js – Parte 2

  1. Por que parece que a translação não faz nada quando eu comento ou arranco ela? Todo o trabalho é feito pela rotação, que por sinal consegui realizar com muito menos código.

    function render(){
    sol.rotation.y += 0.01;
    terra.rotation.y += 0.01;
    lua.rotation.y += 0.01;

    renderer.render(cena, camera);

    // rotacionarSol();
    // rotacionarTerra();
    // rotacionarLua();

    requestAnimationFrame(render);
    }

    • A translação como eu comentei no final do post, serve para você levar o objeto para a origem e rotacionar sobre o próprio eixo, Quando apenas aplicamos uma rotação, o objeto rotaciona sobre a origem e não sobre o próprio eixo.
      Quanto ao tamanho do código. Em geral, eu prefiro trabalhar com matrizes porque elas permitem o acúmulo de transformações (como no exemplo da translação) e porque a sequência sol.rotation.y, ao meu ver, é mais um atributo de consulta.
      Neste exemplo, a alteração direta (sol.rotation.y) funcione bem, mas talvez em aplicações mais complexas, seja necessário trabalhar com matrizes.

      Espero que a resposta tenha sido clara e útil 😀

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