Como derreter um objeto 3D com três.js

Sep 11, 2025

Como

A Web como sabemos, está constantemente mudando e evoluindo. O que ainda podemos lembrar como um meio simples e direto ganhou outra dimensão há alguns anos, e não parece que vai parar por lá também. Para Construtor de sites , O que foi uma vez que parte dos efeitos visuais do filme da ficção científica agora é possível em um tablet deitado no seu sofá, e há edifícios cobertos em instalações interativas em larga escala que são, na verdade, apenas apenas no Google Chrome Windows.

Siga os passos abaixo para descobrir como criar um efeito de fusão realista com três.js.

01. Configure a cena de três.js

Vá em frente e pegue a biblioteca de três.js e inclua-a em seu site. Você precisará instanciar a WebGlrenderer, a cena e a perspectivaCamera. Depois que estes são instanciados, você precisará prestar a cena Requiranimationframe. .

02. Adicione a iluminação à cena

Em seguida, as luzes precisam ser adicionadas à cena 3D. Neste exemplo, duas luzes serão usadas: uma luz ambiente e uma luz pontual. A luz ambiente serve como uma cor global global para a cena, enquanto a luz do ponto emitirá luz que diminui com a distância. Isso dará a cena algum contraste.

 Var ambientlight = novo três.amentlight (0xccccccc);
cena.add (ambientlight);
Var POINTLIGHT = New Três.Pointlight (0xfffff, 1);
Pointlight.Position.set (10, 5, 0);

03. Carregue o modelo 3D

Agora que a cena foi configurada, o modelo 3D precisa ser carregado. O modelo pode ser carregado usando qualquer formato suportado (JSON, OBJ, DAE, etc). Abaixo está um exemplo de carregamento de um modelo dae. Neste exemplo, é muito importante que o modelo tenha polígonos suficientes para realizar modificações do vértice.

O crânio de veados que está sendo usado neste exemplo tem 3.500 polys. Se a contagem de poli for muito baixa, as animações do vértice serão muito explícitas e distorcidas.

 carregador = novo três.Colladaloader ();
loader.load ('dae / deer_skull / deer_skull.dae', onloadcompletehandler);

04. Adicione um mapa de bump

Bump Maps são perfeitos para adicionar profundidade às suas texturas a um baixo custo. Depois de criar sua imagem de mapa de Bump, você pode implementá-la simplesmente aplicando-a ao material como abaixo. Além disso, você precisará ajustar a escala do seu mapa de Bump para caber na escala do seu modelo.

 material.bumpmap = 'img / deer_skull / cervo-bump.jpg';
material.bumpscale = 0,008;

05. Use o animador do vértice

Ao longo de seu site, Johnny utiliza uma extensão do jogo por Jerome Etienne para três.js que facilita as animações do vértice. Essa extensão permite fácil acesso a cada vértice de um modelo na taxa de quadros, tornando-a simples manipular vértices usando formas de onda.

O Extensão de animação de vértice está disponível pelo github de Etienne. Nós vamos mais longe em como é usado nos próximos passos.

Users can interact with the 3D model and view from multiple angles — Os usuários podem interagir com o modelo 3D e visão de vários ângulos

06. Comece a derretimento

Derreter uma peça de geometria envolve algumas etapas gerais. Primeiro, cada ponto é continuamente empurrado para baixo. Quando um ponto atinge o chão, é empurrado para fora usando o que chamaremos de "vector push".

Em seguida, daremos os pontos que se reúnem ao longo da espessura inferior, então a geometria derretida não é completamente plana. Para conseguir isso, Johnny fez um código portado da Skeel Lee's VFX Shader em Houdini e modificou-o.

07. Comece a mover os vértices para baixo

Abaixo está um exemplo de uso de usar o animador vértice para empurrar continuamente a geometria de um modelo em direção ao solo.

 Var Vertaxanimation = New Thestx.vertExanimation (geometria, função (origem, posição, delta, agora) {position.y - = Meltamount * Modelheight;}

Isso irá empurrar pontos para baixo na taxa definida pelo Meltamount. . Lembre-se de também ligar para "atualização" em sua animação de vértice no ciclo de renderização.

08. Determine o vetor de push

Quando um ponto atingiu o solo, ele precisa ser empurrado para fora para alcançar um efeito fundido. O código abaixo está determinando qual direção nos eixos X e Z para empurrar o vértice para que você obtenha um deslocamento uniforme. O condicional garante que apenas pontos que atingiram os limites mais baixos do modelo (o solo) são empurrados para fora.

if (posição.y & lt; bbox.min.y) {
  var centróide = bbox.max.clone (). Adicionar (bbox.min.clone ()). dividescalar (2.0);
pushvector = position.clone (). Sub (centróide);
pushvector.y = 0; }

09. Faça o derretimento se sentir natural

O código abaixo usa o ruído para criar aleatoriedade no movimento para que o derretimento se sente orgânico. As variáveis de ruído podem ser ajustadas para obter o efeito desejado. O ruído é então aplicado ao vetor de push junto com Meltamount. e spreadamount para controlar a taxa e o tamanho do pool derretido. Este vetor externo é finalmente calculado e depois aplicado ao próprio vértice.

 var n = noisamplitude * gerador.getval ((position.x) * noisefrequency + noiseffset);
var externaVector = pushvector.multiplyscalar ((((((Meltamount * spreadamount) + n) * parafusospedeed);
posição.add (outwardvector);

10. Dê a espessura da piscina derretida

O código explicado até agora alcançará o efeito fundido, mas duas coisas estão erradas com isso. Primeiro, a piscina se sentirá bastante plana, porque todos os pontos derreteram para a mesma posição Y. Em segundo lugar, como todos compartilham os mesmos y, muitos pontos serão empilhados na mesma altura, o que pode causar cintilação. Para evitar isso, uma espessura é aplicada na taxa de fundição:

 Position.y + = Meltamount * poolthickness;

11. Experimente outros modelos

Com o código acima, qualquer modelo com polígonos suficientes pode ser derretido. Baixe um arquivo zip fora do código aqui e troque o modelo com qualquer coisa que você gostaria. Divirta-se!

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

Artigos relacionados:

Crie visuais 3D interativos com três.js
As melhores ferramentas de cores para web designers
Cuidado com a borda de corte do web design

Como derreter um objeto 3D com três.js

01. Configure a cena de três.js

02. Adicione a iluminação à cena

03. Carregue o modelo 3D

04. Adicione um mapa de bump

05. Use o animador do vértice

06. Comece a derretimento

07. Comece a mover os vértices para baixo

08. Determine o vetor de push

09. Faça o derretimento se sentir natural

10. Dê a espessura da piscina derretida

11. Experimente outros modelos

Como - Artigos mais populares

Como remover rugas no Photoshop

Use o Chart.js para transformar os dados em diagramas interativos

Como placar um rosto para animação

Use WordPress como um CMS sem cabeça

Como dominar a anatomia da criatura

Como transmitir som em uma pintura

Pintar um retrato em óleos

Crie texturas tileable deslumbrantes no Blender

Categorias