I’m currently working on a creative project, where I would like create a huge tunnel across which the user scroll (the tunnel represents a whole year, the user scrolls through it).
ISSUE I
I have an issue regarding texture mapping: because I want to create a very long tunnel, the texture must also be very wide so as to cover it and not get ‘streched’. Of course, as the texture gets bigger, its size grow (I need it to be high quality), which would make it impossible to use only one, big texture.
To cover my needs I thought about rendering a blank texture and then adding images on the texture as the user scroll (using copyToTexture / partial update) but I don’t know if this is feasible for large, complex visuals, and how fast it would be, so would love to hear some advice on this!
ISSUE II
I would like to add a functionality that shows a modal box with the image displayed on the texture that was clicked (on the texture, images of tweets are displayed, I want to show an enlarged image of the tweet that was clicked on the texture). How to pinpoint where the user clicked on the texture and figure out if he clicked on an image?
That sounds even a bit less performant than having a giant texture. Wouldn’t it be easier to simply divide the tunnel in some sections and texture them separately (if necessary, with seamless connections in-between) ?
If I understood what you mean correctly - you can determine the UV coordinates at which ray has hit a texture (each intersection has a uv property.)
1- I’ve tried this option but the problem is that there can only be one texture for the interaction on scroll (as the user scrolls, the texture offset x is modified at runtime), so if there are different textures and I animate their offset, it’s a mess, and the mouvement is not right
2 - yes you understood correctly at the moment I am using the pixelX and pixelY of the click to find out if the user clicked on a specific part of the texture (see below). Would this work, or do you advise using UV mapping? How can I determine the UV mapping of a tube?
I actually don’t scroll the scene, as the user scrolls, he goes through the tunnel, but nothing is actually moving, only the texture offset. magical-lumiere-mj6oz - CodeSandbox
yeah you’re right, that would be easier to make one long, big tunnel. But how could I add several textures on the tunnel? How can I get the UV mapping of a tube?
You could split the tunnel into several smaller geometries (that are offset to create effect of an endless tunnel), and apply textures separately.
That depends on the geometry you’d use to create the tube. If you create the tube manually with Geometry, you’ll need to specify UV mapping manually as well.
You could split the tunnel into several smaller geometries (that are offset to create effect of an endless tunnel), and apply textures separately.
yeah that’s why I was thinking of doing!
If you create the tube manually with Geometry , you’ll need to specify UV mapping manually as well
yeah I created the tube with Tube.Geometry, how to specify the UV mapping manually? sorry for those very obvious questions, but I never did anything with UV Mapping before