Criar visuais 3D interativos com três.js

Este tutorial WebGL demonstra como criar uma simulação ambiental 3D que mostra o que acontece com o mundo como os níveis de CO2 mudam. (Você pode ver mais Experimentos webgl. aqui.)

O usuário controla os níveis usando um controle deslizante de intervalo de entrada HTML. Como o usuário adiciona mais CO2, mais Smog aparecerão na cena, os níveis de água aumentarão quando o aumento da temperatura derrete mais bonés polares, então as árvores desaparecerão à medida que sejam imersas na água.

Os elementos são animados dentro e fora usando uma biblioteca de Tween e arrastando o controle deslizante na direção oposta inverterá os efeitos. Se apenas fosse tão fácil na vida real!

01. Exibir elementos.

Para iniciar o projeto, abra a pasta 'Iniciar' no seu código IDE. Abra index.html. E você vai ver que há uma página básica de andaime com algum código já. Na seção do corpo, adicione os elementos de exibição aqui que serão usados ​​como a interface para o conteúdo 3D.

 & lt; div id = "cabeçalho" & gt;
  & lt; img src = "img / co2.png" id = "crachá" & gt;
  & lt; / div & gt;
  & lt; div id = "interior" & gt;
  & lt; slide class = "slide" tipo = "intervalo" min = "0" max = "7" passo = "1" valor = "0" oninput = "showval (this.value)" & gt;
  & lt; p & gt; arraste o controle deslizante para alterar o nível de CO2 & LT; / P & GT;
  & lt; / div & gt; 

02. Vinculando as bibliotecas

O conteúdo 3D está sendo exibido através de três.js, que está incluído aqui. Um modelo de colada será adicionado à cena mais tarde. A biblioteca extra para carregar isso é incluída, junto com uma biblioteca básica de Tween. As próximas linhas estão ligam para postar efeitos de processamento que adicionarão o polimento de acabamento.

 & lt; script src = "js / three.min.js" & gt; & lt; / script & gt;
& lt; script src = "js / colladaloader.js" & gt; & lt; / script & gt;
& lt; script src = "js / theen.min.js" & gt; & lt; / script & gt;
& lt; script src = 'js / postprocessing / effectcompositive.js' & gt; & lt; / script & gt;
& lt; script src = 'js / postprocessing / renderpass.js' & gt; & lt; / script & gt;
& lt; script src = 'js / postprocessing / shaderpass.js' & gt; / lt; / script & gt;
& lt; script src = 'js / postprocessing / maskPass.js' & gt; & lt; / script & gt; 

03. Post processando shaders

Depois que a cena tiver recebido cada quadro, vários efeitos postais serão adicionados. Estas são as bibliotecas que capacitam o efeito de grão de filme, um desfoque de deslocamento de inclinação na parte superior e inferior da tela, finalmente uma vinheta para desvanecer-se às bordas da tela.

04. Adicionando as variáveis

Alguns do código foram concluídos para você. Você verá um comentário onde adicionar o resto do código do tutorial. Várias variáveis ​​são usadas nesta cena 3D, que cuidam da resolução da tela, vários modelos 3D e pós-processamento. Duas variáveis ​​importantes são a Waterht. para a altura da água e o Lastval. , que lembra a última posição do controle deslizante.

 var screen_width = window.ingwidth, screen_height = window.Innerheight,
 mousex = 0, mousey = 0, windowhalfx = window.ingwidth / 2, windowhalfy = janela.Innerheight / 2, câmera, cena, renderer, água, waterht = 1;
var textureloader = novo três.Textureloader ();
var compositor, sombrear = 0, filmpass, renderpass, copypass, effectvignette, grupo, lastval = 0; 

05. Inicializando a cena

