Lunar Frontier

Lunar Frontier is een interactieve 3D webervaring ontwikkeld als schoolopdracht voor het vak Technology 3. De opdracht was om een 3D map te bouwen van een zelfgekozen locatie, waarop gebruikers de omgeving konden verkennen en dingen konden ontdekken. Ik koos voor een futuristische maanbasis en werkte die volledig zelf uit.

De ervaring laat gebruikers vrij navigeren rond de maanbasis via een intuïtieve camerabesturing en een live minimap. Ze kunnen locaties aanklikken om meer informatie te krijgen, een meteoriet laten inslaan via een physics-gebaseerde interactie, en de basis verkennen op hun eigen tempo. De volledige 3D wereld is gebouwd met onder andere React Three Fiber, Rapier Physics en GSAP, en de belangrijkste modellen zijn zelf gemaakt in Blender.

Dit project bracht twee grote uitdagingen met zich mee.

De eerste was het maken van de 3D modellen. Het was de eerste keer dat ik zelfstandig complexe modellen maakte in Blender, daarvoor had ik enkel een aantal tutorials gevolgd. Het maanoppervlak, de habitat, de rakettoren en het lanceerplatform zijn allemaal zelf gemodelleerd. Er is enorm veel tijd in gekropen maar het heeft me ook enorm veel bijgebracht.

De tweede uitdaging was de navigatie en interactie. Ik wou gebruikers zo veel mogelijk vrijheid geven om de basis te verkennen zonder dat ze door de map konden glitchen of te ver van de basis konden weggaan. Dit heb ik opgelost door zoom-to-cursor aan te laten voor de vrijheid, de zoom te clampen en bij het uitzoomen de rotatie automatisch te laten resetten naar het centrum. Voor de interactie met de 3D modellen gebruikte ik naamfiltering op de scene om individuele objecten aan te spreken, en plaatste ik custom hitboxes rond elke locatie zodat het klikken nauwkeurig bleef.

Ik ben heel tevreden met het eindresultaat, en dan vooral met de sfeer van de ervaring. De combinatie van de muziek, de omgevingsverlichting en de UI geeft de webervaring een rustige maar technologisch geavanceerde uitstraling die ik voor ogen had. De live radar is ook goed gelukt.

Twee dingen zou ik anders aanpakken: de manier van klikken op een locatie, momenteel via dubbelklik, zou ik vervangen door klikbare tags bij het hoveren. En het maanoppervlak zelf zou wat realistischer kunnen. Dit project was ook mijn eerste echte kennismaking met React Three Fiber, Rapier en GSAP, en heeft me enorm veel bijgebracht in zowel 3D modelleren als het bouwen van interactieve web ervaringen.