Criar uma página de pouso 3D WebGL

Criar uma página de pouso 3D WebGL é uma maneira de dar uma grande primeira impressão com seu público. Com WebGL, você pode entregar conteúdo visual de alta qualidade no navegador. Você pode fazer isso sem plugins ou quaisquer requisitos especiais. Todos os navegadores modernos suportam Webgl, juntamente com dispositivos móveis e tablets. WebGl permite criar cenas 3d incríveis. Pode alimentar experiências WebVR, manipular vídeo, renderizar sombreadores de gráficos e muito mais.

Neste tutorial, você estará fazendo uma página de destino para o estúdio de cinema fictício, estúdios relativos. O conceito é dramático e visualmente envolvente, como um objeto misterioso reflete e gira em resposta à interação do mouse. Partículas whiz em torno dele, mudando de cor enquanto se movem. Você vai trabalhar em cada uma das etapas para criar esta página interativa, permitindo que você gere seus próprios projetos (para mais inspiração, consulte nossa postagem no melhor Páginas de destino ).

Você usará apenas os recursos incluídos de três.js, a poderosa biblioteca de renderização em 3D para a Web. Você pode usar suas próprias imagens como texturas para torná-lo único. Você também aprenderá sobre a utilização de malhas, iluminação e texturas para melhorar detalhes da superfície, como usar mapas ambientais e como adicionar camadas para profundidade e juros.

Deve haver mais do que suficiente para começar, e muito a abastecer seus próximos projetos.

Antes que você comece, Baixe os arquivos para este tutorial .

01. Configuração básica de HTML

Para começar, você precisa de algum lugar para ver sua cena 3D. Configure um arquivo HTML básico e inclua um link para três.js. Isso pode ser hospedado externamente ou adicionado a partir do Repositório de três.js aqui: . Adicione alguns css simples para tornar a página em tela cheia e remover todas as barras de rolagem. Salve seu arquivo para o seu site local, para que você possa servir o HTML quando estiver pronto para testar. Adicione o seguinte código a começar.

 ​​& lt;! Doctype html & gt;
& lt; html & gt;
& lt; head & gt;
& lt; title & gt; estúdios relativos & lt; / title & gt;
& lt; script src = "libs / three.min.js" & gt; & lt; / script & gt;
& lt; estilo & gt;
HTML, corpo {margem: 0; preenchimento: 0; estouro: oculto; }
& lt; / style & gt;
& lt; / head & gt;
& lt; corpo e gt;
& lt; script & gt;
// código 3d vai aqui
& lt; / script & gt;
& lt; / corpo & gt;
& lt; / html & gt; 

02. Adicionar variantes globais

Você precisará de algumas variáveis ​​para referências durante o restante do código. Defina aqueles agora. Isso incluirá uma matriz para segurar as partículas, uma variável 't' para o seu tetra -edro, mouse, raycaster e luzes.

Dentro das tags de script, comece adicionando o seguinte código.

 // vars
var num = 30;
var objetos = [];
var raycaster = novo três.raycaster ();
var mouse = novo três.Vector2 ();
var leve, t; 

03. Adicione uma cena, câmera e renderização

Precisamos primeiro adicionar uma cena que conterá todos os nossos objetos. Em seguida, adicionamos uma câmera que pode se mover dentro dela, parando, inclinando e se movendo como precisamos. O primeiro atributo é o campo de visão. O segundo é a proporção. Você também pode definir os planos de recorte próximos e distantes no terceiro e quarto atributos. Por último, adicione o renderizador, que lida com a cena para a tela.

Na tag de script, adicione o seguinte código.

 // criar câmera
Var câmera = New Three.persPectivecamera
(65, janela.ingwidth / window.Innerheight,
0,1, 1000);
câmera.Position.set (0,0,0,0,5);
// crie uma cena
varena var = nova três.scene ();

// criar renderizador.
var renderer = novo três.Webglrenderer (
{Antialias: True});
renderer.setsize (janela.ingwidth, janela.
innerheight);
document.body.appendchild (renderer.domelement.
);

04. Adicione um holofote

