Comment faire fondre un objet 3D avec trois.js

Sep 11, 2025

Comment

[dix] [dix] [dix]

[dix]

Le Web comme nous le savons, change et évolue constamment. Ce que nous pouvons toujours nous rappeler en tant que moyen simple et simple gagna une autre dimension il y a quelques années et il ne semble pas que cela va s'arrêter là-bas non plus. Pour un Générateur de site Web Quelle partie de la science-fiction Les effets visuels de films de science-fiction sont désormais possibles sur une tablette allongée sur votre canapé. Il existe des bâtiments couverts dans des installations interactives à grande échelle qui sont en réalité des fenêtres de Google Chrome Fullscreen.

[dix]

Suivez les étapes ci-dessous pour savoir comment créer un effet de fusion réaliste avec trois.js.

01. Configurez la scène de trois.js

Allez-y et attrapez la bibliothèque de trois.js et incluez-la sur votre site. Vous aurez besoin d'instancier le Webglrenderer, la scène et la perspectiveCamera. Après ceux-ci sont instanciés, vous devrez rendre la scène sur Demandaimationframe .

02. Ajouter éclairage à la scène

Ensuite, des lumières doivent être ajoutées à la scène 3D. Dans cet exemple, deux lumières seront utilisées: une lumière ambiante et une lumière ponctuelle. La lumière ambiante sert de couleur globale globale pour la scène, tandis que le voyant ponctuel émettra la lumière qui diminue avec la distance. Cela donnera à la scène un contraste de la scène.

 var amientlight = nouveau trois.Ambienlight (0xcccccccc);
scène.add (Ambientlight);
var poinglight = nouveau trois.PrienGlight (0xFFFFFF, 1);
pointlight.position.set (10, 5, 0);

03. Chargez le modèle 3D

Maintenant que la scène a été mise en place, le modèle 3D doit être chargé. Le modèle peut être chargé à l'aide de tout format pris en charge (JSON, Obj, DAE, etc.). Vous trouverez ci-dessous un exemple de chargement d'un modèle DAE. Dans cet exemple, il est très important que le modèle ait suffisamment de polygones pour effectuer des modifications de sommet.

[dix]

Le crâne de cerf qui est utilisé dans cet exemple a 3 500 polys. Si le nombre de poly est trop faible, les animations de sommet seront trop explicites et déformées.

 charger = neuf trois.colladaloader ();
loader.load ('dae / Deer_skull / Deer_skull.dae', OnloadCompletHandler);

04. Ajouter une carte de bump

Les cartes de bump sont parfaites pour ajouter de la profondeur à vos textures à faible coût. Une fois que vous avez créé votre image de carte Bump, vous pouvez la mettre en œuvre en l'appliquant simplement sur le matériau comme ci-dessous. De plus, vous devrez régler l'échelle de votre carte de bump pour adapter l'échelle de votre modèle.

 Matériau.bumpmap = 'img / Deer_skull / Deer-Bump.jpg';
matériau.bumpcale = .008;

05. Utilisez l'animateur Vertex

Tout au long de son site, Johnny utilise une extension de jeu de Jerome Etienne pour trois.js qui facilite la tâche de faire des animations de sommet. Cette extension permet un accès facile à chaque sommet d'un modèle à la fréquence de trame, ce qui le rend simple pour manipuler les sommets en utilisant des formes d'onde.

Le Extension d'animation de sommet est disponible via Github d'Etienne. Nous allons plus loin dans la façon dont il est utilisé dans les prochaines étapes.

Users can interact with the 3D model and view from multiple angles — Les utilisateurs peuvent interagir avec le modèle 3D et la vue de plusieurs angles

06. commencer à fondre

[dix]

La fusion d'un morceau de géométrie implique quelques étapes globales. Tout d'abord, chaque point est continuellement poussé vers le bas. Lorsqu'un point atteint le sol, il est poussé vers l'extérieur en utilisant ce que nous appellerons un «vecteur poussoir».

Ensuite, nous allons donner les points qui se rassemblent sur le fond d'une épaisseur de sorte que la géométrie fondue n'est pas complètement plate. Pour ce faire, Johnny a porté du code de Skeel Lee's VFX Shader à Houdini et la modifie.

