en
  • home
  • services
  • portfolio
  • experiments
0 5
Meeslepend 3D-verhaal maken gebaseerd op scroll interactie

3D storytelling with scroll-based interactions

Bekijk het projectvolgende project:WebAR Facefilter

experimenteel 3D project

We hebben een experimenteel 3D-project gemaakt om een ​​kort verhaal te vertellen dat je in je eigen tempo kunt ontdekken door te scrollen. Een groot deel van onze focus en passie is interactieve verhalen vertellen in websites. In de laatste paar jaren kwamen we erachter dat het gebruik van 3D de mogelijkheden van manieren om het verhaal te vertellen vergroot. Met 2D-interacties beweeg je constant dingen, of jezelf, terwijl 3D je een meeslepende ervaring geeft waarbij je dat tegelijkertijd kunt doen terwijl je aan het verkennen bent.

De uitdaging

In deze 3D storytelling projecten werken we meestal met interacties die worden gestart door muisklikken en toetsaanslagen vanaf je toetsenbord. Om onszelf uit te dagen, wilden we een verhaal vertellen door er doorheen te scrollen. maakt het voor de gebruiker mogelijk om het verhaal te lezen en te beleven in het tempo van zijn voorkeur. Ook is het mogelijk om terug te scrollen als je iets hebt gemist. Dit stelt de gebruiker in staat om te communiceren op een manier die ze gewend zijn, in een wereld die volledig is nieuw voor ze. Dit experiment was een uitdaging, omdat ik persoonlijk niet eerder met deze specifieke scroll-technologie heb gewerkt. En ik heb de lat behoorlijk hoog voor mezelf gelegd om het te combineren met 3D. Ik vond een geweldig 3D-model op Sketchfab en laadde het in de browser. Op dat moment was er niets anders dan die wereld. Er was geen interactie, je kon niet scrollen, niet de wereld rondslepen, geen vliegende tekst. Het was alsof ik naar een foto van de wereld staarde.

Interactie

Nu de interacties. Ik wilde een verhaal vertellen door het gezichtspunt van de gebruiker te verplaatsen door te scrollen. In 3D-webontwikkeling is de camera het zicht van de gebruiker. We kunnen hem positioneren door coördinaten uit de 3D-wereld te gebruiken en die op de camera toe te passen. Aangezien u de coördinaten kent van waar de camera is en waar u de eindpositie van de camera wilt hebben, kunt u het verschil tussen deze posities berekenen en het zo programmeren dat de scrollpositie bepaalt hoe dicht u bij de eindpositie bent . We gebruiken de scrollbar als tijdlijn. Vliegen door de kaart volgens een vooraf bepaald pad is best cool, maar ik wilde iets toevoegen dat de 3D-ervaring nog meer zou verbeteren. Ik wilde dat, als je je muis beweegt, de camera een beetje in die richting zou bewegen. Dit effect moet de gebruiker meer onderdompelen in de 3D-ervaring. In de beginpositie van het verhaal is dit heel aanwezig en later in het verhaal heel subtiel. Maar door deze functie te combineren met scrollen, kun je hoeken bekijken, of details beter bekijken en de 3D nog meer ervaren, vanwege het perspectief.

Storytelling

Terwijl ik nadacht over de korte verhaallijn, bedacht ik dat het toevoegen van 2D-tekst aan het experiment geen recht zou doen. Gelukkig kon ik ook 3D-tekst toevoegen aan de voortgang van de scrollbar (die we als tijdlijn gebruiken). Deze 3D-teksten zouden van positie en tekst veranderen afhankelijk van de tijdlijn. Eindelijk hebben we het mogelijk gemaakt om de gebruiker alle controle te geven zodra het verhaal klaar is. Met alle controle bedoel ik: het mogelijk maken om rond te pannen, de wereld te draaien en in en uit te zoomen. We hebben dit gedaan, zodat je de prachtige 3D-kaart zelf kunt ervaren en gewoon een beetje kunt spelen.

Conclusie

Ik hoop dat je genoten hebt van het experiment en deze uitleg over de functionaliteit! Ik kan je nog veel meer vertellen over dit experiment. Als je vragen hebt, meer wilt weten of feedback hebt, aarzel dan niet om een reactie achter te laten op onze socials!

Bekijk het projectvolgende project:WebAR Facefilter

this is where
the magic happens.


Kom in contact
A supporting branded image of Level30Wizards branding
Logo of Level30WizardsVoorhelmstraat 25, Haarlem, the NetherlandsKVK: 72524383

Here

HomeServicesPortfolioExperiments
© 2018-2022