Em seguida, você precisa adicionar uma luz à cena. Três.js vem com uma variedade de luzes, incluindo pontos, direcionais, ambientais e holofotes. Use um holofote para isso. Ele lhe dará posição e propriedades direcionais e permitir que você langue sombras se desejar mais tarde.

Adicione o seguinte código ao lado de adicionar o centro das atenções.

 // criam uma luz do ponto
luz = nova três.Spotlight (0xcddff ,,8);
Light.Position.set (0,0,5);
cena.add (luz); 

05. Adicione um loop de animação

Um loop de animação, às vezes chamado de "loop de renderização", é chamado idealmente 60 vezes por segundo. O filme é executado em 24 quadros por segundo (FPS) e isso é rápido o suficiente para enganar o olho para ver um movimento constante sem interrupção. Na animação de computador, pretendemos pelo menos 30 fps, mas idealmente 60fps. Isso garante um desempenho visual muito suave, mesmo que os quadros forem descartados periodicamente.

Nós ligamos este loop de animação à função Requestanimationframe, o que faz duas coisas. Primeiro, garante que o navegador esteja pronto para renderizar o próximo quadro. Isso também significa que as animações podem pausar a renderização quando o usuário não está mais visualizando essa guia do navegador,

Adicione este código para tornar a cena em um loop de animação:

 var animate = function () {
RequistanimationFrame (animate);
renderer.render (cena, câmera);
};

// iniciar loop de animação
animar (); 

06. Carregue uma textura do solo

Em seguida, você criará um terreno para a cena. Para começar, você precisa carregar uma imagem para usar. Texturas para coisas como as superfícies terrestres e de parede podem ser criadas tirando suas próprias fotos e cortando cuidadosamente as bordas de ajuste em Photoshop cc. . Apenas certifique-se de que eles possam apertar bem. Para começar rapidamente, há ótimas bibliotecas online, veja o nosso melhor em Texturas grátis .

Você pode escolher qualquer coisa que tenha telha. Isso significa que as bordas se misturariam perfeitamente se você os colocasse lado a lado. Você pode selecionar algo como telhas ou pedra para isso. Observe que você usa as opções de envoltório de textura para repetir o embrulho para isso. Este exemplo usa repetição de 12x12. Ajuste isso para se adequar à sua imagem depois de testar a cena.

 // carregam uma textura do solo
var textura = novos três.Textureloader ().
carga ("ativos / stone.jpg");
texture.wraps = texture.wRapt = Três.
Repetição;
textura.repeat.set (12,12);

07. Crie um material de solo

Three.js inclui uma variedade de tipos de materiais para você usar. Os materiais são pensados ​​como a pele que cobre um objeto 3D. Você pode usar materiais básicos que não reagem a materiais de sombreamento de luz ou Phong ou Lambert que fazem. Você pode usar seus próprios materiais shader personalizados também. Para este solo, use um material físico. Tem um olhar muito realista, reagindo a luz muito bem. Use a textura carregada como o mapa difuso, e também como um BumpMap se você não tiver uma textura específica para isso.

 // criar material de solo
material = novo três.meshhysicalmaterial ({Mapa: Textura, BumpMap: Texture}); 

08. Crie uma malha de terra

Quando combinamos o material (pele) com a geometria que define a forma do objeto 3D, criamos uma malha. Para o chão, você precisa de um plano simples. O sombreador e a textura do material criarão a ilusão de detalhes complexos de superfície.

Adicione o código a seguir para criar sua malha de solo, gire para um ângulo agradável e posicione-o abaixo da câmera. Certifique-se de executar seu código depois disso para ver como ele se parece. Ajuste qualquer código que você precise discar.

 // Criar malha do solo
var geometria = novo três.planebuffergeometry
(100.100);
var terra = nova três.mesh (geometria,
material);
Ground.rotation.z = math.pi / 180 * -45;
Ground.rotation.x = math.pi / 180 * -90;
Ground.Position.y = -2,0;
cena.add (terra); 

09. Carregue um objetivo

Em seguida, você adicionará um objeto 3D central para juros focais. Esta é a estrela da sua cena, então escolha uma textura que você gosta de cobri. Nota: Você fará este objeto altamente reflexivo, então a textura que você carrega aqui é uma aparência mais sutil do solo.

 // Carregue a textura do objeto
