Slik smelter du et 3D-objekt med tre.js

Sep 16, 2025
hvordan
[1. 3]

Internett som vi vet det, er stadig forandring og evolusjonerende. Det vi fortsatt kan huske som et enkelt og grei medium fikk en annen dimensjon for noen år siden, og det ser ikke ut som det kommer til å stoppe der heller. For en Nettstedbygger , Hva var en gang en del av science-fiction-filmvisuelteffekter, er nå mulig på en tablett som ligger på sofaen din, og det er bygninger som er dekket i store interaktive installasjoner som egentlig bare er fullskjerms Google Chrome Windows.

Følg trinnene nedenfor for å finne ut hvordan du lager en realistisk smeltingseffekt med tre.js.

01. Sett opp tre.js-scenen

Gå videre og ta tak i tre.js-biblioteket og ta med det på nettstedet ditt. Du må instantiere WebGlrenderen, scenen og Perspectivecamera. Etter at disse er instantiated, må du gjøre scenen på RequestanimationFrame. .

02. Legg til belysning til scenen

Deretter må lysene legges til 3D-scenen. I dette eksemplet vil to lys bli brukt: et omgivelseslys og et punktlys. Det omgivende lyset fungerer som en generell global farge for scenen, mens punktlyset vil avgi lys som reduserer avstanden. Dette vil gi scenen noen kontrast. 

 var Ambientlight = ny tre.ambientlight (0xcccccccc);
scene.Add (Ambientlight);
varpointlight = ny tre.punktlight (0xffffff, 1);
pointlight.position.Set (10, 5, 0);

03. Legg 3D-modellen

Nå som scenen er satt opp, må 3D-modellen lastes inn. Modellen kan lastes ved hjelp av et støttet format (JSON, OBJ, DAE, etc). Nedenfor er et eksempel på å laste en DAE-modell. I dette eksemplet er det svært viktig at modellen har nok polygoner til å utføre vertexendringer.

Hjortskallen som brukes i dette eksemplet har 3.500 polys. Hvis poly-tellingen er for lav, vil topplex animasjonene være for eksplisitte og forvrengt. 

 Loader = Ny tre.Colladaloader ();
loader.last ('dae / deer_skull / deer_skull.dae', onloadcompletehandler);

04. Legg til et bumpkart

Bump Maps er perfekte for å legge til dybde i teksturene til en lav pris. Når du har opprettet ditt Bump Map-bilde, kan du implementere det ved å bare bruke det til materialet som nedenfor. Også, du må også justere skalaen på Bump Map for å passe til omfanget av modellen din. 

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

05. Bruk Vertex Animator

Gjennom hele nettstedet benytter Johnny en spillutvidelse av Jerome Etienne for tre.js som gjør det lettere å gjøre vertex animasjoner. Denne utvidelsen gir enkel tilgang til hvert toppunkt for en modell i rammehastigheten, noe som gjør det enkelt å manipulere hjørner med bølgeformer.

De Vertex animasjon utvidelse er tilgjengelig via Etienne Github. Vi går videre til hvordan den brukes i de neste trinnene.

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

Brukere kan samhandle med 3D-modellen og visningen fra flere vinkler

06. Start smelting

Smelting av et stykke geometri innebærer noen få samlede trinn. Først blir hvert punkt kontinuerlig presset nedover. Når et punkt når bakken, er den presset utover med det vi kaller en "trykkvektor".

Deretter gir vi poengene som samles langs bunnen en tykkelse, slik at smeltet geometri ikke er helt flatt. For å oppnå dette har Johnny Ported Code fra Skeel Lee's VFX Shader i Houdini og endret det.

07. Begynn å flytte hjørnene nedover

