Futuroscope

2020 óta én készítem a Budapesti Metropolitan Egyetem (METU) végzős Média Design hallgatóinak online 3D-s kiállítását. A Futuroscope névre hallgató éves projekt a diplomamunkák digitális archívumaként szolgál. A koncepciót évről évre finomítom és új funkciókkal egészítem ki, így biztosítva a folyamatosan fejlődő és izgalmas virtuális élményt. A legújabb verzió már egy teljesen új motorra épül, amely lehetővé teszi az összes korábbi tárlat integrálását és a rendszer folyamatos bővítését, valamint jelentős UI/UX fejlesztéseket is tartalmaz.

🎯 A projekt célja

A METU Média design szakán végzett hallgatók diplomamunkáit bemutató virtuális kiállítás létrehozása, ahol a látogatók egy interaktív 3D térben fedezhetik fel a kreatív alkotásokat – anélkül, hogy fizikailag jelen kellene lenniük.

A Futuroscope célja egyszerű volt: „Hogyan hozhatunk létre egy emlékezetes, modern és könnyen hozzáférhető élményt, ami méltón reprezentálja a hallgatók munkáját?"

🧠 Az ötlettől a megvalósításig

A kihívás

A hagyományos diplomakiállítások problémája, hogy:

• Korlátozott időintervallumban elérhetőek
• Földrajzilag behatároltak
• Az online alternatívák (galéria, PDF katalógus) nem adnak valódi „kiállítás-élményt"

A megoldás

Egy valós épület digitális rekonstrukciója, ahol a látogatók szabadon mozoghatnak, felfedezhetik a hallgatók állványait, és egyetlen kattintással megnyithatják a portfóliókat.

🛠️ Technológiai Stack

Frontend

3D modellezés

Design

🏛️ A 3D tér felépítése

A kiállítótér a METU egyik valós épületének átdolgozott modellje, amelyet Blenderben készítettem el. A modell több rétegből áll:

1/models/
2├── futuroscope-model-2024.glb          	# Fő épület model (~2.8 MB)
3├── futuroscope-model-2024-canvases.glb 	# Kiállítási állványok
4├── futuroscope-model-2024-collisions.glb 	# Ütközési mesh
5└── futuroscope-model-2024-metu-statue.glb 	# METU szobor
Copy

Miért külön fájlok?

A teljesítmény optimalizálás érdekében szétválasztottam:

• Vizuális elemeket – amit a látogató lát
• Ütközési mesheket – amivel a fizikai motor dolgozik (egyszerűsített geometria)
• Interaktív elemeket – amihez a portfóliók kapcsolódnak

Ez azt jelenti, hogy a fizikai számítások nem a részletes, magas poligonszámú modellen futnak, hanem egy jelentősen leegyszerűsített változaton – így a weboldalon is gördülékeny marad az élmény.

🎮 Karakter mozgásrendszer

A látogató első személyű nézetből fedezi fel a teret. A mozgás rendszer több komponensből áll:

Irányítási módok

1. Billentyűzet + Egér (asztali)
2. • WASD vagy nyílbillentyűk a mozgáshoz
   • Egérhúzás a körbenézéshez
2. Mobil érintés
3. • Virtuális joystick a mozgáshoz
   • Érintéses kameravezérlés
3. Automatikus séta – Kattintásra a látogató odasétál a kiválasztott ponthoz

Fizikai rendszer

A karakter egy RigidBody + CapsuleCollider kombinációval mozog a térben:

1<RigidBody
2  type="dynamic"
3  mass={1}
4  position={[27.75, 6, 8.4]}
5  enabledRotations={[false, false, false]}
6  friction={1}
7  linearDamping={0.5}
8>
9  <CapsuleCollider args={[0.5, 0.25]} />
10</RigidBody>
Copy

Ez biztosítja, hogy:

• A látogató ne sétáljon át falakon
• Természetes lassulással álljon meg
• A gravitáció reálisan hasson rá

🖼️ Portfóliók megjelenítése

Minden hallgató munkája egy-egy vásznon (canvas) jelenik meg a térben. Amikor a látogató közel sétál egy vászonhoz:

1. A rendszer érzékeli a közelséget (collision sensor)
2. Megjelenik egy lebegő címke a mű nevével
3. A vászon „felizzik" (emissive lighting animáció)
4. Kattintásra megnyílik a teljes portfólió

Portfólió típusok

A rendszer többféle médiatípust támogat:

• YouTube videók – Beágyazott lejátszó
• PDF dokumentumok – Interaktív olvasó
• Képgalériák – Optimalizált WebP formátumban

🌍 Többnyelvűség

A kiállítás magyar és angol nyelven is elérhető. A react-i18next segítségével minden szöveget külön JSON fájlokban tárolok:

1/locales/
2├── hu.json  # Magyar szövegek
3└── en.json  # Angol szövegek
Copy

Ez nemcsak a UI elemekre vonatkozik, hanem a hallgatók munkáinak címeire és leírásaira is.

📱 Beágyazhatóság

A kiállítás beágyazható más weboldalakba is (pl. az egyetem honlapjára) egy egyszerű JavaScript modul segítségével:

1<div class="futuroscope-embed" data-year="2024"></div>
2<script src="futuroscope-embed.js"></script>
Copy

Ez automatikusan létrehoz egy iframe-et és kezeli a fullscreen módot is – így bármely partnerodalon megjeleníthető.

⚡ Teljesítmény optimalizálások

Textúra betöltés

• Custom TextureLoader a lazy loading-hoz
• Kompresszált JPG borítóképek
• Fallback képek betöltési hibák esetén

3D jelenet

• lazy() komponensek a Scene-ekhez
• Suspense wrapper animált betöltéssel
• A Canvas frameloop-ja leáll, amikor portfólió aktív (GPU kímélet)

Model méretezés

• Blenderben optimalizált mesh-ek
• Draco compression a GLB fájlokon

🎬 Összefoglalás

A Futuroscope projekt egy izgalmas példa arra, hogyan lehet a modern webtechnológiákat ötvözni a 3D vizualizációval és a fizikai szimulációval.

A cél az volt, hogy a hallgatók munkái ne egy unalmas PDF-ben jelenjenek meg, hanem egy emlékezetes, interaktív élményben – és úgy gondolom, ez sikerült.

Ha hasonló projekted van, vagy szeretnél egyedi 3D webes élményt létrehozni, keress bátran!