Sådan smelter du et 3D-objekt med tre.js

Feb 13, 2026
hvordan

Internettet som vi ved det, ændrer sig konstant og udvikler sig. Hvad vi stadig kan huske som et simpelt og ligetil medium, der opnås en anden dimension for nogle år siden, og det ser heller ikke ud som om det vil stoppe der. For A. Website Builder. , hvad der engang var en del af science-fiction-film visuelle effekter, nu er muligt på en tablet, der ligger på din sofa, og der er bygninger dækket af store interaktive installationer, der rent faktisk kun er fuldskærm Google Chrome Windows.

Følg trinene herunder for at finde ud af, hvordan du opretter en realistisk smeltende effekt med tre.js.

01. Sæt den tre.js scene

Gå videre og tag tre.js biblioteket og medtag det på dit websted. Du skal instantisere webglrenderer, scenen og perspektivcameraen. Når disse er instantiated, skal du gøre scenen på RequestanimationFrame. .

02. Tilføj belysning til scenen

Dernæst skal lys tilføjes til 3D-scenen. I dette eksempel vil to lys blive brugt: et omgivende lys og et punktlys. Det omgivende lys tjener som en samlet global farve til scenen, mens punktlampen udsender lyset, der mindskes med afstand. Dette vil give scenen en vis kontrast. 

 Var Ambientlight = Ny tre.ambientlight (0xCCCCCCC);
scene.add (Ambientlight);
var pointlight = ny tre.pointlight (0xFFFFFF, 1);
Pointlight.position.set (10, 5, 0);

03. Læg 3D-modellen

Nu hvor scenen er oprettet, skal 3D-modellen indlæses i. Modellen kan indlæses ved hjælp af ethvert understøttet format (JSON, OBJ, DAE osv.). Nedenfor er et eksempel på at indlæse en DAE-model. I dette eksempel er det meget vigtigt, at modellen har nok polygoner til at udføre vertexmodifikationer.

Den hjorte kraniet, der bruges i dette eksempel, har 3.500 polys. Hvis polyantalet er for lavt, vil vertex animationerne være for eksplicit og forvrænget. 

 Loader = New Three.ColladAloader ();
LOADER.LOAD ('DAE / DEER_SKULL / DEER_SKULL.DAE', ONLOAD FACKPLETEHANDLER);

04. Tilføj et bumpkort

Bump Maps er perfekte til at tilføje dybde til dine teksturer til en lav pris. Når du har oprettet dit Bump Map-billede, kan du implementere det ved blot at anvende det på materialet som nedenfor. Du skal også justere omfanget af dit Bump-kort for at passe til skalaen af ​​din model. 

 Material.BumpMap = 'IMG / Deer_skull / Deer-Bump.jpg';
Material.BumpScale = .008;

05. Brug Vertex Animator

I hele sit websted bruger Johnny en spiludvidelse af Jerome Etienne til Three.js, der gør det lettere at lave Vertex-animationer. Denne udvidelse giver nem adgang til hvert hjørne af en model ved ramfrekvensen, hvilket gør den ligetil at manipulere hjørner ved hjælp af bølgeformer.

Det Vertex Animation Extension er tilgængelig via Etienne's GitHub. Vi går videre ind i, hvordan det bruges i de næste trin.

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

Brugere kan interagere med 3D-modellen og udsigten fra flere vinkler

06. Start smeltning

Smeltning af et stykke geometri indebærer et par overordnede trin. For det første skubbes hvert punkt kontinuerligt nedad. Når et punkt når jorden, skubbes det udad ved hjælp af, hvad vi kalder en 'push vektor'.

Derefter giver vi de punkter, der samler langs bunden en tykkelse, så den smeltede geometri er ikke helt flad. For at opnå dette har Johnny portet kode fra Skeel Lee's VFX Shader i Houdini og ændret den.

07. Start med at flytte hjørnerne nedad