Nedenfor er et eksempel på bruk av bruk av Vertex-animatoren for å kontinuerlig presse en modellens geometri mot bakken. 

 var verteksanimasjon = ny trex.vertexanimation (geometri, funksjon (opprinnelse, posisjon, delta, nå) {Position.y - = Meltamount * ModelHeight;}

Dette vil presse på punktene ned i hastigheten som er definert av smeltamount. . Husk å ringe 'Update' på din toppei animasjon i Render Cycle.

08. Bestem trykkvektoren

Når et punkt har nådd bakken, må den skyves utover for å oppnå en smelteffekt. Koden nedenfor bestemmer hvilken retning i X- og Z-aksene for å skyve toppunktet slik at du får en jevn forskyvning. Den betingede sikrer at bare poeng som har nådd de laveste grensene til modellen (bakken) skyves utover. 

hvis (posisjon.y & lt; bbox.min.y) {
  var centroid = bbox.max.clone (). Legg til (bbox.min.clone ()). Dividescalar (2.0);
pushvector = posisjon.Clone (). sub (centroid);
pushvector.y = 0; }

09. Gjør smeltet føles naturlig

Koden nedenfor bruker støy for å skape tilfeldighet i bevegelsen, slik at smelten føles organisk. Støyvariablene kan tweaked for å få den ønskede effekten. Støyen blir deretter påført på trykkvektoren sammen med smeltamount. og spreadamount. å kontrollere hastigheten og størrelsen på det smeltede bassenget. Denne utadvendte vektoren er endelig beregnet og deretter påført på toppunktet selv. 

 var n = noiseamplitude * generator.getVal ((posisjon.x) * noisefrequency + noiseoffset);
var outwardvector = pushvector.multiplyscalar (((meltamount * spreadamount) + n) * Outdottpeed);
stilling.add (outwardvector);

10. Gi smeltet bassengtykkelsen

Koden forklart så langt vil oppnå smelteffekten, men to ting er galt med det. Først vil bassenget føles ganske flatt, fordi alle punktene har smeltet til samme Y-posisjon. For det andre, siden de alle deler de samme Y, vil for mange poeng bli stablet i samme høyde, noe som kan forårsake flimrende. For å unngå dette påføres en tykkelse på smeltefrekvensen: 

 Posisjon. På + = Meltamount * Poolhickness;

11. Prøv det på andre modeller

Med koden ovenfor kan en hvilken som helst modell med nok polygoner smeltes. Last ned en zip-fil ut koden her og bytt ut modellen med alt du vil. Ha det gøy!

Denne artikkelen opprinnelig dukket opp i Webdesigner utgave 265. Kjøp det her .

Relaterte artikler:

  • Lag interaktive 3D-visuelle med tre.js
  • De beste fargeverktøyene for webdesignere
  • Pass på kanten av webdesign

hvordan - Mest populære artikler

Visuelle utviklingstips: Fortell en historie med ditt kunstverk

hvordan Sep 16, 2025

[1. 3] (Bilde Kreditt: Simon Baek) Hva er visuell utvikling? Vel, det designer alt som kan bidra til å visualisere en..

30 KeyShot Rendering Tips

hvordan Sep 16, 2025

[1. 3] Gjengivelse av et bilde, animasjon av en modell eller til og med en hel scene er et viktig skritt i kunstskapet. Uten dette..

10 tips for å mestre Apples bilder App

hvordan Sep 16, 2025

[1. 3] MacOS-Photos-appen begynte livet som iPhoto: En forbrukerapp for å administrere digitale fotografier, med noen få grunnle..

Strøm en blogg med WordPress API

hvordan Sep 16, 2025

[1. 3] I løpet av de siste årene har utviklingen av en rest API for WordPress åpnet nye dører for utviklere. Utviklere som tid..

Hvordan tegne med Affinity Photo for iPad

hvordan Sep 16, 2025

[1. 3] Affinity Foto for iPad er en flott bilderedigeringsprogram , hvordan skjer serifs app når det g..

Hvordan digitalt skulptur i Zbrushcore

hvordan Sep 16, 2025

[1. 3] ZbrushCore ($ 149.95 for en enkeltbrukerlisens) er en forenklet versjon av Zbrush. som fungerer ..

Bygg skalerbare responsive komponenter

hvordan Sep 16, 2025

[1. 3] Når vi snakker om å bygge vedlikeholdbare og skalerbare nettsteder, kommer vi uunngåelig Javascript. -Rel..

Prep ditt arbeid for 3D-utskrift: 8 Top Tips

hvordan Sep 16, 2025

3D-utskrift har blitt enormt populært. Hvis du vil begynne å skrive ut din egen 3D Art. , det er noen ting å se etter for å få de beste resultatene. Her vil jeg vise deg h..

Kategorier