Texture Wrapping Problem At Connection Points

Questions
, , ,
1

Hello,
I made a custom cloth designer. User can select desired fabric and Three.js wrap the given fabric over the cloth object. However, fabric image is not big enough (it is around 1200x1200 or 1200x1500px). Since it is not big enough I REPEAT the texture both horizontally and vertically to cover the 3d object.

The problem s at the connection points of the repeating texture. There always occur an obscure line at connection points of repeating fabrics.

Here the visual examples of the problem: https://pasteboard.co/IeNvAXW.png

Another example: https://pasteboard.co/IeNw0r9.png

Here the code I use:

      var textureLoader = new THREE.TextureLoader( );
      var texture;
      var textureNormal;
      var textureXRepeat = 7;
      var textureYRepeat = 7;
      var updateFabric;
      function updateFabric(){
        texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
        texture.repeat.x = textureXRepeat;
        texture.repeat.y = textureYRepeat;
        
        if(textureNormal){
          textureNormal.wrapS = textureNormal.wrapT = THREE.RepeatWrapping;
          textureNormal.repeat.x = textureXRepeat;
          textureNormal.repeat.y = textureYRepeat;
        }
        
        3D_obj.traverse( function ( child ) {
          if ( child.isMesh ) child.material = new THREE.MeshStandardMaterial({
            metalness: metalValue,
            roughness: roughValue,
            map:       texture,
            normalMap: textureNormal,
          });
        } );  //end of object traverse

      } //end of update fabric

I have several ideas about the solution but I dont know which would be best also if possible I am looking for a software solution to the problem.
Some ideas:

  1. Increase the size of the fabric image to a huge size using photoshop or similar software for example 10000X10000px. Thus I dont need to repeat the pattern. Only single fabric would be able to cover all surface. But image size will be huge!
  2. WHile repeating the pattern on THree.js I may connect end of the first pattern to the end of the second pattern instead of head of the first patter. I mean Lets assume that pattern have head( H) and have an end (E). Normally it repeats lie this: H-E+H-E+H-E
    But now lets make it like this: H-E + E-H + H-E + E-H
    So I should use first pattern in normal orientation but I have to turn second pattern back.
  3. I may overlap second pattern a little ON TO the first pattern.

These are the just ideas, I dont know how to realize bullet 2 and 3. Also I dont know if there is a better way?

And ideas about the solution is appreciated.
Thanks

2

At first glance, it looks like you’re using a texture that doesn’t tile seamlessly. Could you post the plaid image that you’re using?

3 Likes
3

Here the textures that I use:
https://pasteboard.co/IeTuklxb.jpg

here the other texture:
https://pasteboard.co/IeTuzNw.jpg

4

Those indeed don’t tile seamlessly. You could try adjusting them in any image editing software, or cropping a smaller section of those that have better tiling.

1 Like