Hogyan olvadunk egy 3D objektumot három.js-vel

Sep 15, 2025

kézikönyv

Az internet, mint tudjuk, folyamatosan változik és fejlődik. Amit még mindig emlékezhetünk, mint egy egyszerű és egyszerű médium, néhány évvel ezelőtt egy másik dimenziót szerzett, és nem úgy tűnik, hogy ott fog megállni. A weboldal építője , Mi volt a tudomány-fikciós film vizuális effektusának egy része a kanapén fekvő táblagépen, és vannak olyan épületek, amelyek nagyméretű interaktív telepítésekben vannak olyan, amelyek valójában csak teljes képernyős Google Chrome Windows.

Kövesse az alábbi lépéseket, hogy megtudja, hogyan lehet reális olvadáspontot létrehozni a három.js-szel.

01. Állítsa be a három.js jelenetet

Menjen előre, és megragadja a három.js könyvtárat, és foglalja bele a webhelyén. A webgloderer, a jelenet és a perspectivecamera be kell lépnie. Ezután ezeket az instantiáltuk, meg kell adnia a jelenetet Kérdőíves .

02. Add hozzá a világítást a jelenethez

Ezután a fényeket hozzá kell adni a 3D-s jelenethez. Ebben a példában két fényt használnak: környezeti fény és pontfény. A környezeti fény a jelenet általános globális színe, míg a pontfény olyan fényt bocsát ki, amely csökkenti a távolságot. Ez bizonyos kontrasztot ad.

 VAR Ambientlight = új három.ambientlight (0xccccccc);
jelenet.add (ambientlight);
var pointight = új három.pointlight (0xffffff, 1);
pointight.position.set (10, 5, 0);

03. Töltse be a 3D-s modellt

Most, hogy a jelenetet beállították, a 3D-s modellt be kell tölteni. A modell betölthető bármely támogatott formátummal (JSON, OBJ, DAE, stb.). Az alábbiakban egy példa a DAE modell betöltésére. Ebben a példában nagyon fontos, hogy a modell elegendő sokszögekkel rendelkezik a csúcs módosításainak végrehajtásához.

Az ebben a példában használt szarvas koponya 3500 policsommal rendelkezik. Ha a poli szám túl alacsony, akkor a csúcs animációi túlságosan kifejezettek és torzulnak.

 betöltő = új három.Colladaloader ();
loader.load ("dae / deer_skull / deer_skull.dae", onloadCompleteHandler);

04. Adjon hozzá egy bump térképet

A bump térképek tökéletesek a mélység hozzáadásához a textúrákhoz alacsony költséggel. Miután létrehozta a Bump Map Image-t, akkor egyszerűen alkalmazhatja azt az alábbi anyaggal, mint az alábbi anyaghoz. Továbbá be kell állítania a bump térkép méretét a modell méretének megfelelően.

 anyag.bumpmap = 'img / deer_skull / deer-bump.jpg';
anyag.bumpscale = .008;

05. Használja a Vertex animátort

A honlapján Johnny a Jerome Etienne játék kiterjesztését használja a Three.js számára, amelyek megkönnyítik a csúcs animációit. Ez a kiterjesztés lehetővé teszi a modell mindegyik csúcsához a képkocka esetében, így egyszerűvé teszi a csúcsok manipulálását a hullámformák használatával.

A Vertex animációs kiterjesztés az Etienne Github segítségével érhető el. Tovább megyünk, hogyan használják a következő lépésekben.

Users can interact with the 3D model and view from multiple angles — A felhasználók kölcsönhatásbahatják a 3D-s modellt és a nézet több szögből

06. Elolvad az olvasztást

A geometria elolvadása néhány általános lépést tartalmaz. Először minden pontot folyamatosan lefelé nyomja. Amikor egy pont eléri a földet, kifelé nyomja, hogy mit fogunk felhívni a "push vektort".

Ezután megadjuk a pontokat, amelyek összegyűlnek az alsó vastagság mentén, így az olvadt geometria nem teljesen lapos. Ennek elérése érdekében Johnny a Skeel Lee VFX Shader-től Houdini-ből származott, és módosította.

