Comece com WebGL usando três.js

Sep 10, 2025

Como

Web developer creating 3D shape graphics

Webgl. , que é amplamente suportado em todos os navegadores modernos, permite que você trabalhe com gráficos 3D acelerados por hardware em Javascript. abrindo uma enorme gama de possibilidades para aplicativos e jogos baseados em navegador - basta verificar estes 20 exemplos incríveis de webgl em ação , para a prova.

Baixe o código do arquivoilo

Webgl em si é bastante baixo, e é improvável que você queira trabalhar com ele em sua forma de baunilha. Há uma gama de bibliotecas e até mesmo motores de jogos disponíveis para fornecer funcionalidade de nível superior.

Neste tutorial eu vou te mostrar Como fazer um aplicativo ou site que usa webgl em combinação com três.js. , que é uma biblioteca livre de código aberto que fornece a abstração do webgl.

01. Get Three.Js.

Você precisará começar por se apossar três.js. . Depois de ter a construção mais recente, coloque três.js em sua pasta de projeto. Em seguida, adicioná-lo como um script à nossa página como qualquer outra biblioteca JavaScript. Vamos colocar nosso próprio código em um arquivo JavaScript separado.

 & lt;! Doctype html & gt;
& lt; html & gt;
  & lt; head & gt;
  & lt; Meta Charset = UTF-8 & GT;
  & lt; title & gt; começando com três.js & lt; / title & gt;
  & lt; / head & gt;
  & lt; estilo corporal = "margem: 0;" & gt;
  & lt; script src = "three.js" & gt; & lt; / script & gt;
  & lt; script src = "demo.js" & gt; & lt; / script & gt;
  & lt; / corpo & gt;
& lt; / html & gt;

02. Defina a cena

Precisamos de três coisas para começar com Webgl: uma cena, uma câmera e um renderizador. Uma cena é onde colocamos objetos a serem exibidos por três.js. Uma câmera é o ponto de vista do qual os veremos. O renderizador traz os dois juntos e atrai a tela de acordo. Quando tivermos essas configuradas, adicionamos o renderizador ao documento.

 var largura = janela.innerwidth;
var altura = janela.innerheight;
var viewangle = 45;
var descubra = 0,1;
var farclipping = 9999;
varena var = nova três.scene ();
Var câmera = New Three.Perspectivecamera (Viewangle, Largura / Altura, Nearclipping, Farclipping);
var renderer = novo três.webglrenderer ();
renderer.setsize (largura, altura);
documento.body.appendchild (renderer.domelement);

03. Crie um loop

Em seguida, precisamos criar um loop para realmente tornar nossa cena. Nós fazemos isso usando o renderer.render () função, mas a parte principal é usar recursivamente RequestanimationFrame () , que é uma função interna que permite que o navegador solicite outro quadro quando estiver pronto para desenhar um. Usando RequestanimationFrame () é mais fácil e resulta em animação mais suave do que tentar tempo de desenho de quadros você mesmo.

 Função Animate () {
  RequistanimationFrame (animate);
  renderer.render (cena, câmera);
}
animar ();

04. Crie objetos básicos

Agora podemos começar a adicionar alguns objetos à nossa cena. Podemos fazer isso criando objetos de malha e adicioná-los a ele. Uma malha é composta de geometria (a forma do objeto) e um material (a cor ou textura usada para pintá-lo). Criaremos alguns objetos básicos definindo três geometrias diferentes e atribuindo materiais de cor diferentes a eles.

 Var Cubeometry = New Three.boxgometry (1, 1, 1);
varimaterial = novo três.meshlambertmaterial ({cor: 0xff0000});
var cubo = novo três.mesh (cubegometria, cubematerial);
var Coneeometry = novos três.Conegeometria (0,5, 1, 4);
var conematerial = novo três.meshlambertmaterial ({cor: 0x00ff00});
var cone = novo três.mesh (coneometria, conemerial);
var sparkeometry = novo três.sphereometry (0,5, 8, 8);
var esfirematerial = novo três.meshlambertmaterial ({cor: 0x0000ff});
Var Esfera = New Three.Mesh (SphereGometry, Spherematerial);

05. Especifique uma posição

Por padrão, os objetos são adicionados na origem (x = 0, y = 0, z = 0) da cena, que também é onde nossa câmera é, portanto, precisaremos especificar uma posição para eles também. Estamos então prontos para adicionar as malhas à nossa cena, o que significará que eles são automaticamente renderizados no animar() ciclo.

 cube.position.x = -2
cubo.position.z = -5;
cone.position.z = -5;
esfera.Position.z = -5;
esfera.Position.x = 2;
cubo.position.z = -5;
cena.add (cubo);
cena.add (cone);
cena.add (esfera);

06. Adicione uma fonte de luz

Se você visualizar sua página agora, você encontrará as coisas que estão parecendo um pouco plana. Não há iluminação aplicada aos objetos, então eles são cores primárias sólidas e parecem bidimensionais. Para consertar isso, precisamos mudar de MASHBASICMaterial. para um material que suporta a iluminação; Nós vamos usar Meshlambertmaterial . Também precisamos adicionar uma fonte de luz para a cena.

 Var Light = New Three.Pointlight (0xfffff);
