{"id":50,"date":"2021-12-09T17:17:52","date_gmt":"2021-12-09T17:17:52","guid":{"rendered":"https:\/\/webapp.dvdv.hu\/fejlesztes\/?p=50"},"modified":"2021-12-30T18:31:52","modified_gmt":"2021-12-30T17:31:52","slug":"threejs-webgl-immerziv-vr-av-2022","status":"publish","type":"post","link":"https:\/\/webapp.dvdv.hu\/fejlesztes\/threejs-webgl-immerziv-vr-av-2022\/","title":{"rendered":"A Weblapok 3. Dimenzi\u00f3ja"},"content":{"rendered":"\n
\n
\n
\n
\n

Three-JS, a keretrenszer, ami extra dimenzi\u00f3t add a honlapoknak <\/h2>\n<\/div><\/section>\n\n\n\n
\n

Three-JS, a keretrenszer, ami extra dimenzi\u00f3t add a honlapoknak <\/h2>\n<\/div><\/section>\n\n\n\n

<\/p>\n<\/div>\n\n\n\n

\n
\"ThreeJS
ThreeJS Weblap WebGL<\/figcaption><\/figure>\n<\/div>\n<\/div>\n<\/div><\/section>\n\n\n\n
\n
\n
\n

A ThreeJS<\/a> egy JavaScript alap\u00fa keretrendszer, amit 2010-ben Ricardo Cabello publik\u00e1lt el\u0151sz\u00f6r a GitHub-on. T\u00f6m\u00f6ren egy olyan JavaScript k\u00f6nyvt\u00e1r, aminek seg\u00edts\u00e9g\u00e9vel relat\u00edve j\u00f3val k\u00f6nnyebben tudunk l\u00e9trehozni 3D-s k\u00e9p renderel\u00e9seket b\u00f6ng\u00e9sz\u0151n bel\u00fcl (Safari kiv\u00e9tel, de Safari mi al\u00f3l nem kiv\u00e9tel). Ricardo Cabello m\u00e1s n\u00e9ven Mr. doob. Ha ThreeJS-szel dolgozol, akkor ez a n\u00e9v nagyon hamar fel fog bukkanni. Nagyon sok f\u00f3rumon nagyon sok k\u00e9rd\u00e9sre \u0150 adja a v\u00e1laszokat. Ami nyilv\u00e1n el\u00e9g kir\u00e1ly tekintve, hogy n\u00e1la jobban nem ismeri senki a ThreeJS-t.<\/p>\n<\/div>\n<\/div>\n<\/div><\/section>\n\n\n\n

A “leanring-curve” nem kifejezetten egyszer\u0171. Legal\u00e1bbis sz\u00e1momra nem volt az (\u00e9s valjuk be m\u00e9g mindig nem az). Nagyj\u00e1b\u00f3l 2 \u00e9ve volt az els\u0151 alkalom, hogy megpr\u00f3b\u00e1ltam vele valamit l\u00e9trehozni. Majd hamar feladtam \u00e9s f\u00e9l \u00e9v m\u00falva \u00fajra megpr\u00f3b\u00e1ltam, majd megint feladtam \u00e9s \u00fajabb f\u00e9l\u00e9v ut\u00e1n megint megpr\u00f3b\u00e1ltam majd feladtam \u00e9s megint \u00e9s most itt vagyunk. Sajnos sz\u00e1mos olyan buktat\u00f3ja van, amiken egyszer\u0171en \u00e1t kell esni ahhoz, hogy eljussunk arra a pontra amikor m\u00e1r tutorialt\u00f3l f\u00fcggetlen\u00fcl magunkt\u00f3l is k\u00e9pesek vagyunk komplexebb “scene”-ket l\u00e9trehozni.<\/p>\n\n\n\n

Nincs t\u00fal sok c\u00e9lja ennek a cikkemnek azt lesz\u00e1m\u00edtva, hogy a SEO \u00e9rt\u00e9keimen jav\u00edtsak \ud83d\ude42 De ha m\u00e1r itt vagyunk, akkor \u00f6sszeszedek egy k\u00e9t tapasztalatot, ami esetleg valaki m\u00e1snak seg\u00edteni tud a kezdeti id\u0151kben \u00e9s ez\u00e1ltal hamarabb el tud jutni egy olyan szintre, ahol m\u00e1r sokkal \u00e9lvezetesebb ezzel a keretrendszerrel dolgozni. <\/p>\n\n\n\n

#1: ThreeJS Verzi\u00f3<\/h2>\n\n\n\n

\u00c9rdemes szemel\u0151t tartani, hogy mi a projekt\u00fcnk aktu\u00e1lis ThreeJS verzi\u00f3ja. Ez a keretrendszer kifejezetten nem azok k\u00f6z\u00e9 tartozik, amik egyszer publik\u00e1lva lettek majd teljesen magukra lettek hagyva. Rendszeresen j\u00f6nnek az \u00fajabb verzi\u00f3k. Ez nyilv\u00e1n egy pozit\u00edvum mivel a j\u00f6v\u0151 tekintet\u00e9ben biztosabban tudunk \u00e9p\u00edteni r\u00e1, de m\u00e1sr\u00e9szr\u0151l alap class-ok \u00e9s funkci\u00f3k ker\u00fclnek lecser\u00e9l\u00e9sre. Ennek az a k\u00f6vetkezm\u00e9nye, hogy gyakran megesik, hogy mindent helyesen lek\u00f6vett\u00fcnk a tutori\u00e1lunk alapj\u00e1n a dolgok m\u00e9gsem \u00fagy m\u0171k\u00f6dnek mint azt elv\u00e1rn\u00e1nk. Ez egyszerre \u00e9rinti a class-ok funkci\u00f3k megh\u00edv\u00e1s\u00e1t illetve ThreeJS alk\u00f6nyvt\u00e1rak import\u00e1l\u00e1sa. Teh\u00e1t az els\u0151 \u00fczenet az, hogy ha valami nem m\u0171k\u00f6dik \u00e9s minden keresg\u00e9l\u00e9snek az a v\u00e9ge, hogy mindennek m\u0171k\u00f6dnie kellene \u00e9s m\u00e9gsem m\u0171k\u00f6dik, akkor gyakran az a megold\u00e1s kulcsa, hogy az\u00f3ta sok minden v\u00e1ltozott az \u00fajabb verzi\u00f3ban.<\/p>\n\n\n\n

#2: ThreeJS Scene-hez ad\u00e1s<\/h2>\n\n\n\n

El\u00e9g egy\u00e9rtelm\u0171, de Trust me on that…a kellet\u00e9n\u00e9l sokkal gyakrabban megesik, hogy a probl\u00e9ma megold\u00e1s\u00e1nak a nyitja az egyszer\u0171en az, hogy a geometria, a f\u00e9ny, a mesh vagy b\u00e1rmely haszn\u00e1lni k\u00edv\u00e1nt objektum egyszer\u0171en nincsen hozz\u00e1adva a scene-hez. Teh\u00e1t l\u00e9trehoztuk at\u00e1ll\u00edtottuk az attributumait etc, csak egyszer\u00fcen v\u00e9g\u00fcl elfelejtett\u00fck hozz\u00e1adni az aktu\u00e1lis scene-hez.<\/p>\n\n\n\n

#3: Mindig Logolni<\/h2>\n\n\n\n

Sosem tudom, hogy Console Log-gal troubleshoot-olni mennyire profi vagy sem. Az biztos, hogy a kezdeti id\u0151kben es most teljesen \u0151szinte leszek. \u00c9n mindent alert(“…”)-tal debuggoltam. Gondolom nem kell mondani, hogy mennyire nem volt praktikus. Illetve azt sem tudom megmondani, hogy egy\u00e1ltal\u00e1n az agyamnak melyik r\u00e9sze gondolta azt, hogy ez egy j\u00f3 \u00f6tlet. Anywaaayyyy amit mondani akarok az puszt\u00e1n az, hogy ThreeJS-ben egy kamer\u00e1n kereszt\u00fcl a t\u00e9r valamely pontj\u00e1n n\u00e9z\u00fcnk valamilyen ir\u00e1nyba \u00e9s rem\u00e9nyked\u00fcnk benne, hogy az object-\u00fcnk pont a kamera el\u00f6tt van a megfelel\u0151 m\u00e9retben \ud83d\ude1b
Egy sz\u00f3 mint sz\u00e1z. F\u00f6leg a kezdeti id\u0151kben nagyon sokat kell haszn\u00e1lni a Logot. Sokszor futunk bele olyan fel\u00e1ll\u00e1sokba, hogy nem az t\u00f6rt\u00e9nik a k\u00e9perny\u0151n mint, amit le\u00edrtunk. \u00cdgy nyilv\u00e1n nagyon praktikus nem csak a canvas-szon hanem a logban is k\u00f6vetni a v\u00e1ltoztat\u00e1sok menet\u00e9t.<\/p>\n\n\n\n

#4: ThreeJS Orbit Controls<\/h2>\n\n\n\n

ThreeJS egy alk\u00f6nyvt\u00e1r\u00e1ban tal\u00e1lhat\u00f3 az OrbitControls, ami egy olyan modul amit iszonyat egyszer\u0171 hozz\u00e1adni a scene-hez viszont instant navig\u00e1lhat\u00f3v\u00e1 teszi a kamer\u00e1t, aminek k\u00f6sz\u00f6nhet\u0151en sokkal egyszer\u0171bben ki lehet, olyan probl\u00e9m\u00e1kat sz\u0171rni, mint p\u00e9ld\u00e1ul ha Blender-b\u00f6l rosszul export\u00e1ljuk ki a 3D modell\u00fcnket \u00e9s nem j\u00f3 a m\u00e9rete vagy nem glob\u00e1lis nulla poz\u00edci\u00f3n\u00e1l helyezkedik el.<\/p>\n\n\n\n

#5 ThreeJS GUI Haszn\u00e1lata<\/h2>\n\n\n\n

A GUI <\/a>a ThreeJS egy be\u00e9p\u00edtett modulja, aminek seg\u00edts\u00e9g\u00e9vel a jobb fels\u0151 sarokba egy felugr\u00f3 ablakot tudunk helyezni, amihez azt\u00e1n a scene k\u00fcl\u00f6nb\u00f6z\u0151 elemeinek tulajdons\u00e1gait tudjuk futtat\u00e1s k\u00f6zben m\u00f3dos\u00edtani. Pl.: F\u00e9nyek er\u0151ss\u00e9ge, kamera poz\u00edci\u00f3ja, objektumok m\u00e9retei stb. Igen hasznos tud lenni!<\/p>\n\n\n\n

#6 ThreeJS LightHelper <\/h2>\n\n\n\n

A LightHelper<\/a> \u00fajfent egy olyan modul, ami puszt\u00e1n csak az\u00e9rt k\u00e9sz\u00fclt, hogy a fejleszt\u00e9st seg\u00edtse. A LightHelper c\u00e9lja, hogy a scene-hez tartoz\u00f3 f\u00e9nyeink k\u00f6r\u00e9 egy \u00e1ttetsz\u0151 kockatestet rajzol, aminek seg\u00edts\u00e9g\u00e9vel k\u00f6nnyebben el tudjuk helyezni a f\u00e9nyeket. En\u00e9lk\u00fcl csak tippelni tudunk, hogy hol van a f\u00e9ny\u00fcnk mivel alapvet\u0151en a f\u00e9nyeink fizik\u00e1lisan nem l\u00e1tsz\u00f3dnak puszt\u00e1n az effektj\u00fck mint f\u00e9nyer\u0151 \u00e9s t\u00fckr\u00f6z\u0151d\u00e9s.<\/p>\n\n\n\n

REKL\u00c1M HELYE<\/h2>\n\n\n\n

V\u00e9gezet\u00fcl n\u00e9zd meg a cikk\u00edr\u00e1sakor \u00e9ppen aktu\u00e1lis ThreeJS projektet, amin dolgoztam. \u00c9ppen a 2021-es \u00e9vet z\u00e1rjuk, ez\u00e9rt k\u00e9sz\u00edtettem egy kis AJ\u00c1ND\u00c9KOT<\/a> r\u00e9gi illetve aktu\u00e1lis \u00fcgyfeleim sz\u00e1m\u00e1ra.<\/p>\n","protected":false},"excerpt":{"rendered":"

M\u00e1r t\u00f6bb mint 10 \u00e9ve k\u00f6zt\u00fcnk van \u00e9s nagyban k\u00e9sz\u00fcl a mesteri tervre, hogy megh\u00f3d\u00edtsa az eg\u00e9sz vil\u00e1gh\u00e1l\u00f3t. Csak egy b\u00f6kken\u0151 van a tervben \ud83d\ude1b […]<\/p>\n

Read More… from A Weblapok 3. Dimenzi\u00f3ja<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":73,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[7,8],"tags":[4,5,3,6],"class_list":["post-50","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-framework","category-javascript","tag-framework","tag-javascript","tag-threejs","tag-webgl"],"acf":{"slides":null},"_links":{"self":[{"href":"https:\/\/webapp.dvdv.hu\/fejlesztes\/wp-json\/wp\/v2\/posts\/50","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webapp.dvdv.hu\/fejlesztes\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webapp.dvdv.hu\/fejlesztes\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webapp.dvdv.hu\/fejlesztes\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/webapp.dvdv.hu\/fejlesztes\/wp-json\/wp\/v2\/comments?post=50"}],"version-history":[{"count":12,"href":"https:\/\/webapp.dvdv.hu\/fejlesztes\/wp-json\/wp\/v2\/posts\/50\/revisions"}],"predecessor-version":[{"id":166,"href":"https:\/\/webapp.dvdv.hu\/fejlesztes\/wp-json\/wp\/v2\/posts\/50\/revisions\/166"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webapp.dvdv.hu\/fejlesztes\/wp-json\/wp\/v2\/media\/73"}],"wp:attachment":[{"href":"https:\/\/webapp.dvdv.hu\/fejlesztes\/wp-json\/wp\/v2\/media?parent=50"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webapp.dvdv.hu\/fejlesztes\/wp-json\/wp\/v2\/categories?post=50"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webapp.dvdv.hu\/fejlesztes\/wp-json\/wp\/v2\/tags?post=50"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}