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

Sep 12, 2025

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

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

01. Sæt den tre.js scene

02. Tilføj belysning til scenen

03. Læg 3D-modellen

04. Tilføj et bumpkort

05. Brug Vertex Animator

06. Start smeltning

07. Start med at flytte hjørnerne nedad

08. Bestem push vektoren

09. Lad smelten føle sig naturligt

10. Giv den smeltede pooltykkelse

11. Prøv det på andre modeller

hvordan - Mest populære artikler

Cloud Storage til billeder og billeder: Sådan vælger du den bedste sky for dit arbejde

Affinity Designer: Sådan bruger du effekter og stilarter

Affinity Designer: Sådan bruger du begrænsninger

Sådan scannes en person på mindre end fem minutter

Sådan opretter du en lava lampe med tastetastik

Sådan digitalt sculpt i Zbrushcore

Sådan laver du 3D-bogstaver i Illustrator

Hemmelighederne for at opfylde en kreativ design brief

Kategorier