Olá pessoal, tudo certo!?
No semestre que passou tive aulas de computação gráfica na graduação e também andei brincando com three.js nas últimas semanas. Hoje gostaria começar a compartilhar um pouco do que aprendi sobre computação gráfica e three.js.
Inicialmente, eu não sou nenhum expert em computação gráfica ou three.js então fiquem a vontade para sugerir melhorias 🙂
Show me the code
Começamos criando uma página HTML como no template abaixo. As definições CSS são apenas para que o espaço de desenho ocupe toda a página.
| <!DOCTYPE html> | |
| <html> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>Sistema solar three.js</title> | |
| <style type="text/css"> | |
| body { | |
| margin: 0; | |
| padding: 0; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/three.js/r68/three.js"></script> | |
| <script type="text/javascript"> | |
| // aqui vai o nosso código | |
| </script> | |
| </body> | |
| </html> |
Para podermos criar uma cena no three.js precisamos inicialmente de três componentes, são eles: cena (faz sentido!), câmera e renderer. No nosso caso, utilizaremos uma câmera em perspectiva e um renderer WebGL.
No código acima criamos os componentes permitem iniciar a nossa cena.
Começamos pela criação de uma cena (instância de THREE.Scene) que é onde todos os nossos objetos serão adicionados.
Criamos também uma câmera. Esta imagem dá uma ideia do que significam os parâmetros da câmera. O parâmetro fovy indica o ângulo de abertura da câmera. Os parâmetros near e far delimitam o campo de desenho, onde nada que esteja mais próximo que near ou mais longe que far será desenhado. O aspectRatio é a relação entre altura e largura para que a imagem não fique distorcida. Um exemplo de aspectRatio seria o 16:9 das televisões. Também posicionamos a nossa câmera na posição x = 75, y = 75 e z = 75 e fizemos ela olhar para a posição x = 0, y = 0, z = 0 com a função lookAt().
Por fim criamos o renderer que é o responsável por desenhar a nossa cena na página. Configuramos o renderer para que ele tenha o tamanho da janela e adicionamos o canvas ao body da nossa página. O comando renderer.render(cena, camera) deve ser o último comando do código, mesmo após adicionarmos os códigos para criar o sol, a Terra e a lua.
Sol
Iniciamos pela adição do sol a nossa cena. A primeira ação a ser feita, é a criação de uma geometria que irá representar o nosso objeto, no nosso caso é uma THREE.SphereGeometry. O primeiro parâmetro de uma THREE.SphereGeometry é o tamanho. Os outros 2 parâmetros indicam a quantidade de segmentos horizontais e verticais da nossa esfera (quanto maior o número, melhor a qualidade).
Após as definições básicas, criamos um material para o sol, THREE.MeshBasicMaterial, esse tipo de material não sofre interferência da luz, que é o nosso caso no momento, onde queremos apenas dar uma cor a nossa esfera. O valor 0xD6D637 é uma cor em hexadecimal, assim como no CSS.
Também criamos uma THREE.Mesh que representa o objeto do sol na cena. Para instanciar um THREE.Mesh passamos a geometria do nosso objeto, neste caso a geometriaSol e também o material do objeto, neste caso materialSol.
Por fim adicionamos o nosso sol a cena utilizando cena.add(sol).
Terra
O código para criar a Terra é parecido com o do sol, onde há apenas a adição da chamada para a função terra.translateZ(50) que move a Terra em 50px no eixo z.
Lua
O código da lua é muito parecido com o da Terra, onde mudamos apenas o tamanho da geometria e a translação no eixo z.
Com isso, terminamos a parte inicial do projeto e a proposta para este tutorial. Nos próximos tutoriais (provavelmente 2) veremos como animar a cena e adicionar luz. Abaixo segue o código final e posteriormente algumas modificações.
Grafo de cena
Apenas antes de realmente terminarmos esta primeira parte, vamos construir uma estrutura que se chama grafo de cena. Esta estrutura nos permite criar um objeto como filho de outro objeto (estilo DOM) e acaba facilitando a aplicação de transformações geométricas.
A ideia do grafo de cena está em adicionar a lua como “filha” da Terra (terra.add(objeto)) e a Terra como “filha” do sol (sol.add(objeto)). Quando começarmos com a animação, veremos como essa estrutura é importante. No momento, podemos perceber que anteriormente, tínhamos transladado a lua em 60px, no último exemplo, apenas transladamos em 10px.
Enfim, é isso para este post pessoal 🙂
Espero que tenham gostado e logo nos vemos novamente por aqui.
Abraços 😀
Júlio César Batista 
Olá,
Também sou estudante de Ciência da Computação e achei bem maneiro o tutorial fiz essa primeira parte mas pena que parou no momento que eu tinha maior interesse, que é na hora de fazer os astros girarem entorno de suas próprias órbitas e envolta de seus respectivos astros pais.
Tentei fazer eu mesmo vendo um pouco do tutorial do Three JS mas só consegui fazer a terra girar envolta do sol.
Olá Felipe.
Legal que você gostou. Resolvi separar em três partes para não ficar muito extenso e poder focar em determinados assuntos. Nesta semana devo publicar a parte das animações e na próxima semana a iluminação e textura 😀