0 — 5

3D storytelling with scroll-based interactions

Visit the project next project:WebAR Facefilter

experimental 3D project

We created an experimental 3D project to tell a short story that you can discover at your own pace, by scrolling. A big part of our focus and passion is interactive storytelling in websites. In the last couple of years we figured out that using 3d increases the possibilities of ways on how to tell the story. With 2d interactions you’re constantly either moving things or yourself around while 3d gives you an immersive experience where you can do that at the same time as you’re exploring.

The challenge

In these 3d story telling projects, we’re usually working with interactions that are initiated by mouse-clicks and key-presses from your keyboard. To challenge ourselves, we wanted to tell a story by scrolling through it. This makes it possible for the user to read and experience the story in their preferred tempo. Also it’s possible to scroll backwards if you’ve missed something. This enables the user to interact in a way that they are used to, in a world that’s completely new for them. The reason that we wanted to experiment with this right now, is that scrolling has always been difficult to combine with 3d in web development. There were some workarounds, but now new technology makes it possible to create an animation timeline that you can manipulate by scrolling. This experiment was challenging, because I personally haven’t worked with this particular scroll-technology before. And I’ve set the bar pretty high for myself trying to combine it with 3d, right away. I found an amazing 3d world model on Sketchfab and loaded it into browser. At this point there was nothing but that world. There was no interactions, no scrolling, no dragging the world around, no flying text. It was like staring at a picture of the world.

Interaction

Now the interactions. I wanted to tell a story by moving the users point of view by scrolling. In 3D web development the camera is the users view. We can position it by using coordinates from the 3D world and applying that on the camera. Since you know the coordinates of where the camera is, and where you want the end position of the camera to be, you can calculate the difference between these positions and program it so that the scroll position determines how close you are to the end-position. We use the scroll-bar as timeline. Flying through the map following a predetermined path is pretty cool. But I wanted to add something that would improve the 3D experience even more. I wanted that, if you move your mouse, the camera would slightly move in that direction. This effect should immerse the user more into the 3D experience. At the start-position of the story, this is very present and later in the story very subtile. But combining this feature with the scrolling, you could peek corners, or look closer at details and experience the 3d even more, because of the perspective.

Storytelling

While thinking about the short storyline, I figured that adding 2d text to the experiment wouldn’t do it justice. Luckily I was able to add 3d text to the scroll-bar-progress (that we use as timeline) as well. These 3d texts would change positions and text depending on the timeline. At last we made it possible to give the user all the control once the story is done. By all the control, I mean: making it possible to pan around, rotate the world and zoom in and out. We’ve done this, so you can experience the magnificent 3d map for yourself and just play around for a little bit.

Last words

I hope you enjoyed the experiment and this explanation on the functionality! Theres a lot more I can tell you about this experiment. If you have any questions, want to know more, or have some feedback, don’t hesitate to leave a comment on our socials!

Visit the project next project:WebAR Facefilter

this is where
the magic happens.

Get in contact