I have a simple 20x20 plane and a 5x5 canvas with a single horizontal line at the top.
My question is how to properly repeat the canvas texture, which in this case will repeat 20 / 5 = 4 times in both x and y directions.
I can use texture.repeat.set(4, 4) but I dont know the size of the shape beforehand, and the shape can be any 2d polygon.
https://jsfiddle.net/devAhsan/h1yfjvdc/6/
Current output (texture not repeating)
Desired output
You want a texture to repeat on you model. To do so, follow this pattern:
var loader = new THREE.TextureLoader();
var texture = loader.load( 'myTexture.jpg', function ( texture ) {
texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
texture.offset.set( 0, 0 );
texture.repeat.set( 2, 2 );
} );
var material = new THREE.MeshPhongMaterial( {
color: 0xffffff,
specular:0x111111,
shininess: 10,
map: texture,
. . .
} );