Texture gets streched with wrap properties assigned

Questions
,
1

Hi all, I’m trying to make the texture of a cube composed of 2 Meshes to not stretch. This is my code:

        const firstMesh = object.children[ 0 ].children[ 0 ].clone();
        const secondMesh = object.children[ 0 ].children[ 1 ].clone();
        const loader = new THREE.TextureLoader();

        const colorTexture = loader.load( woodTextureFile );
        colorTexture.wrapS = THREE.RepeatWrapping;
        colorTexture.wrapT = THREE.RepeatWrapping;

        const oldMaterialParams1 = firstMesh.material.clone();
        const oldGeoParams1 = firstMesh.geometry.clone();

        const newMaterial1 = new MeshStandardMaterial( {
          map: colorTexture,
        } ).clone( oldMaterialParams1 );

        const oldMaterialParams2 = secondMesh.material.clone();
        const oldGeoParams2 = secondMesh.geometry.clone();

        const newMaterial2 = new MeshStandardMaterial( {
          map: colorTexture,
        } ).clone( oldMaterialParams2 );

        object.children[ 0 ].children[ 0 ] = new THREE.Mesh( oldGeoParams1, newMaterial1 );
        object.children[ 0 ].children[ 1 ] = new THREE.Mesh( oldGeoParams2, newMaterial2 );

And my results attached. The texture gets stretched. The image itself is 1024 x 1005, so not a power of 2 (I’m limited to this size for reasons). I believe this shouldnt give me any problem besides a weird repeat, right? Or the repeat cancels because I do not have a power of 2 image? Is something wrong with my code?. Thanks in advance (edited)

Image

Image

2

colorTexture.repeat.set(2,2);

3

I’ve tried this and the textures are still repeating, they are not adapting to the size of the object itself. I want the texture to not stretch or shrink at all, just cover the size of the object and repeat itself as much as it takes. I’ve tried it with another example, here is my code and results:

const colorTexture = node.material.map;
colorTexture.wrapT = THREE.RepeatWrapping;
colorTexture.wrapS = THREE.RepeatWrapping;
colorTexture.repeat.set( 2, 2 );
node.material.map = colorTexture;

after-1
after-11420×517 44.6 KB

before-1
before-11270×472 262 KB

As you can see, there are three lighter areas on this texture, and when it resizes, they are still 3 because they stretch to take all available space. Any help is greatly appreciated.

4

Then you need to modify shader. uv need take from vertices position and then texture will repeat itself as much as it takes.

5

I see. This seems complicated. Could this be done by setting a dynamic repeat on the texture based on the width and height of the geometry itself? And everytime a morph event happens, you change the repeat property to a higher or lower value.

6

Yes its could