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.
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!
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.
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…
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.
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:
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.
@PavelBoytchev@prisoner849 - again thanks for helping me with my problem I can’t describe how insane I went trying to find an answer to this on other parts of the internet