07. Commencez à déplacer les sommets vers le bas

Vous trouverez ci-dessous un exemple d'utilisation de l'utilisation de l'animateur de sommet pour pousser en permanence la géométrie d'un modèle vers le sol.

 Var vertexanimation = nouveau troisx.vertexanimation (géométrie, fonction (origine, position, delta, maintenant) {position.y - = meltamount * modelheight;}

Cela poussera les points sur le taux défini par le meltamount . N'oubliez pas d'appeler également «mise à jour» sur votre animation Vertex dans le cycle de rendu.

08. Déterminez le vecteur de poussée

Lorsqu'un point a atteint le sol, il doit être poussé vers l'extérieur pour atteindre un effet de fusion. Le code ci-dessous consiste à déterminer quelle direction dans les axes X et Z à pousser le sommet de manière à ce que vous obteniez un déplacement uniforme. Le conditionnel garantit que seuls les points qui ont atteint les limites les plus bas du modèle (le sol) sont poussés vers l'extérieur.

 Si (position.Y & lt; bbox.min.y.y) {
  Var Centroid = Bbox.max.clone (). Ajouter (Bbox.min.clone ()). DIVIDECALAR (2.0);
pushvector = position.clone (). Sub (Centroid);
pushvector.y = 0; }

09. Faites sentir la fonte naturelle

Le code ci-dessous utilise le bruit pour créer du caractère aléatoire dans le mouvement afin que la fusion se sent biologique. Les variables de bruit peuvent être modifiées pour obtenir l'effet souhaité. Le bruit est ensuite appliqué sur le vecteur de poussée avec meltamount et préparateur pour contrôler le taux et la taille de la piscine fondue. Ce vecteur extérieur est finalement calculé puis appliqué au sommet lui-même.

 Var N = NOISEAMPLITUDEL * GENERATOR.GETVAL ((POSITION.X) * NUMEROWEFREQUENCE + NOUTOFTOFFSET);
Var OutwardVector = PushVector.Multiphyscalar ((((Meltamount * Spectamount) + N) * Outwardpeed);
position.Ajouter (OutwardVector);

10. Donnez l'épaisseur de la piscine fondue

Le code expliqué jusqu'à présent atteindra l'effet de la fusion, mais deux choses ne sont pas fausses avec elle. Premièrement, la piscine se sentira bien plate, car tous les points ont fondu à la même position Y. Deuxièmement, puisqu'ils partagent tous les mêmes y, trop de points seront empilés à la même hauteur, ce qui peut provoquer des vaccinants. Pour éviter cela, une épaisseur est appliquée au taux de fusion:

 Position.Y + = Meltamount * Poolthickness;

11. Essayez-le sur d'autres modèles

Avec le code ci-dessus, tout modèle avec suffisamment de polygones peut être fondu. Téléchargez un fichier zip out le code ici et échangez le modèle avec tout ce que vous voulez. S'amuser!

Cet article est apparu à l'origine dans Concepteur web numéro 265. Achetez-le ici .

Articles Liés:

Créer des visuels 3D interactifs avec trois.js
Les meilleurs outils de couleur pour les concepteurs Web
Méfiez-vous de la pointe de la conception Web

[dix] [dix]

[dix]

Comment faire fondre un objet 3D avec trois.js

01. Configurez la scène de trois.js

02. Ajouter éclairage à la scène

03. Chargez le modèle 3D

04. Ajouter une carte de bump

05. Utilisez l'animateur Vertex

06. commencer à fondre

07. Commencez à déplacer les sommets vers le bas

08. Déterminez le vecteur de poussée

09. Faites sentir la fonte naturelle

10. Donnez l'épaisseur de la piscine fondue

11. Essayez-le sur d'autres modèles

Comment - Most Popular Articles

PUREREF: Comment utiliser l'outil de référence d'image

LINO PrintMaking: une introduction

Comment transformer Wordpress en un constructeur visuel

Comment coder les effets de texte intelligents avec CSS

Commencez avec des actifs dans l'affinité designer

Nivelez votre art VR

Illumine votre travail 3D avec des lumières de dôme

4 étapes faciles pour améliorer votre rendu

Catégories