Texture repeat with ShaderMaterials in three.js

Question

I have a problem with uniform textures and the repeat of them, because with:

tex.wrapS = THREE.RepeatWrapping;
tex.wrapT = THREE.RepeatWrapping;
tex.repeat.x=100;
tex.repeat.y=100;

it doesn´t work. So I searched the web for a solution and I found the following thread on giuthub: https://github.com/mrdoob/three.js/issues/787 the threadstarter has the same problem as I do, but unfortunately the links with the answers don´t work anymore.

What do I have to do when I want my uniform textures repeated?

Answer 1

Are you writing your own fragment shader? If so, you'll need to multiply the UV coordinates by the repeat values, e.g.

uniform sampler2D baseTexture;
varying vec2 vUv;

void main() 
{
    gl_FragColor = texture2D( baseTexture, vUv * 100 );     
}

If not, http://stemkoski.github.io/Three.js/Texture-Repeat.html contains an example of texture repeating, e.g.

// texture repeated twice in each direction
var lavaTexture = THREE.ImageUtils.loadTexture( 'images/lava.jpg' );
lavaTexture.wrapS = lavaTexture.wrapT = THREE.RepeatWrapping;
lavaTexture.repeat.set( 2, 2 );
var lavaMaterial = new THREE.MeshBasicMaterial( { map: lavaTexture } );