Cómo derretir un objeto 3D con tres.js

Sep 11, 2025

Cómo

[dieciséis]

La web tal como la conocemos, está cambiando y evolucionando constantemente. Lo que todavía podemos recordar como un medio simple y directo ganó otra dimensión hace unos años, y tampoco parece que se detenga allí. Para Creador de sitios web , lo que una vez fue parte de los efectos visuales de la película de ciencia-ficción ahora es posible en una tableta que se encuentra en su sofá, y hay edificios cubiertos en instalaciones interactivas a gran escala que, en realidad, son solo la pantalla completa de Google Chrome Windows.

Siga los pasos a continuación para averiguar cómo crear un efecto de fusión realista con tres.js.

01. Configure la escena Three.js

Adelante y toma la biblioteca Three.js e inclúcela en su sitio. Tendrá que instanciar al WebGlrenderer, la escena y la perspectivaCamera. Después de estos se instancian, deberá hacer la escena en Solicitud de solicitud .

02. Añadir iluminación a la escena.

A continuación, las luces deben agregarse a la escena 3D. En este ejemplo, se utilizarán dos luces: una luz ambiental y una luz de punto. La luz ambiental sirve como un color global general para la escena, mientras que la luz del punto emitirá luz que disminuye con la distancia. Esto le dará a la escena un poco de contraste.

 VAR Ambientlight = NUEVO TRES.AMBIENTE LIGHT (0xCCCCCCC);
escena.add (luz ambiental);
VAR Pointlight = Nuevo Tres.Pointlight (0xFFFFFF, 1);
punto de punta.cosition.set (10, 5, 0);

03. Cargar el modelo 3D

Ahora que la escena se ha configurado, el modelo 3D debe cargarse. El modelo se puede cargar utilizando cualquier formato compatible (JSON, OBJ, DAE, etc.). A continuación se muestra un ejemplo de la carga de un modelo DAE. En este ejemplo, es muy importante que el modelo tenga suficientes polígonos para realizar modificaciones de vértice.

El cráneo de ciervos que se está utilizando en este ejemplo tiene 3.500 polys. Si el conteo de Poly es demasiado bajo, las animaciones de vértices serán demasiado explícitas y distorsionadas.

 cargador = nuevo tres.colladaloader ();
cargador.load ('DAE / DEER_SKULL / DEER_SKULT.DAE', OnloadComPleteHandler);

04. Añadir un mapa de golpe

Los mapas de golpe son perfectos para agregar profundidad a sus texturas a un costo bajo. Una vez que haya creado la imagen del mapa de Bump, puede implementarlo simplemente aplicándolo al material como a continuación. Además, deberá ajustar la escala de su mapa de golpe para adaptarse a la escala de su modelo.

 Material.Bumpmap = 'img / deer_skull / ciervo-bump.jpg';
Material.Bumpscale = .008;

05. Usa el animador del vértice

A lo largo de su sitio, Johnny utiliza una extensión de juego de Jerome Etienne por tres.js que hace que sea más fácil hacer animaciones de vértices. Esta extensión permite un fácil acceso a cada vértice de un modelo a la velocidad de fotogramas, lo que lo hace directo para manipular los vértices con las formas de onda.

los Extensión de animación de vértices Está disponible a través de GitHub de Etienne. Vamos a ir más lejos en cómo se usa en los próximos pasos.

Users can interact with the 3D model and view from multiple angles

06. empezar a derretir

Derretir un trozo de geometría implica algunos pasos generales. Primero, cada punto se empuja continuamente hacia abajo. Cuando un punto llega al suelo, se empuja hacia afuera usando lo que llamaremos un 'vector de empuje'.

A continuación, daremos los puntos que se reúnen a lo largo de la parte inferior de un espesor, por lo que la geometría derretida no es completamente plana. Para lograr esto, Johnny tiene un código portado de Skeel Lee's VFX Shader en Houdini y lo modificó.

07. Comience a mover los vértices hacia abajo.

A continuación se muestra un ejemplo de uso de usar el animador de vértices para empujar continuamente la geometría de un modelo hacia el suelo.

 var vertexanimation = new threex.vertexanimation (geometría, función (origen, posición, delta, ahora) {POSICION.Y - = MELTAMOUNT * MODELHEIGHT;}

Esto empujará puntos hacia abajo a la velocidad definida por el mojamount . Recuerde también llamar a 'Actualizar' en su animación de vértice en el ciclo de renderizado.

08. Determinar el vector de empuje

Cuando un punto ha alcanzado el suelo, debe ser empujado hacia afuera para lograr un efecto fundido. El código a continuación está determinando qué dirección en los ejes X y Z para empujar el vértice para que obtenga un desplazamiento uniforme. El condicional garantiza que solo los puntos que hayan alcanzado los límites más bajos del modelo (el suelo) se empujen hacia afuera.

 if (POSICION.Y & LT; BBOX.MIN.Y) {
  var centroroid = bbox.max.clone (). Agregar (bbox.min.clone ()). dividecalar (2.0);
PUSHVECTOR = POSICION.CLONE (). SUB (Centroide);
pushvector.y = 0; }

09. Hacer que el derretir se sienta natural.

El código a continuación utiliza el ruido para crear aleatoriedad en el movimiento, por lo que la masa fundida se siente orgánica. Las variables de ruido se pueden ajustar para obtener el efecto deseado. El ruido se aplica luego al vector de empuje junto con mojamount y prima Para controlar la velocidad y el tamaño de la piscina derretida. Este vector externo finalmente se calcula y luego se aplica al vértice en sí.

 var n = noiseamplitud * Generator.getval ((Position.x) * Utilefrequency + noiseffset);
Var OutwardVector = PUSHVECTOR.MULTIPLYSCALAR (((MELTAMOUNT * SpreadApunt) + N) * Outwardspeed);
posicion.add (externo);

10. Dale el espesor de la piscina derretida.

El código explicado hasta ahora alcanzará el efecto fundido, pero dos cosas están mal con él. Primero, la piscina se sentirá bastante plana, porque todos los puntos se han derretido a la misma posición Y. En segundo lugar, ya que todos comparten la misma y, demasiados puntos se apilarán a la misma altura, lo que puede causar parpadeo. Para evitar esto, se aplica un espesor a la tasa de fusión:

 POSICION.Y + = MELTAMOUNT * PISPOSO DE PISCINA;

11. Pruébalo en otros modelos.

Con el código anterior, cualquier modelo con suficientes polígonos se puede derretir. Descarga un archivo zip el código aquí y cambie la modelo con cualquier cosa que quieras. ¡Diviértete!

Este artículo apareció originalmente en Diseñador web Número 265. Comprarlo aquí .

Artículos relacionados:

Crear imágenes 3D interactivas con tres.js
Las mejores herramientas de color para diseñadores web.
Cuidado con la vanguardia del diseño web.

Cómo derretir un objeto 3D con tres.js

01. Configure la escena Three.js

02. Añadir iluminación a la escena.

03. Cargar el modelo 3D

04. Añadir un mapa de golpe

05. Usa el animador del vértice

06. empezar a derretir

07. Comience a mover los vértices hacia abajo.

08. Determinar el vector de empuje

09. Hacer que el derretir se sienta natural.

10. Dale el espesor de la piscina derretida.

11. Pruébalo en otros modelos.

Cómo - Artículos más populares

Gestiona el estado del formulario de reacción con Formik

Crea un bot de holgura personalizado

Tackle retrato pintando con aceites

Crea acabados especiales de impresión en InDesign

Crea conjuntos de iconos de productos en ilustrador

Cómo dibujar una nariz

caché en el refuerzo del rendimiento de la BBC

Desarrolla tus habilidades de caricatura

Categorías