Texture mapping and copyToTexture

Hello everyone!

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).

here is a code prototype: magical-lumiere-mj6oz - CodeSandbox

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!

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?

My idea was to use the intersects array that returns raycaster.intersectObjects. I’ve found this post on stackOverflow: javascript - Getting click position on a sphere's texture with ThreeJS - Stack Overflow - and I’ve tried this approach, but would love to know if this is the right approach / or is there are others ways of doing it.

thanks a lot :heart:

  1. That sounds even a bit less performant than having a giant texture. :sweat_smile: Wouldn’t it be easier to simply divide the tunnel in some sections and texture them separately (if necessary, with seamless connections in-between) ?

  2. 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.)

thank you for your reply :slight_smile:

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 :slight_smile: 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?

const textureWidth = this.textures[this.currentMaterialIndex].image.width
const textureHeight = this.textures[this.currentMaterialIndex].image.height

    var pixelX = Math.round(intersects[0].uv.x * textureWidth);
    var pixelY = Math.round(intersects[0].uv.y * textureHeight);

    console.log("pixelX", pixelX)
    console.log("pixelY", pixelY)

    if (pixelX >= 735 && pixelX <= 1103 && pixelY >= 735 && pixelY <= 1025) {
        console.log("TEXTURE 1")


But if you scroll the scene, why would you need to scroll / offset the texture at all :thinking: ?

The visual effect of scrolling the texture can be achieved by moving the tunnel model in the same direction, while leaving the texture offset intact.

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

(thank you!)

Why? :upside_down_face: Seems like just scrolling, instead of offsetting the texture, would save a bit of headache in this case.

but then how will I give this impression of going through the tunnel? You mean by moving the scene, or the camera?

Yep. I don’t understand why give an impression, instead of actually moving through a continuously generated tunnel :thinking: ?

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. :thinking:

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

thanks a lot for your help :slight_smile: