Infinite rendering of objects on scroll

gm Three.js fam.

I want to replicate this infinite display of screens on this beautiful webpage

Can someone point me to a direction?

all you need to do is place an object that’s behind the camera way up front and then add some fog.

as for the visuals, easiest would be to use drei/MeshReflectorMaterial

or look up the discourse thread where it has been ported to vanilla.

1 Like

ps. i didn’t notice the repeating scrollbar, this is another trick that’s a little different than re-placing objects.

given that you have four unique images


you now buffer them, as in you’re making them repeat in order but in both directions, for instance with a buffer of three

B C D | A B C D | A B C
        ↑     ↑

scroll 0 corresponds to A, scroll 1 (meaning end of scroll) corresponds to D, when it reaches D you set scrollTop to 0, when it reaches A with upward scroll direction you set scrollTop to the end.

this is a little more complex to do and needs cross browser hacks. again, if you can use drei it’s literally just <ScrollControls infinite

but otherwise you now know the logic of it, you can implement it yourself.

1 Like

So far I have implemented both the Image gallery and the scroll controls from drei with infinite mode. I think I’m missing the buffer part?!

it’s not the correct term probably. you repeat the items a bit because you need to be able to see past the end

1 Like

So far I have this setup.

My next steps are infinite display of “images” as you scroll down and at the end of scroll I don’t want the camera to go back to starting position. @drcmda can you please help with this?