A função Init é uma grande parte do código, garantindo que a cena seja configurada com a aparência certa no começo. Um recipiente é adicionado à página, e é aí que a cena 3D será exibida. Uma câmera é adicionada e algumas névoa de fundo para desvanecer a distância.

 Função Init () {
  var contêiner = document.createelement ('div');
  documento.body.appendchild (contêiner);
  câmera = New Three.PersPectivecamera (75, Screen_Width / Screen_Height, 1, 10000);
  câmera.Position.set (2000, 100, 0);
  cena = nova três.scene ();
  cena.fog = novo três.fogexp2 (0xB6D9E6, 0,0025);
  renderer = novo três.Webglrenderer ({
  Antialias: True.
  }); 

06. Configurando o renderizador

O renderizador é dado uma cor de fundo e a resolução é definida para o mesmo tamanho que o rácio de pixel da tela. As sombras estão ativadas na cena e são colocadas na página no elemento do contêiner. Uma luz do hemisfério é adicionada, que tem um céu e cor do solo.

renderer.setclearColor (0xadc9d4);
renderer.setpixelratio (janela.devicepixelratio);
renderer.setsize (Screen_Width, Screen_Height);
renderer.shadowmap.enabled = true;
renderer.shadowmap.type = três.pcfsoftshadowmap;
contêiner.AppendChild (renderer.domelement);
var leve = novo três.hemispherelight (0xA1E2F5, 0x6f4d25, 0,5);
cena.add (luz); 

07. Variáveis ​​Shader.

As variáveis ​​que controlarão os efeitos do pós-processo do shader receberão seus valores aqui. Essas variáveis ​​serão usadas mais tarde para adicionar valores que controlarão a aparência. Se você olhar na função de parâmetros, você verá isso já concluído para você.

 renderpass = novo três.RenderPass (cena, câmera);
hblur = novo três.Shaderpass (três.Horizontaltiltshiftshader);
vblur = novo três.ShaderPass (três.VerticalTiltshiftshader);
Filmpass = New Three.ShaderPass (Three.Filmshader);
efetivação = novo três.ShaderPass (três.vignetteshader);
Copypass = novo três.ShaderPass (três.copyshader); 

08. Compondo os efeitos

Os efeitos devem ser empilhados em algo chamado compositor de efeitos. Isso leva cada efeito e aplica o estilo a ele. Em seguida, tudo é exibido como uma cena final na tela, que você verá quando a função Render é adicionada posteriormente.

09. Carregando a imagem da nuvem

O params. A função é chamada e isso define os parâmetros individuais para os efeitos postais. Um novo grupo é criado e isso manterá todo o conteúdo da cena dentro dele, para facilitar a girar o grupo de objetos. Uma imagem PNG transparente é carregada como um material de nuvem a ser usado como um sprite dentro da cena.

 params ();
  grupo = novo três.Group ();
  cena.add (grupo);
  var nuvem = textureoader.load ("img / cloud.png");
  material = novo três.spritematerial ({
  Mapa: nuvem, opacidade: 0,6, cor: 0x888888, nevoeiro: verdadeiro
}); 

10. Duplo para loop

Oito grupos são criados dentro do primeiro pra ciclo. Esses oito grupos recebem 35 nuvens adicionadas a eles no segundo para loop. Cada nuvem é colocada em um local aleatório acima da cena. Os grupos serão ligados e desligados com o controle deslizante pelo usuário para mostrar a Smog sendo adicionada e removida na visualização.

 para (j = 0; j & lt; 8; j ++) {
  var g = novo três.group ();
  para (i = 0; i & lt; 35; i ++) {
  var x = 400 * math.random () - 200;
  var y = 60 * math.random () + 60;
  var z = 400 * math.random () - 200;
  sprite = novo três.sprite (material);
  Sprite.Position.set (x, y, z); 

11. dimensionando a nuvem

A nuvem é dimensionada até um tamanho que permite que seja visível na cena. Cada grupo de nuvens após o primeiro grupo é reduzido para que eles sejam praticamente invisíveis para o renderizador. É assim que eles serão visíveis mais tarde, reduzindo-os de volta ao tamanho total, pois isso dará um bom efeito de tweening.

12. Carregando o modelo

Agora o carregador colada está definido para carregar o cena.dae. modelo. Quando termina o carregamento, o modelo é digitalizado e qualquer objeto que é uma malha é feita para lançar sombras e receber sombras para dar uma profundidade extra para a cena.

 var carregador = novo três.colladaloader ();
loader.options.convertupaxis = true;
carregador.load ('cena.dae', função (colada) {
  var dae = colada.scene;
  dae.travinar (função (criança) {
  se (criança instance de três.mesh) {
  criança.Castshadow = verdadeiro;
  Child.receiveShadow = true;
  }
}); 

13. Encontrar especificidades na cena

À medida que o modelo está pronto para exibição, é definido para o tamanho certo para caber a cena. O código precisa controlar especificamente a altura da água para que o modelo de água seja encontrado na cena e passe na variável global. Da mesma forma, a luz principal precisa ser encontrada para que possa ser definida para projetar sombras.

 dae.scale.x = dae.scale.y = dae.scale.z = 0,5;
dae.updatematrix ();
grupo.add (dae);
água = cena.getobjectbyName ("água", true);
água = água.Children 
;
luz = cena.getobjectbyName ("SPLIGHT", TRUE);
Light = Light.Children 
; 

14. Configurações de luz

Agora, como o holofote é encontrado, os especificidades que fazem lançar sombras na cena são configurados. O desvanecimento da luz nas bordas do local também é definido aqui. Finalmente, como o modelo é o maior elemento para carregar, o restante da cena será configurado antes que este código seja executado, portanto, a função Renderização pode ser chamada de cada quadro.

 light.Target.Position.set (0, 0, 0);
  light.castshadow = verdadeiro;
   Light.Shadow = New Três.LightsHadow (Novo Three.perspectivecamera (90, 1, 90, 5000));
  light.shadow.bias = 0,0008;
  light.shadow.mapsize.Width = 1024;
  light.shadow.mapsize.Height = 1024;
  light.penumbra = 1;
  light.decay = 5;
  render ();
}); 

15. Último código de inicialização

A parte final da função de inicialização define vários mouse e insumos de toque que moverão a câmera com base em sua posição. Um evento também é registrado para ouvir se a tela for redimensionada e isso atualizará a exibição renderizada.

 Documento.AddeventListener ('MouseMove', OnDocumentMousemove, Falso);
  document.addeventlistener ('touchstart', ondocumenttouchstart, falso);
  document.addeventlistener ('TouchMove', OnDocumentTouchMove, Falso);
  janela.addeventlistener ('redimensionar', onwindowsize, falso);
} 

16. Renderring cada quadro

A função Render é definida para ser chamada de perto de 60 quadros por segundo, já que o navegador pode gerenciar. O grupo, que contém todos os modelos, é definido para girar por uma pequena quantidade de cada quadro. A posição da câmera é atualizada do mouse ou na entrada de toque e continua a olhar para o centro da cena.

17. Atualizando a exibição

O tempo de sombreamento é uma variável que só sobe 0,1 cada quadro e isso é passado para o Filmpass. de modo que o grão cinematográfico pode ser atualizado. O compositor de efeitos é atualizado e renderizado na tela. Finalmente, o Tween Engine também é atualizado.

 shoutertime + = 0,1;
  filmpass.uniforms ['Hora']. Valor = Shadertime;
  compositor.render (0,1);
  Tween.update ();
} 

18. Obtendo a entrada do usuário

O controle deslizante do intervalo de entrada, adicionado na etapa 1, chama o showval. função, que é definida aqui. Quando o usuário clica sobre isso, basta verificar se o controle deslizante foi movido. Se estiver subido, o próximo grupo de nuvens é dimensionado com um Tween mais de 0,8 segundos. A altura da água é atualizada e isso também é entre a nova altura.

 Função ShowVal (Val) {
  if (val! = lastval) {
  if (val e gt; lastval) {
  New Tween.Tween (Grupo.Children [Val] .Scale). para ({x: 1, y: 1, z: 1}, 800) ..asing (tween.asing.Quadratic.inout).
  Waterht + = 0,07;
  New Tween.Tween (Water.scale). Para ({Y: Waterht}, 800). Easia (tween.asing.Quadratic.inout). '); 

19. agarrando as árvores

A variável temporária encontra o grupo atual de árvores que deve eliminar da cena e aqui os escala com apenas um entre o eixo y. Uma facilitação elástica é usada para que essas molas fora de vista na tela para um efeito agradável. Como mais água e nuvens estão em cena, as árvores desaparecem.

20. Entrada oposta.

O primeiro conteúdo verificado se o controle deslizante foi deslizado para cima ou para a direita. Agora o código detecta o usuário deslizando para a esquerda. As nuvens são dimensionadas com um tween e assim é o nível da água para mostrar um efeito de resfriamento na terra.

 Novo Tween.Entween [Lastval] .Scale). Para ({x: 0,001, y: 0,001, z: 0,001}, 800). Descubra (tween.asing.Quadratic.inout). );
Waterht - = 0,07;
New Tween.Tween (Water.scale). Para ({Y: Waterht}, 800). Easia (tween.asing.Quadratic.inout). '); 

21. Terminando

O passo final é trazer as árvores de volta, então eles são dimensionados de volta ao tamanho original com um elástico entre. Salve a cena e visualize a página da Web de um servidor hospedado localmente em seu próprio computador ou em um servidor da Web. Você será capaz de interagir com o movimento do mouse e o controle deslizante para alterar a exibição da cena.

Este artigo originalmente apareceu em Web designer edição 265. Compre aqui .

Artigos relacionados:

• Como codificar um marcador de realidade aumentada
• 20 exemplos incríveis de webgl em ação
• 9 usos brilhantes do 3D no web design