title: THREE.js repeat wrapping texture in shader
body: <p>I want to repeat wrapping texture in THREE.js shader.</p>
  
  <p>The original texture image is:</p>
  
  <p><img src="https://i.stack.imgur.com/r0kXd.png" alt="enter image description here"></p>
  
  <p>I want it to repeat 4x4 times which will looks like:</p>
  
  <p><img src="https://i.stack.imgur.com/JhOfa.png" alt="enter image description here"></p>
  
  <p>But with the following code, it turns out to be:</p>
  
  <p><img src="https://i.stack.imgur.com/CF3On.png" alt="enter image description here"></p>
  
  <p>Vertex shader:</p>
  
  <pre><code>varying vec2 vUv;
  
  uniform float textRepeat;
  
  void main()
  {    
      // passing texture to fragment shader
      vUv = uv * textRepeat;
  
      gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
  }
  </code></pre>
  
  <p>Fragment shader:</p>
  
  <pre><code>varying vec2 vUv;
  
  uniform sampler2D texture;
  
  void main() {
      // add origianl texture
      gl_FragColor = texture2D(texture, vUv);
  }
  </code></pre>
  
  <p><code>uniforms</code> in a JavaScript file, in which <code>textureRepeat</code> gives the times need to be repeated:</p>
  
  <pre><code>uniforms: {
      texture: {
          type: 't', 
          value: THREE.ImageUtils.loadTexture('image/box.jpg')
      },
      textRepeat: {
          type: 'f',
          value: 8
      }
  }
  </code></pre>
  
  <p>Could anyone tell me what's going wrong here?</p>