THREEJS WEBGL TIPPEK KEZDŐ HIBÁK

A Weblapok 3. Dimenziója

Three-JS, a keretrenszer, ami extra dimenziót add a honlapoknak

Three-JS, a keretrenszer, ami extra dimenziót add a honlapoknak

ThreeJS Weblap WebGL
ThreeJS Weblap WebGL

A ThreeJS egy JavaScript alapú keretrendszer, amit 2010-ben Ricardo Cabello publikált először a GitHub-on. Tömören egy olyan JavaScript könyvtár, aminek segítségével relatíve jóval könnyebben tudunk létrehozni 3D-s kép rendereléseket böngészőn belül (Safari kivétel, de Safari mi alól nem kivétel). Ricardo Cabello más néven Mr. doob. Ha ThreeJS-szel dolgozol, akkor ez a név nagyon hamar fel fog bukkanni. Nagyon sok fórumon nagyon sok kérdésre Ő adja a válaszokat. Ami nyilván elég király tekintve, hogy nála jobban nem ismeri senki a ThreeJS-t.

A “leanring-curve” nem kifejezetten egyszerű. Legalábbis számomra nem volt az (és valjuk be még mindig nem az). Nagyjából 2 éve volt az első alkalom, hogy megpróbáltam vele valamit létrehozni. Majd hamar feladtam és fél év múlva újra megpróbáltam, majd megint feladtam és újabb félév után megint megpróbáltam majd feladtam és megint és most itt vagyunk. Sajnos számos olyan buktatója van, amiken egyszerűen át kell esni ahhoz, hogy eljussunk arra a pontra amikor már tutorialtól függetlenül magunktól is képesek vagyunk komplexebb “scene”-ket létrehozni.

Nincs túl sok célja ennek a cikkemnek azt leszámítva, hogy a SEO értékeimen javítsak 🙂 De ha már itt vagyunk, akkor összeszedek egy két tapasztalatot, ami esetleg valaki másnak segíteni tud a kezdeti időkben és ezáltal hamarabb el tud jutni egy olyan szintre, ahol már sokkal élvezetesebb ezzel a keretrendszerrel dolgozni.

#1: ThreeJS Verzió

Érdemes szemelőt tartani, hogy mi a projektünk aktuális ThreeJS verziója. Ez a keretrendszer kifejezetten nem azok közé tartozik, amik egyszer publikálva lettek majd teljesen magukra lettek hagyva. Rendszeresen jönnek az újabb verziók. Ez nyilván egy pozitívum mivel a jövő tekintetében biztosabban tudunk építeni rá, de másrészről alap class-ok és funkciók kerülnek lecserélésre. Ennek az a következménye, hogy gyakran megesik, hogy mindent helyesen lekövettünk a tutoriálunk alapján a dolgok mégsem úgy működnek mint azt elvárnánk. Ez egyszerre érinti a class-ok funkciók meghívását illetve ThreeJS alkönyvtárak importálása. Tehát az első üzenet az, hogy ha valami nem működik és minden keresgélésnek az a vége, hogy mindennek működnie kellene és mégsem működik, akkor gyakran az a megoldás kulcsa, hogy azóta sok minden változott az újabb verzióban.

#2: ThreeJS Scene-hez adás

Elég egyértelmű, de Trust me on that…a kelleténél sokkal gyakrabban megesik, hogy a probléma megoldásának a nyitja az egyszerűen az, hogy a geometria, a fény, a mesh vagy bármely használni kívánt objektum egyszerűen nincsen hozzáadva a scene-hez. Tehát létrehoztuk atállítottuk az attributumait etc, csak egyszerüen végül elfelejtettük hozzáadni az aktuális scene-hez.

#3: Mindig Logolni

Sosem tudom, hogy Console Log-gal troubleshoot-olni mennyire profi vagy sem. Az biztos, hogy a kezdeti időkben es most teljesen őszinte leszek. Én mindent alert(“…”)-tal debuggoltam. Gondolom nem kell mondani, hogy mennyire nem volt praktikus. Illetve azt sem tudom megmondani, hogy egyáltalán az agyamnak melyik része gondolta azt, hogy ez egy jó ötlet. Anywaaayyyy amit mondani akarok az pusztán az, hogy ThreeJS-ben egy kamerán keresztül a tér valamely pontján nézünk valamilyen irányba és reménykedünk benne, hogy az object-ünk pont a kamera elött van a megfelelő méretben 😛
Egy szó mint száz. Föleg a kezdeti időkben nagyon sokat kell használni a Logot. Sokszor futunk bele olyan felállásokba, hogy nem az történik a képernyőn mint, amit leírtunk. Így nyilván nagyon praktikus nem csak a canvas-szon hanem a logban is követni a változtatások menetét.

#4: ThreeJS Orbit Controls

ThreeJS egy alkönyvtárában található az OrbitControls, ami egy olyan modul amit iszonyat egyszerű hozzáadni a scene-hez viszont instant navigálhatóvá teszi a kamerát, aminek köszönhetően sokkal egyszerűbben ki lehet, olyan problémákat szűrni, mint például ha Blender-böl rosszul exportáljuk ki a 3D modellünket és nem jó a mérete vagy nem globális nulla pozíciónál helyezkedik el.

#5 ThreeJS GUI Használata

A GUI a ThreeJS egy beépített modulja, aminek segítségével a jobb felső sarokba egy felugró ablakot tudunk helyezni, amihez aztán a scene különböző elemeinek tulajdonságait tudjuk futtatás közben módosítani. Pl.: Fények erőssége, kamera pozíciója, objektumok méretei stb. Igen hasznos tud lenni!

#6 ThreeJS LightHelper

A LightHelper újfent egy olyan modul, ami pusztán csak azért készült, hogy a fejlesztést segítse. A LightHelper célja, hogy a scene-hez tartozó fényeink köré egy áttetsző kockatestet rajzol, aminek segítségével könnyebben el tudjuk helyezni a fényeket. Enélkül csak tippelni tudunk, hogy hol van a fényünk mivel alapvetően a fényeink fizikálisan nem látszódnak pusztán az effektjük mint fényerő és tükröződés.

REKLÁM HELYE

Végezetül nézd meg a cikkírásakor éppen aktuális ThreeJS projektet, amin dolgoztam. Éppen a 2021-es évet zárjuk, ezért készítettem egy kis AJÁNDÉKOT régi illetve aktuális ügyfeleim számára.