gm Three.js fam.
I want to replicate this infinite display of screens on this beautiful webpage https://wonderland.studio/.
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
A B C D
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
↑ ↑
0-----1
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?
A bit late, but may be it will help somebody.
I’ve been faced with infinite display 3d models in my project and solve it by moving models instead of camera. In more detail, I calculated the boundary element and when it was on the screen, I moved all the previous elements behind the current one.
Hope this will help to guide you in the right direction.