Infinite marquee across a dynamic perspective? Is it possible in Three?

Hi all -

I’ve not used Three.js/R3F/etc before so forgive me for not having a MWE, I was just trying to solve a problem and someone suggested it could be solved in the Three.js ecosystem - hopefully someone can confirm or deny its suitability.

I’m trying to recreate this effect, or the left-to-right section of it anyway, which could be described as an “infinite marquee with dynamic perspective”. It’s hard to describe but you can instantly see what I mean. I want some images to infinitely loop automatically, going from an effect where they look like they’re moving away from you, folding across an imaginary point where they look like they’re parallel to you in the middle section, then folding across another imaginary point to have the opposite effect/looking like they’re going towards you on the right side.

It’s sort of like this perspective grid:

I’ve tried to do this various ways in pure html/css/js but the main problem I ran into was that when I transformed the element, it transformed the entire element which looks really awful. I want to find something sleek like in the video.

Sorry in advance for the forum code I’ve likely violated in this post, I’m new to this!

Many thanks,
C

Forgot to add to the main post - I’ve seen some talk of perspective cameras in Three in my searching, I’m just not sure if it’s possible to do something like the above. Thanks again!

This is definitely something you could do with threejs and some shaders. It’s not the easiest starting point/introduction to threejs but totally possible with some help.

For instance… you could use a Box with the camera placed inside it, then use the vertex shader to animate the UVs (texture coordinates) to get the scrolling effect.
You could store the images in an off screen canvas that is used as the Boxes texture, and replace areas of that canvas over time via javascript to switch the images… while the shader is responsible for the scrolling effects.

4 Likes

Look here and here. If I good remember, one of @prisoner849 Codepen is exactly what you looking for, I am pretty sure that I have seen here that. I mean that infinite grid…

3 Likes

https://codepen.io/prisoner849/full/MWMLOVK


In my Collection

2024 eXtended eXamples


In addition:

See

5 Likes

I think @manthrax’s suggestion of using scrolling UVs inside a cube is likely the best approach for your needs.

That said, this might not be exactly what you’re looking for, but it could be a helpful starting point as it handles the infinite cube shader well:

1 Like

Maybe one box with changed shader which contain 10 textures for one draw calls.
Or more easy 10 boxes then 10 draw calls.
Also maybe need to stretch UV to cover box 4 sides with range 0.0-1.0.
Then first side will be have range 0.0-0.25, second 0.25-0.5, third 0.5-0.75, fourth 0.75-1.0.

2 Likes

Asked myself whether it is possible to do the effect without custom shaders, without custom UVs, without custom dealing with buffer attributes. This is what I got:

https://codepen.io/boytchev/full/WbevzJj

image

PS. I do not say this is the way to go, I just explore one alternative

7 Likes

I stopped at shader part :sweat_smile:, and created a bent plane geometry with continues UVs.

7 Likes

It is even possible without modifying the texture. Here is illustration of two “images” crossing each-other synchronously (first row is how it is done; second row is how it looks like). The gray wall hides the undesired parts of the images.

4 Likes

I’m a bit late to the party, with the same thought of the using of CylinderGeometry.

Picture:

Demo: https://codepen.io/prisoner849/full/qEWdYga

6 Likes

Great :clap:t2:, but you make a lot of work for me with my passion for collecting.
:slightly_smiling_face:

Link to the collection above.

6 Likes

Thanks for replying everyone!! This is so helpful and the warmest reception I’ve had on a programming-related forum <3

5 Likes

Great collection - feel I could dive into a lot of rabbit holes from here

1 Like

Thanks so much, I think this explanation on how the different boxes work will come in really useful

1 Like

@PavelBoytchev @prisoner849 - again thanks for helping me with my problem :saluting_face: I can’t describe how insane I went trying to find an answer to this on other parts of the internet

5 Likes