Miten sulattaa 3D-objekti kolmella.js

Sep 14, 2025
Miten tehdään

Web kuten tiedämme, on jatkuvasti muuttumassa ja kehittyvä. Se, mitä voimme vielä muistaa yksinkertaisena ja yksinkertaisena keskitasona, sai toisen ulottuvuuden muutama vuosi sitten, eikä se näytä siltä, ​​että se pysähtyy. A Verkkosivuston rakentaja Mikä oli aikoinaan scifi elokuva visuaalisia tehosteita on nyt mahdollista tablet makaa sohvalla, ja on rakennuksia katettu laajamittainen interaktiivinen laitokset, jotka ovat todella vain fullscreen Google Chromen ikkunoita.

Seuraa alla olevia ohjeita selvittääksesi realistisen sulamisvaikutuksen kolmella.js.

01. Aseta kolme.js kohtaus

Mene eteenpäin ja tartu kolmeen.js-kirjastoon ja lisää se sivustoosi. Sinun täytyy välittää webglrenderer, kohtaus ja perspectiveecamera. Näiden jälkeen on välttämätöntä, sinun on tehtävä kohtaus Pyydettävä .

02. Lisää valaistus kohtaukseen

Seuraavaksi valot on lisättävä 3D-kohtaukseen. Tässä esimerkissä käytetään kahta valoa: ympäristön valo ja pistevalo. Ympäristön valo toimii ylellisenä maailmanlaajuisena värinä, kun taas pistevalo lähettää valoa, joka pienenee etäisyydellä. Tämä antaa kohtauksen jonkin verran kontrastia. 

 var Ambientlight = uusi kolme.Mbientlight (0xCCCCCC);
Scene.Add (Ambienghtlight);
var Pointlight = uusi kolme.Pointlight (0xFFFFFF, 1);
Pointlight.Position.set (10, 5, 0);

03. Lataa 3D-malli

Nyt kun kohtaus on perustettu, 3D-malli on ladattava. Malli voidaan ladata käyttämällä mitä tahansa tuettua muotoa (JSON, OBJ, DAE jne.). Alla on esimerkki DAE-mallin lataamisesta. Tässä esimerkissä on erittäin tärkeää, että mallissa on tarpeeksi polygoneja vertex-modifikaatioiden suorittamiseen.

Peurakallo, jota käytetään tässä esimerkissä 3500 polystä. Jos poly-määrä on liian alhainen, Vertex-animaatiot ovat liian selkeät ja vääristyvät. 

 Loader = uusi kolme.colladaloader ();
Loader.load ('DAE / Deer_skull / Deer_skull.dae', onloadCompleteHandler);

04. Lisää bump kartta

Bump Maps sopii täydellisesti syvyyden lisäämiseen tekstuurisi edullisella kustannuksella. Kun olet luonut Bump Map-kuvan, voit toteuttaa sen yksinkertaisesti soveltamalla sitä alla olevaan materiaaliin. Myös sinun on säädettävä Bump-kartan asteikkoa mallin mittakaavassa. 

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

05. Käytä Vertex-animaattoria

Koko hänen sivustossa Johnny hyödyntää Jerome Etienne: n pelin laajentamista kolmelle.js, mikä helpottaa vertex-animaatioiden tekemistä. Tämä laajennus mahdollistaa helpon pääsyn kullekin mallin huippupisteeseen kehysnopeudella, mikä tekee siitä helppoa manipuloida pisteitä aaltomuodoissa.

The Vertex-animaatio jatke on saatavilla Etienne: n GitHubin kautta. Menemme edelleen, miten sitä käytetään seuraavissa vaiheissa.

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

Käyttäjät voivat olla vuorovaikutuksessa 3D-mallin ja näkymän kanssa useista kulmista

06. Aloita sulaminen

Geometrian sulaminen sisältää muutamia yleisiä vaiheita. Ensinnäkin kukin piste työnnetään jatkuvasti alaspäin. Kun kohta saavuttaa maan, se työnnetään ulospäin käyttämällä sitä, mitä kutsumme 'push vektori'.

Seuraavaksi annamme pisteitä, jotka kokoontuvat pohjaan paksuuteen, joten sulanut geometria ei ole täysin tasainen. Tämän saavuttamiseksi Johnny on siirtänyt koodin Skeel Lee VFX Shader Houdinista ja muuttanut sitä.

07. Aloita pisteiden siirtäminen alaspäin

