![3D modellek importálása three.js segítségével](/storage/blog/threejs.png?1725754315)
Bemutatás
Mi az a three.js?
A Three.js egy fantasztikus, nyílt forráskódú 3D grafikai könyvtár, ami lehetővé teszi, hogy valós idejű 3D grafikákat hozzunk létre a böngészőben. Kezdetben 2010-ben indult, de azóta folyamatosan fejlődik egy nagy és lelkes közösség támogatásával. Ha még több részletre vagy kíváncsi, látogass el a Three.js GitHub repojára.
Lássunk is neki!
Kiinduló html oldal
Először is, hozzunk létre egy alap HTML oldalt, ami a Three.js projektünk alapját képezi.
Hozzunk létre egy egyszerű jelentet
Végigvezetlek, hogyan tudsz egy nagyon egyszerű jelentet bele varázsolni a weboldaladba
- Első lépésként beimportáljuk ezt a könyvtárat, hogy hozzáférhessünk az összes szükséges funkcióhoz.
- Inicializáljuk a 3D teret és a kamerát. Gondolj a térre, mint egy virtuális világra, ahol minden objektum él. A kamera pedig olyan, mint egy fényképezőgép, amely ezt a világot nézi.
- Hozzunk létre egy WebGL renderert, amely megjeleníti a 3D objektumokat a képernyőn. Ezt a renderert hozzáadjuk a HTML oldalhoz.
- Készítsünk egy egyszerű 3D kockát, amit a térben elhelyezünk. A kocka három fő elemből áll: geometria, anyag és hálózat (mesh).
- Végül definiálunk egy animációs függvényt, amely folyamatosan forgatja a kockát. Ez a függvény időzített ciklusokat használ, hogy megváltoztassa a kocka forgását, majd újra renderelje a jelenetet a kamerával.
Ha minden jól csináltunk, akkor egy olyan kocka fog megjelnni a képernyőnkön, amely forog. Sajnos ez így nem igazán izgi...
Bonyolítsuk a dolgokat!
Koncepció: Szeretnék létrehozni egy olyan weboldalt, ahol a szöveg középen helyzkedik el, és mondjuk kettő város model van a weboldal bal és a jobb szélén, körbeölelve a szöveget.
Erre létre is hoztam egy nagyon egyszerű kis rajzot, ami bemutatja hogyan gondoltam el az oldal felépítését:
A modelt a következő repóból tudjátok letölteni: https://github.com/mrdoob/three.js/blob/master/examples/models/gltf/LittlestTokyo.glb
Ez a model a LittlestTokyo névre hallgat, lowpoly stílusban egy japán városrész aminek a készítője Glen Fox - https://www.artstation.com/glenatron
Előkészületek
- Generáljunk egy új projektet vite segítségével a vite hivatalos dokumentációja szerint (https://vitejs.dev/guide/)
- Készítsünk egy models, images mappát a src-ba (ezekben a mappákban fognak élni az asseteink, képek, modellek)
- Hozzunk létre egy alap style.css fájlt és egy script.js-t
- NPM segítségével telepítsük fel a Three.js-t
- npm install --save three
Hogyan nézzen ki az index.html?
Mivel nagyon alap, kis egyszerű oldalról van szó, ezért itt alig lesz dolgunk!
- Alap HTML struktúra
- Hívjuk be a stíluslapunkat, készítsünk egy alapvető konténert ami tartalmazza a Lorem ipsum szöveget.
- Készítsünk egy egyedi azonosítóval ellátot div-et (ebbe fogjuk belehívni a three-js jelentünket)
- Majd importáljuk be a scriptünket type=“module”-ként
Hogyan nézzen ki a styles.css?
Ez a stíluslap egyszerűen igazítja középre a szöveget, beimportált fontot használ, és létrehoz egy abszolút pozicionált háttérképet a háttérnek, ami fix marad, ahogy görgetsz. Ezen kívül további egyedi stílusokat és formázásokat is hozzáadhatsz, amelyek megfelelnek az oldalad designjának.
Hogyan nézzen ki a script.js?
Elsőnek importáljuk a three.js és néhány addon könyvtár moduljait. Ezek a modulok segítenek a 3D jelenet létrehozásában és a modellek betöltésében.
- A DRACOLoader egy hasznos kiegészítő, amely lehetővé teszi tömörített 3D modellfájlok problémamentes betöltését. Ezen fájlok használatával lenyűgöző és részletgazdag 3D modellek jeleníthetők meg a weboldalon.
- A GLTFLoader egy másik kritikus elem a projektünkben, ami a 3D modellek beolvasásáért felelős. Segítségével könnyedén integrálhatjuk és kezelhetjük a kívánt 3D objektumokat a webes jelenetünkben.
- A "container" egy HTML div elemre mutat, amely az oldalunkon található. Ez a div fogja majd befogadni és megjeleníteni a 3D jelenetet, amit létrehozunk.
- A "renderer" egy kulcsfontosságú komponens, amely felelős a jelenetünk rendereléséért. Az "antialias" tulajdonság pedig az élsimítást aktiválja, ami a jelenetünk grafikai minőségét javítja.
- A "scene" változó egy "Scene" objektumot hoz létre, amely a 3D jelenet alapját képezi. Itt kerülnek elhelyezésre és kezelésre a modellek, színek, fények és kamerák.
- A "camera" változó a kamera objektumát reprezentálja, amelyen keresztül a jelenetet megjelenítjük. A "PerspectiveCamera" segítségével létrehozzuk a perspektívás nézetet, ami lehetővé teszi az objektumok távolságának és mélységének érzékeltetését.
- Végül, de nem utolsósorban, a "PMREM generátor" egy komponens, amely a fényterjedést szimulálja a jelenetben, hozzájárulva ezzel a valósághűbb és életszerűbb megjelenítéshez.
Létrehozunk egy háttér textúrát, amely egy egyszerű PNG kép, és beállítjuk a háttérképünket, hogy teljesen bevonja a jelenet háttérét.
A jelenetnek beállítjuk a fényterjedését (environment), amely megvilágítja az objektumokat a jelenetben, létrehozva ezzel a megfelelő atmoszférát.
A kamera pozícióját az x, z és y tengelyek mentén beállítjuk az igények szerint.
Megadjuk a DRACO dekóder elérési útvonalát, amely lehetővé teszi a tömörített modellfájlok dekódolását.
A GLTF loader segítségével betöltjük a 3D modelleket, majd beállítjuk a méretüket, pozíciójukat és hozzárendeljük őket a jelenethez.
Ezt a folyamatot megismételjük egy második modell esetén is, hogy ugyanarra a modellre alkalmazzuk az előző lépéseket.
Végül, de nem utolsó sorban, létrehozzuk a "mixer" objektumot, és a modellhez rendelt animációt a "clipAction" függvény segítségével játszatjuk le. Ez lehetővé teszi az animáció szimulálását, és csak az egyik modell animálására korlátozódik jelenleg.
Az animation loop
Az "requestAnimationFrame(animate)" sor a böngésző beépített "requestAnimationFrame" funkcióját alkalmazza az animációs ciklus létrehozására. Ennek a célja, hogy biztosítsa az animáció simaságát, és lehetővé tegye a böngésző számára, hogy a lehető legmagasabb képkockasebességgel futtassa az animációt.
Amennyiben rendelkezünk egy "mixer" objektummal, akkor az "update" metódust hívjuk meg a "clock.getDelta" függvénnyel, amely visszaadja az aktuális és az előző frissítés között eltelt időt másodpercben. Ez a lépés szükséges annak érdekében, hogy az animáció simán fusson.
Ha pedig van egy "mixer2" objektumunk, akkor azt a "y" tengely körül forgatjuk balra, egyenletes sebességgel.
Ezzel a részletezéssel túl vagyunk az oldalunk nagy részén, de még két rendkívül fontos lépés van hátra.
Oldal újraméretezés kezelése és görgetés
Ha újraméreteznénk az oldalt, sajnos azt tapasztalhatjuk, hogy a kamera, a háttér és az aspect ratio nem igazán követő a viewportot.
Ezt nagyon egyszerűen kezelhetjük:
Ezek az eseménykezelők beállítják a kamera aspektusát az ablak méretéhez, frissítik a kamera vetítési mátrixát, és beállítják a WebGL renderelő felület méretét az ablak méreteihez a méretezés eseményére. Emellett figyelik a görgetést, és a kapott görgetési mérték alapján módosítják a modell rotációját.
Végeredmény