Scroll navigation

[Pieter_van_Stee]

Hi there,
I’m working on a project in which I would like to tell a story based on a storyline.
For this I’ve done some research and also have some references as a guideline.
But to get things going I’d like some advice on how to handle things here.

To get started this is wat I’m after:

• A visual storyline on the side or bottom
• A start and an end
• Keypoints in between on specific positions representing (main) chapters
• A predefined path set in blender/3dsMax
• Navigating by scrolling, which moves the camera forward/backward on the timeline
• When we start scrolling from a chapter point, the navigation starts and smoothly goes to the next chapterpoint with an ease motion. (Preferably the option to turn this on/off)

Optional:

• Add the chapter point dynamically to the url (?section=11) and update this depending on the position/chapter we’re at in the storyline.

Here are a few interesting references, in which this was used:
Blue Marine Foundation
Interesting here is how the WebGL is blended with the html.

Medal of Honor
Medal of Honor > Behance

Any advice or guidance to get started on this would be very much appreciated!
We’ve previously been able to get this basically working in threejs, but I’m looking into the option to be able to use this in babylon as we’re looking into making the switch.

Thanks
Pieter

[sebavan]

I am not sure there is anything particular and your 3 experience should migrate nicely. Your mouse wheel event will have to be handled on your side to launch your camera animations.

@carolhmj did an amazing camera job when she started, and I bet she could provide the ref back ?

[inteja]

@Pieter_van_Stee take a look at the work by @Pryme8 here:

Animate Scene from Scroll Position EZPZ

So I made this today: I know its not BJS, but I have seen people request for easy ways to animate or change values on a scene from the scroll position of the page. All the other Libraries that are out there require a ton of extra steps and its a super pain. This is to alleviate that stress… If you have any features, you want to let me know or if there are bugs please let me know ASAP. Here is a quick preview of it in action, ill put up a live example here at some point once I have time: …

I’ve used this technique to good effect.

Also, have a look at something like Fullpage.js which allows you to trigger things on enter/leave/scroll also.

[inteja]

Something worth considering with scroll navigation is UX can vary quite a lot depending on responsive width and height, and whether the user is using a mouse wheel with smooth scroll, stepped scroll or a trackpad or touch screen (which are all different as well).

I’ve worked on two such projects which ultimately, after extensive testing, were converted to prev/next click to traverse forward/backward because scroll behaviours simply vary too much between devices and users to provide a consistent user experience.

[Pryme8]

That’s something for me to consider with my API. I could make it percent base possibly.

[Pieter_van_Stee]

Good point, we noticed the same.
But as I’m not a big fan of giving users completely free movement (also I hate scrolling on almost all online content) I would like to implement a listener to see if a scroll is initiated, and in which direction.
And then start a predefined motion, towards the next keypoint.
This would cause a way more uniform interaction on different devices.

As we noticed this went quite smoothly on mac/touch devices, but on windows with the rough scroll-wheel it wasn’t very smooth.

Thanks for the input!
Pieter

[Uve_Deverastegui]

I’ve been also wanting to know how to create at least a web-Scroll-XR experience like in the babylon homepage: Babylon.js Product Page Demo
but using Unity Babylon tool kit exporter.

@MackeyK24 I am willing to pitch in for a tutorial for this, I think we all should vote for a tutorial for this. It will be very much appreciated.

[Pryme8]

The way I always set it up was full page “frames” where the hotspots but had no content in them and they where hidden by an “action div” that was where all the content was really being rendered. Then the scrolling was always a fixed amount because the page was always in the backend a set number of fixed height elements depending on the clients rendering size. Worked really well for a few projects.

Also you can filter the returned results and interpolate it different ways to smooth the results, usually using the raw scroll value was not the best practice.

[Pieter_van_Stee]

@Pryme8

Also you can filter the returned results and interpolate it different ways to smooth the results, usually using the raw scroll value was not the best practice.

Indeed, I’ve also been looking into locomotive scroll, have seen nice things from that one!

These solutions all seem to be based on a container with multiple vh which scrolls in the bg.
However, we’re looking into an option to purely scroll in our 3D canvas, or to use the scroll to ‘drag’ yourself forward or backward… or set a motion into effect which starts you on a predefined camera track.

Any examples on that are also welcome, always interested in how others handle this approach, as we managed to export our camera animations over a predefined path, only the adjusting, finetuning & baking process could use an improvement. As this often breaks the parametric setup.

Thanks for the tips