Hur smälter du ett 3D-objekt med tre.js

Sep 13, 2025

Hur

Webben som vi vet det, förändras och utvecklas ständigt. Det vi fortfarande kan komma ihåg som ett enkelt och enkelt medium fick en annan dimension för några år sedan, och det ser inte ut som det kommer att stanna där heller. För en Website Builder , Det som en gång var en del av science-fiction-filmens visuella effekter är nu möjligt på en tablett som ligger på din soffa, och det finns byggnader som är täckta i storskaliga interaktiva installationer som faktiskt bara är fullskärmade Google Chrome-fönster.

Följ stegen nedan för att ta reda på hur du skapar en realistisk smältande effekt med tre.js.

01. Ställ in den tre.js-scenen

Gå vidare och ta tag i tre.js-biblioteket och inkludera det på din webbplats. Du måste omedelbar den webglrenderer, scenen och perspektivet. Efter dessa är instantierade, måste du göra scenen på RequestanimationFrame .

02. Lägg till belysning på scenen

Därefter måste lamporna läggas till 3D-scenen. I det här exemplet kommer två lampor att användas: ett omgivande ljus och ett punktljus. Det omgivande ljuset tjänar som en övergripande global färg för scenen, medan punktljuset kommer att avge ljus som minskar med avstånd. Detta kommer att ge scenen någon kontrast.

 VAR Ambientlight = Ny tre.ambientlight (0xccccccc);
scene.add (omgivligskraft);
Var Pointlight = Ny tre.PointLight (0xFFFFFF, 1);
Pointlight.Position.Set (10, 5, 0);

03. Ladda 3D-modellen

Nu när scenen har upprättats, måste 3D-modellen laddas in. Modellen kan laddas med hjälp av något stödd format (JSON, OBJ, DAE, etc.). Nedan är ett exempel på att ladda en DAE-modell. I det här exemplet är det mycket viktigt att modellen har tillräckligt med polygoner för att utföra vertex-modifieringar.

Den hjortskalle som används i detta exempel har 3 500 polys. Om polyantalet är för låg, kommer vertex-animationerna att vara för tydliga och förvrängda.

 Loader = Ny tre.Colladaloader ();
loader.load ('dae / deer_skull / deer_skull.dae', onoadcompletehandler);

04. Lägg till en bump map

Bump Maps är perfekta för att lägga till djup till dina texturer till låg kostnad. När du har skapat din Bump Map-bild kan du genomföra den genom att helt enkelt applicera den på materialet som nedan. Du måste också justera skalans skala för att passa på din modell.

 material.bumpmap = 'img / deer_skull / deer-bump.jpg';
material.Bumpscale = .008;

05. Använd Vertex Animator

Under hela sin webbplats använder Johnny en spelförlängning av Jerome Etienne för Three.Js som gör det lättare att göra Vertex-animationer. Denna förlängning möjliggör enkel åtkomst till varje vertex av en modell i bildhastigheten, vilket gör det enkelt att manipulera vertikaler med hjälp av vågformer.

De Vertex Animation Extension är tillgänglig via Etienne GitHub. Vi går vidare till hur det används i nästa steg.

Users can interact with the 3D model and view from multiple angles — Användare kan interagera med 3D-modellen och visa från flera vinklar

06. Börja smältning

Att smälta en bit geometri innebär några övergripande steg. För det första trycks varje punkt kontinuerligt nedåt. När en punkt når marken, skjuts den utåt med vad vi ringer en "push vektor".

Därefter ger vi de punkter som samlas längs botten en tjocklek så den smälta geometrin är inte helt platt. För att uppnå detta har Johnny portat kod från Skeel Lee's VFX Shader i Houdini och modifierade den.

07. Börja flytta vertikalerna nedåt

Nedan är ett exempelanvändning av att använda Vertex-animatorn för att kontinuerligt driva en modells geometri mot marken.

 var vertexanimation = ny trex.Vertexanimation (geometri, funktion (ursprung, position, delta, nu) {position.y - = Meltamount * Modelheight;}

Detta kommer att pussa på punkterna med den hastighet som definieras av meltaamount . Kom ihåg att också ringa "Uppdatera" på din Vertex-animering i Render-cykeln.

08. Bestäm pushvektorn

När en punkt har nått marken måste den skjutas utåt för att uppnå en smälteffekt. Koden nedan bestämmer vilken riktning i X- och Z-axlarna för att trycka på vertexen så att du får en jämn förskjutning. Det villkorliga säkerställer att endast punkter som har nått de lägsta gränserna för modellen (marken) skjuts utåt.

om (position.y & lt; bbox.min.y) {
  var centroid = bbox.max.clone (). Lägg till (bbox.min.clone ()). Dividescalar (2,0);
PushVector = position.klone (). Sub (centroid);
pushvector.y = 0; }

09. Gör smältan känns naturlig

Koden nedan använder ljud för att skapa slumpmässighet i rörelsen så att smältet känns organiskt. Bullervariablerna kan tweaked för att få den önskade effekten. Bullret appliceras sedan på tryckvektorn tillsammans med meltaamount och spreadamount för att styra hastigheten och storleken på den smälta poolen. Denna utåtriktad vektor beräknas slutligen och appliceras sedan på vertexen själv.

 Var n = Noiseamplitude * Generator.getVal ((position.x) * Noisefrequency + noiseoffset);
VAR OUTWARDVector = PushVector.MultiplysScalar (((Meltamount * Spreadamount) + N) * Utåtpeed);
position.add (utåtvektor);

10. Ge den smälta pooltjockleken

Koden förklaras hittills kommer att uppnå smälteffekten, men två saker är fel med det. Först kommer poolen att känna sig ganska platt, eftersom alla punkter har smält till samma y-position. För det andra, eftersom de alla delar samma y, kommer för många punkter att staplas i samma höjd, vilket kan orsaka flimrande. För att undvika detta appliceras en tjocklek vid smältfrekvensen:

 position.Y + = Meltamount * poolthickness;

11. Prova det på andra modeller

Med koden ovan kan någon modell med tillräckligt med polygoner smälta. Ladda ner en ZIP-fil ut i koden här och byt ut modellen med allt du vill. Ha så kul!

Denna artikel uppträdde ursprungligen i Webbdesigner Utgåva 265. Köp det här .

Relaterade artiklar:

Skapa interaktiva 3D-bilder med tre.js
De bästa färgverktygen för webbdesigners
Akta dig av kanten av webbdesign

Hur smälter du ett 3D-objekt med tre.js

01. Ställ in den tre.js-scenen

02. Lägg till belysning på scenen

03. Ladda 3D-modellen

04. Lägg till en bump map

05. Använd Vertex Animator

06. Börja smältning

07. Börja flytta vertikalerna nedåt

08. Bestäm pushvektorn

09. Gör smältan känns naturlig

10. Ge den smälta pooltjockleken

11. Prova det på andra modeller

Hur - Mest populära artiklar

Hur man ritar ett lejon

Hur man ritar perspektiv

Hur man skapar digitala plein-luftmålningar

Hur man förbättrar din karaktärskonst

Skapa en animerad ångtexteffekt

Skapa krusningseffekter med Pixijs

Hur man skapar en redshift-proxy i Cinema 4D

Vad är nytt i vinkel 4?

Kategorier