light.position.x = 0;
Light.Position.y = 10;
light.position.z = 0;
cena.add (luz);

07. Mova a fonte

Agora estamos chegando lá! Você deve ver quais são os objetos tridimensionais bastante evidentes na sua página. O que ainda não fizemos é aproveitado ao máximo animar() função. Vamos fazer algumas alterações para ter nossa fonte de luz se movimentar em um movimento circular acima dos objetos.

 Var Lightangle = 0;
função animate () {
  Lightangle + = 5;
  if (Lightangle & GT; 360) {Lightle = 0;};
  Light.Position.x = 5 * math.co (Lightangle * math.pi / 180);
  light.position.z = 5 * math.sin (Lightangle * math.pi / 180);
  RequistanimationFrame (animate);
  renderer.render (cena, câmera); }

08. Adicione textura

Na prática, provavelmente não queremos que nossos objetos sejam cores planas. Seria mais típico aplicar algumas texturas para eles de um arquivo. Nós podemos fazer isso usando Três.Textureloader () . Vamos mudar como nosso objeto Cone é criado para utilizar uma textura que carregamos de um arquivo. A função é chamada quando o arquivo é carregado.

Onde encontrar texturas gratuitas para projetos 3D

 var textureloader = novo três.Textureloader ();
textureoader.load ("./ grama_texture.jpg", textura = & gt; {
  var Coneeometry = novos três.Conegeometria (0,5, 1, 4);
  var Conematerial = Novo Three.MeshlambertMaterial ({Mapa: Texture});
  var cone = novo três.mesh (coneometria, conemerial);
  cone.position.z = -5;
  cena.add (cone);
  },
);

09. torná-lo natural

As coisas estão parecendo melhores, mas algo ainda não é bastante natural. A textura parece muito plana e não responde à iluminação. Podemos resolver isso através do uso de mapeamento de colisão, que nos permite usar partes claras e escuras de uma imagem para simular texturização na superfície de um objeto. Vamos tentar isso com uma textura diferente na esfera. Vamos mudar o material para Meshphongmaterial , que nos permite especificar um mapa de relevo atributo.

 var textureloader = novo três.Textureloader ();
textureoader.load ("./ bump_map.jpg", textura = & gt; {
  var sparkeometry = novo três.sphereometry (0,5, 8, 8);
  var esfirematerial = novos três.meshphongmaterial ({cor: 0x0000ff, bumpmap: textura, bumpscale: 1.0});
  var esfera = nova três.mesh (esferaometria, esférica);
  esfera.Position.z = -5;
  esfera.Position.x = 2;
  cena.add (esfera);
  },
);

10. Adicione controles

Como um toque final, dê um pequeno controle sobre a cena. Para adicionar a capacidade de deslocar, há uma biblioteca extra que é enviada com três.js que torna incrivelmente fácil fazer exatamente isso. Certifique-se de extrair OrbitControls.js no pacote de três.js para o diretório do projeto e incluí-lo em sua página. Esta é uma das várias bibliotecas de controle que enviam com três.js para atender a estilos comuns de controle da câmera.

 & lt; script src = "orbitcontrols.js" & gt; & lt; / script & gt;

11. Aplique à câmera

Agora tudo o que precisamos fazer é criar um Três.orbitcontrols. objeto e aplicá-lo à nossa câmera. A biblioteca cuidará do resto para você: você não precisará ouvir por cliques, movimentos do mouse e assim por diante. Você também pode querer mover seus objetos de volta para o ponto de origem e compensar a câmera em vez disso, para que possa entrar nitidamente ao redor dos objetos.

Com isso, terminamos com a nossa introdução. Você deve ter três objetos com estilos variados de textura, uma iluminação dinâmica e uma câmera controlada pelo usuário para jogar.

 Camera.Position.z = 10;
Var Controls = novos três.orbitControls (câmera);

Este artigo destacou-se na edição 268 da Web Designer, a revista Creative Web Design - oferecendo tutoriais especializados, tendências de ponta e recursos livres. Inscreva-se no Web Designer agora.

Gostou disso? Tente esse:

Guia completo de um codificador para APIs
Como derreter um objeto 3D com três.js
Poder um blog usando a api wordpress

Comece com WebGL usando três.js

01. Get Three.Js.

02. Defina a cena

03. Crie um loop

04. Crie objetos básicos

05. Especifique uma posição

06. Adicione uma fonte de luz

07. Mova a fonte

08. Adicione textura

09. torná-lo natural

10. Adicione controles

11. Aplique à câmera

Como - Artigos mais populares

Adicionar filtros SVG com CSS

Prepare uma placa para pintura em 3 etapas fáceis

5 dicas para melhorar suas criações de VR

Como misturar uma paleta de guache

Como fazer texturas deliciosas com lápis

Como criar pano de cg realista

Faça um cartaz de um modelo no Photoshop

Como criar um personagem 3D estilizado para jogos

Categorias