Nedenfor er et eksempel brugen af ​​at bruge Vertex Animator til kontinuerligt at skubbe en model geometri mod jorden. 

 Var VerlexAnimation = ny trex.verteksanimering (geometri, funktion (oprindelse, position, delta, nu) {position.y - = Meltamount * ModelHeight;}

Dette vil skubbe punkter ned med den sats, der er defineret af meltamount. . Husk også at ringe til 'opdatering' på din vertex animation i rendercyklussen.

08. Bestem push vektoren

Når et punkt har nået jorden, skal det skubbes udad for at opnå en smelteffekt. Koden nedenfor bestiller hvilken retning i X- og Z-akserne for at skubbe hjørnet, så du får en ensartet forskydning. Betinget sikrer, at kun punkter, der har nået de laveste grænser for modellen (jorden) skubbes udad. 

hvis (position.y & lt; bbox.min.y) {
  Var centroid = bbox.max.clone (). Tilsæt (bbox.min.clone ()). Divididcalar (2.0);
pushvector = position.clone (). sub (centroid);
pushvector.y = 0; }

09. Lad smelten føle sig naturligt

Koden nedenfor bruger støj til at skabe tilfældighed i bevægelsen, så smelten føles organisk. Støjvariablerne kan tweaked for at få den ønskede effekt. Støjen påføres derefter på trykvektoren sammen med meltamount. og SpredDamount. at styre hastigheden og størrelsen af ​​den smeltede pool. Denne udadvendte vektor beregnes endelig og derefter påføres på selve verten. 

 var n = noiseamplitude * generator.getval ((position.x) * noisefrequency + noiseOffset);
Var OutwardVector = pushvector.multiplyscalar (((meltamount * spredning) + n) * udadvendt);
position.add (udadvender);

10. Giv den smeltede pooltykkelse

Koden forklaret hidtil vil opnå smelteffekten, men to ting er forkerte med det. For det første vil puljen føle sig ret flad, fordi alle punkterne har smeltet til samme y position. For det andet, da de alle deler de samme Y, vil for mange punkter blive stablet i samme højde, hvilket kan forårsage flimrende. For at undgå dette anvendes en tykkelse ved smeltehastigheden: 

 Position.y + = Meltamount * Poolthickness;

11. Prøv det på andre modeller

Med koden ovenfor kan enhver model med nok polygoner smeltes. Download en zip-fil ud koden her og bytte ud af modellen med noget, du gerne vil. Hav det sjovt!

Denne artikel optrådte oprindeligt i Webdesigner Udgave 265. Køb det her .

Relaterede artikler:

  • Opret interaktive 3D-visualer med tre.js
  • De bedste farveværktøjer til webdesignere
  • Pas på skærekanten af ​​webdesign

hvordan - Mest populære artikler

Tegn på kraften i kontrast i kunst

hvordan Feb 13, 2026

At lære at bruge kontrast i kunst vil omdanne dine projekter og den måde, du arbejder på. Mit foretrukne aspekt til at arbejde med i kunst er kontrast. Dette opstår normalt, når du arbej..

Arbejde smart med din ZBRUSH UI

hvordan Feb 13, 2026

Alt, der stimulerer vores sind, kan påvirke vores produktivitet, og det er vigtigt at genkende faktorer, der understøtter vores arbejde, hvad enten det er den rigtige form for baggrundsmusi..

Sådan tegner du en elefant

hvordan Feb 13, 2026

Som det største levende landpattedyr på jorden har elefanter ret den ubestridelige tilstedeværelse. Ved fødslen vejer elefanter allerede op til 200 pun..

Opgrader dine teksturer i stofdesigner

hvordan Feb 13, 2026

BUNGIE LEAD MILJØ KATIVER DANIEL Thiger løber os gennem sine teknikker til at producere realistiske, overbevisende teksturering..

Sådan skaber du fantastiske effekter med CSS-former

hvordan Feb 13, 2026

Frontend udviklere har tendens til at tænke på rektangler; rektangler inde i rektangler inde i rektangler inde i rektangler. Vi..

Sådan arbejder du med HTML-video

hvordan Feb 13, 2026

Flyt over YouTube ... med & LT; Video & GT; element og lidt JavaScript. , kan du begynde at oprette dit eg..

Sådan maler du buet glas på en rumhjelm

hvordan Feb 13, 2026

Spacesuits er sjove at male, men hjelmdelen kan være vanskelig at få ret, især glaselementet, fordi du skal tage hensyn til de..

Få fat i den våde-våd maleri teknik

hvordan Feb 13, 2026

Våd-in-våd er en maleri teknik der ofte kan forårsage frustration. Denne metode er, hvor yderligere maling tils..

Kategorier