var textura = novos três.Textureloader ().
carga ("ativos / rock_01_diffusion.jpg"); 

10. Crie um mapa de ambiente

Em seguida, crie um ambiente em torno de seu objeto que seja refletido em sua superfície. Você também pode adicionar isso à cena como a cena.Background propriedade, se desejar. Para carregar um ambiente, você usa um cubetexureloader. As imagens que você usam devem ser seis imagens que a pele dentro do seu cubo para formar uma imagem perfeita, chamada Mapas de cubo.

 Var ENVMAP = NOVO TRÊS.CUBETEXTEXURPROOADER ()
.setpath ('ativos /')
cardear (['px.jpg', 'nx.jpg', 'py.jpg', 'NY.
jpg ',' pz.jpg ',' nz.jpg ']); 

11. Adicione Tetrahedon.

Três.js vem com muitas geometrias padrão que você pode usar para suas cenas. Um dos mais frios é o tetraedro. É preciso um parâmetro de raio e "detalhes" para definir o número de rostos do objeto.

Adicione um à sua cena, com o seguinte código.

 // cria tetrahedron
var geometria = novos três.
Tetrahedronbuffergeometry (2,0);
Var material = novo três.meshhysicalmaterial
({Mapa: Textura, Envmap: Envmap,
Metalness: 1.0, rugosidade: 0.0});
t = novo três.mesh (geometria, material);
t.rotation.x = math.pi / 180 * -10;
cena.add (t);

12. Adicione a rotação e o alvo da câmera

Para garantir que a câmera esteja sempre olhando para o seu objeto principal, você usa a função Camera.Lookat. Você também pode adicionar uma rotação ambiente ao seu objeto também.

Atualize seu código de função animado para se parecer com isso.

 RequestanimationFrame (animate);
t.rotation.y - = 0,005;
câmera.Lookat (T.Position);
renderer.render (cena, câmera); 

13. Adicionar loop de partículas

Em seguida, adicione algumas partículas ambientais à cena. Estes irão misturar bem com o loop de vídeo em primeiro plano que você adicionará mais tarde, além de ser interativo. Adicione um simples "para 'loop para segurar o código que você usará para criar várias partículas.

 para (i = 0; i & lt; = num; i ++) {
// código de partícula irá aqui
} 

14. Criar malha de partículas

A primeira coisa a fazer é criar o objeto de partícula. Você poderia fazer isso com esferas, sprites ou qualquer objeto que desejar. Por enquanto, tente torná-los simples esferas.

Dentro do seu loop para adicionar o seguinte código.

 // criam nova malha
var geometria = novos três.Spherebuffergeometry (0,1,6,6);
Var Material = Novo Three.MeshphysicalMaterial ({ENVMAP: ENVMAP, METALNESS: 1.0});
var partícula = novo três.mesh (geometria, material);

15. Definir posição aleatória e distância

As partículas irão orbitar o objeto central e devem ser posicionadas aleatoriamente para preencher o espaço bem e têm uma aparência orgânica. Adicione o código a seguir para definir uma posição irregular e, em seguida, atribuir uma distância constante para cada partícula.

 // Definir posição aleatória
particle.Position.set (math.random () * 100.0 -
50.0.0,0.0, math.random () * - 10.0);
// Calc distnace como constante e atribuir
para objetar
var A = novo três.Vector3 (0, 0, 0);
var b = partícula.Posição;
var d = a.distanceto (b);
partícula.Distance = D;

16. Configurar ângulos para órbitas

Para fazer animar as órbitas mais rapidamente, adicione as constantes ângulos para as órbitas e armazene-as como propriedade da partícula. Adicione o seguinte código para definir esses ângulos de conteúdo aleatórios.

 // Defina 2 ângulos aleatórios, mas constantes
em radianos
partícula.Radians = mathandom () * 360 * matemática.
Pi / 180; // ângulo inicial
partícula.Radians2 = math.random () * 360 * matemática.
Pi / 180; // ângulo inicial

17. Adicione partículas a cena e coleção

Por fim, adicione a partícula à cena e ao array de objetos que você definiu mais cedo. Isso tornará as partículas fáceis de todas as partículas mais tarde.

 // Adicionar objeto à cena
cena.add (partícula);
// Adicionar a coleção
objetos.push (partícula);

18. Adicione animação a partículas

Em seguida, você precisa atualizar a posição e a rotação dos objetos de partículas. Estas órbita a uma distância constante do centro da cena. Adicione o seguinte código à sua função animada.

 para (i = 0; i & lt; = num; i ++) {
var o = objetos [i];
o.rotation.y + = 01;
if (i% 2 == 0) {
O.Radians + =. 005; O.Radians2 + =. 005;
} outro {
O.Radians - =. 005; O.Radians2 - =. 005;
}
o.Position.x = (math.co (O.Radians) *
O.Distance);
O.POSITION.Z = (Math.Sin (O.Radians) *
O.Distance);
o.Position.y = (math.sin (O.Radians2) *
O.Distance * .5);
}

19. Adicione um título

Em seguida, adicione um título no centro da tela - um nome para apresentar sua marca. O espaçamento de letras para títulos dá uma ótima aparência cinematográfica. Use qualquer fonte / estilo que você gosta, mas veja as referências do título de filme para inspiração. Veja nossa lista de fontes grátis para uma lista de nossas fontes para download favoritas.

Primeiro adicione o elemento DOM para o seu título. Adicione isso após as tags do script antes da tag do corpo de fechamento.

 & lt; h1 & gt; estúdios relativos & lt; / h1 & gt;

Adicione os seguintes estilos para o seu título às suas tags de estilo na parte superior do arquivo.

H1 {cor: branco; Posição: Absoluto; Topo: 50%;
Z-index: 100; Largura: 100%; Alinhamento de texto: centro;
Transformar: Traduzir (0, -100%); família de fontes:
'Raleway', sans-serif; Peso de fonte: 100;
espaçamento de letras: 40px; Transformação de texto:
maiúsculas; Tamanho da fonte: 16px; }

20. Adicione um loop de vídeo

Um bom truque para criar profundidade para o seu pouso é adicionar um pequeno loop de vídeo. Você pode usar fumaça, poeira ou partículas. Estes são amplamente disponíveis on-line ou parte de um grande número de pacotes de vídeo e filmagem. Adicione a seguinte tag de vídeo após a sua tag H1. Note que você deseja configurá-lo para 'silenciado' e autoplay. Isso também permitirá que o vídeo jogue em dispositivos móveis tão online.

 ​​& lt; video id = "videObacker" loop src = "ativos /
Snow.mp4 "AutoPlay Mused & GT; & lt; / vídeo & gt;

Para colocar o vídeo, adicione o seguinte CSS aos seus estilos na cabeça da sua página.

 ​​#VideObacker {tamanho-tamanho: capa;
objeto de ajuste: capa; Z-index: 9; opacidade: .3;
Posição: Absoluto; Top: 0px; Esquerda: 0px;
Largura: 100VW; Altura: 100vh; Transição: 1s.
Opacidade facilidade-in-out;

21. Adicionar carta-boxe

Para realmente dar a sua página de destino um estilo cinematográfico, adicione algumas caixas de letras à página.

Comece adicionando os elementos div para isso.

 ​​& lt; div classe = 'bar-top' & gt; & lt; / div & gt;
& lt; div class = 'bar-bottom' & gt; & lt; / div & gt;

Em seguida, atualize seus estilos para adicionar estilos para essas duas barras pretas. Você pode ajustar esses estilos ao seu gosto e necessidades também.

 ​​.bar-top {background-cor: preto;
Altura: 100px; Posição: Absoluto; top: 0;
Esquerda: 0; Z-Index: 100; Largura: 100VW;}
.bar-bottom {background-cor: preto;
Altura: 100px; Posição: Absoluto; fundo: 0;
Esquerda: 0; Z-index: 100; Largura: 100VW;} 

Este artigo originalmente apareceu na edição 287 do Web Designer. Compre a edição 287. ou Inscreva-se aqui .

Consulte Mais informação:

• Componentes da Web: O Guia Ultimate
• Como criar um efeito de paralaxe em camadas
• Como adicionar animação ao SVG via CSS