Я хочу повторить обтекание текстуры в шейдере THREE.js.

Исходное изображение текстуры:

Я хочу, чтобы это повторилось 4x4 раза, что будет выглядеть так:

Но с помощью следующего кода получается:

Вершинный шейдер:

varying vec2 vUv;

uniform float textRepeat;

void main()
{    
    // passing texture to fragment shader
    vUv = uv * textRepeat;

    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);
}

Фрагмент шейдера:

varying vec2 vUv;

uniform sampler2D texture;

void main() {
    // add origianl texture
    gl_FragColor = texture2D(texture, vUv);
}

uniforms в файле JavaScript, в которомtextureRepeat дает время, которое нужно повторить:

uniforms: {
    texture: {
        type: 't', 
        value: THREE.ImageUtils.loadTexture('image/box.jpg')
    },
    textRepeat: {
        type: 'f',
        value: 8
    }
}

Может ли кто-нибудь сказать мне, что здесь происходит не так?