[React Three Fiber] 3D gallery with scroll animation

Questions
1

Hello everyone!

For a project, I am looking to replicate something like a 3D gallery with the camera zooming in / zooming out on scroll, like this: Studio Olafur Eliasson

this is what I got so far: Gallery_3D_covid_time - CodeSandbox

  • at the moment, in this sandbox, on key arrow “up” / “down” / "left / “right” the camera moves forward / backward
  • I would like to be able to navigate the scene by on mouse scroll/panning, like in this example: Studio Olafur Eliasson. Here as well: three.js examples

any feedback or directions would be super helpful!

THANK YOU :slight_smile:

2

Can you elaborate, and maybe update the thread, on details of what you have tried so far and what exactly is blocking you? It’s hard to give feedback or directions without much context.

3

sorry about the vague post, I’ve just edited my post, see above :slight_smile:

4

Hi @Audreyk

Were you able to implement the camera movement in R3F, i have a similar sitatuation in my project .

5

isnt that just a simple orbitcontrol with a lot of damping, a few image planes and some fog?

edit: or flycontrols maybe. i don’t think threes flycontrols support scroll but that would be easy to add: r3f basic demo (forked) - CodeSandbox to make this performant enough i guess you’d need to use instancing.