Switching Between Multiple Views / Scenes on Scroll

Questions
1

Hi guys, I’ve been really inspired by some websites and I would love to know how some of the effects in those websites have been made. Specifically what I’m trying to figure out is how to switch between views / scenes on scroll. To my understanding there is only one canvas being used, but there are transitions between views or scenes in the canvas on scroll, creating a beautiful effect. I’m inspired by the website: https://www.deso.com/

I understand that the different views / scenes have camera movements, but the transition itself from one view to another - how would you recon it’s done, exactly?

A great example from the website can be seen in the following video:

Does anyone know / have tips on how this is done?

2

In 99% of cases “it’s done how it’s done”. And while I understand that’s not much of a satisfying answer - my point is, there’s no single solution.

It’s “a means to an end” kind of thing - you can create several canvases that you scroll through; you can have a single canvas and a single big GLB scene, that gives a visual effect of transitions; you can use keyframe animations in a 3D model; you can use material shaders; you can use postprocessing combined with stencil portals. It’s just a matter of creativity - however you’ll do it, and it’ll work, will be the right solution :relieved:

3

I understand that there are probably many methods of achieving this, but I’m asking the community for tips on what alternatives exist to create something like this :blush:

4

Besides the options listed above (these were actual approaches you can use ofc), if you want it quick, nice, and you’re familiar with react - drei ScrollControls will kinda solve the issue for you right away :grin: (example very similar to what’ve shared, example a bit less similar but still relatable, also this.)

If you’d like to use ScrollControls-ish stuff in vanilla three.js - you can also can try port the source.

5

Thank you for sharing the links. I’ve looked at those examples previously. I’m not too sure that they are what quite what I’m looking for, as they involve 2D Image components. As I’ve said, I’m looking for a way to transition between different views / scenes. I’d like those views /scenes to have 3D objects and meshes, and I’d like to move the camera and meshes based on the scroll position. View tracking - CodeSandbox is probably a step closer to what I’m looking for, but I’d like to know how to make the views transition between each other seamlessly, on scroll position.