07. Indítsa el a csúcsokat lefelé mozgatva

Az alábbiakban egy példa a csúcs animátor használatára, hogy folyamatosan nyomja a modell geometriáját a föld felé.

 VAR Vertexanimation = új háromx.vertexanimáció (geometria, funkció (származás, pozíció, delta, most) {pozíció.y - = Meltamount * Modelheight;}

Ez a pontokat a meltamount . Ne feledje, hogy a csúcsciklusban is nevezzen "frissítést".

08. Határozza meg a push vektort

Ha egy pont elérte a földet, ki kell húzni az olvadékhatást. Az alábbi kód meghatározza, hogy melyik irányba mutatja az X és Z tengelyeket, hogy nyomja a csúcsot úgy, hogy egy egyenletes elmozdulást kapjon. A feltételes biztosítja, hogy csak a modell (a talaj) legalacsonyabb határainak elért pontjai kifelé vannak nyomva.

ha (pozíció.y & lt; bbox.min.y) {
  var centroid = bbox.max.clone (). add (bbox.min.clone ()). DivideScalar (2.0);
Pushvector = pozíció.clone (). Sub (centroid);
Pushvector.y = 0; }

09. hogy az olvadék természetes legyen

Az alábbi kód zajt használ, hogy véletlenszerűséget hozzon létre a mozgásban, így az olvadék szervesnek érzi magát. A zajváltozókat a kívánt hatás eléréséhez lehet csípni. A zajt ezután a push vektorra kell alkalmazni meltamount és szórólap az olvasztott medence sebességének és méretének szabályozására. Ezt a külső vektort végül kiszámítják, majd a csúcsra alkalmazzák.

 var n = noisamplitude * generator.getval ((pozíció.x) * zajtalanság + zajoffset);
var outwardvector = pushvector.multiplyscalar (((Meltamount * Spreadamount) + N) * outwardspeed);
pozíció.add (OutwardVector);

10. Adja meg az olvasztott medence vastagságát

Az eddig elmagyarázott kód eléri az olvadékhatást, de két dolog baj van vele. Először is, a medence meglehetősen laposnak érzi magát, mert az összes pont megolvadt ugyanolyan Y pozícióba. Másodszor, mivel mindannyian megosztják ugyanazokat az Y-t, túl sok pontot fognak halmozni ugyanabba a magasságban, ami villogást okozhat. Ennek elkerülése érdekében vastagságot alkalmaznak az olvadék arányában:

 pozíció.y + = Meltamount * PoTthickness;

11. Próbálja ki más modelleken

A fenti kóddal minden olyan modell, amely elegendő sokszögű, olvasztható. Töltse le a zip fájlt a kódra itt és cserélje ki a modellt bármit, amit szeretne. Érezd jól magad!

Ez a cikk eredetileg megjelent Web designer 265. kiadás itt .

Kapcsolódó cikkek:

Hozzon létre interaktív 3D-s képeket három.js-vel
A legjobb színes eszközök a webes tervezők számára
Vigyázz a webes tervezés szélére

Hogyan olvadunk egy 3D objektumot három.js-vel

01. Állítsa be a három.js jelenetet

02. Add hozzá a világítást a jelenethez

03. Töltse be a 3D-s modellt

04. Adjon hozzá egy bump térképet

05. Használja a Vertex animátort

06. Elolvad az olvasztást

07. Indítsa el a csúcsokat lefelé mozgatva

08. Határozza meg a push vektort

09. hogy az olvadék természetes legyen

10. Adja meg az olvasztott medence vastagságát

11. Próbálja ki más modelleken

kézikönyv - Most Popular Articles

22 legjobb UI tervezési eszközök

Márka tipográfia: Teljes útmutató

Cinema 4d oktatóanyagok: 13 a legjobb

Hogyan rajzoljunk egy karot

Frissítse a textúrákat az anyagtervezőben

4 lépés a zbrush jobb VDM-hez

Design SVG grafika a böngészőben

Hogyan lehet hozzáadni a szórakoztató CSS hátterét a webhelyeihez

Kategóriák