Alla on esimerkki kätex-animaattorin käytöstä jatkuvasti työntää mallin geometria kohti maahan. 

 var vertexanimaatio = uusi threex.vertexanimaatio (geometria, funktio (alkuperä, sijainti, delta, nyt) {sijainti.y - = Meltamount * ModelHeight;}

Tämä työntää pisteitä alaspäin määritellyllä nopeudella Meltamount . Muista myös soittaa "päivitys" Vertex-animaatiossasi Render Cycle -ohjelmassa.

08. Määritä push-vektori

Kun piste on saavuttanut maahan, se on työnnettävä ulospäin sulavaikutuksen saavuttamiseksi. Alla oleva koodi määrittää, mihin suuntaan X- ja Z-akseleissa työntääksesi Vertexia, jotta saat yhtenäisen siirtymän. Ehdollinen varmistaa, että vain pisteitä, jotka ovat saavuttaneet mallin alhaisimmat rajat (maa), työnnetään ulospäin. 

jos (sijainti.Y & lt; bbox.min.y) {
  var centroid = bbox.max.clone (). Lisää (bbox.min.clone (). Dividescalar (2.0);
pushvektori = asento. Clone (). Sub (Centroid);
pushvektori.Y = 0; }

09. Tee sula tuntuu luonnolliselta

Alla oleva koodi käyttää melua luomaan satunnaisuutta liikkeessä niin sulava tuntuu orgaanisesta. Melamuuttujat voidaan säätää halutun vaikutuksen saamiseksi. Melu levitetään sitten työntövektoriin yhdessä Meltamount ja levitys hallita sulatetun altaan nopeutta ja kokoa. Tämä ulospäin suuntautuva vektori lasketaan lopulta ja sitten levitetään itse asiaan. 

 var n = noiseamlitudi * generator.getval ((sijainti.x) * NoisefRequency + NoiseOffset);
var Ulostuneisuus = pushvektori.multipytcalar (((MeltaMount * SpreadMount) + N) * Lähestään);
Sijainti.Add (ulospäin suuntautuva);

10. Anna sulatettu altaan paksuus

Tähän mennessä selitetty koodi saavuttaa sulavaikutuksen, mutta kaksi asiaa on väärässä. Ensinnäkin uima-allas tuntuu varsin tasaiselta, koska kaikki kohdat ovat sulaneet samaan Y-asentoon. Toiseksi, koska kaikki jakavat saman y: n, liian monta pistettä pinotaan samalla korkeudella, mikä voi aiheuttaa vilkkumista. Tämän välttämiseksi sulat nopeudella levitetään paksuus: 

 Position.y + = MeltaMount * Poolthecty;

11. Kokeile sitä muissa malleissa

Edellä olevan koodin avulla kaikki mallit, joissa on tarpeeksi monikulmioita, voidaan sulattaa. Lataa zip-tiedosto ulos koodi tässä ja vaihda mallia mitä haluat. Pidä hauskaa!

Tämä artikkeli oli alun perin ilmestynyt Nettisivujen suunnittelija Julkaisu 265. Osta se tässä .

Aiheeseen liittyvät artikkelit:

  • Luo vuorovaikutteisia 3D-visuaaleja kolmella.js
  • Parhaat värityökalut web-suunnittelijoille
  • Varo web-suunnittelun leikkausreuna

Miten tehdään - Suosituimmat artikkelit

4 vaiheet muuttuvien fonttien käyttämiseen

Miten tehdään Sep 14, 2025

(Kuva luotto: tulevaisuus) Muuttuvat fontit mahdollistavat fonttisi suunnittelijat määrittämään tyypin vaihtelut..

Miten vaihtaa fonttia Twitter Bio

Miten tehdään Sep 14, 2025

Twitterissä on paljon ihmisiä - 261 miljoonaa Twitter-tiliä viime kerralla. Ja se tarkoittaa, että tilisi voi olla vaikea ero..

Luo oma kalligrafinen harja illustratorissa

Miten tehdään Sep 14, 2025

Yksi parhaista Illustratorista on kyky luoda omia harjoja. Löydät hämmästyttäviä ilmaisia ​​kuvia verkossa, mutta josku..

Kuinka tuoda 2D-merkin elämään VR

Miten tehdään Sep 14, 2025

Jos noudatat trendejä, on vaikea jättää huomiotta, että VR on menossa läpi toisen herätyksen. Se on tapahtunut ennen, mutt..

Kuinka maalata 1800-luvun päällikkö

Miten tehdään Sep 14, 2025

1800-luvulla oli hieno aikataide. Taiteilijat pidettiin korkeassa suhteessa ja yleisö koulutettiin taidetta. Oli erittäin korke..

4 askeleen parempaan VDM Zbrushin kanssa

Miten tehdään Sep 14, 2025

Freelance 3D Artistin ja Vertex Panelist Maya Jermy näyttää, miten Master Vdm. Hän esiintyy Vertex ..

Kuinka veistää ja aiheuttaa sarjakuvapäätä Zbrushissa

Miten tehdään Sep 14, 2025

Kun halusin luoda hauskan pala 3D-taide Goofy-ilmaisulla näen Randy piispan konseptin, jonka todella pidin violet..

Aloita prototyyping Adobe XD: ssä

Miten tehdään Sep 14, 2025

Koska UX-suunnittelualan ammattilaisten kysyntä kasvaa edelleen, suunnittelijat etsivät helppokäyttöisiä työkaluja, jotka ovat tarpeeksi tehokkaita laadukkaita prototyyppejä, mutta tun..

Luokat