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

Question

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

оригинальная текстура изображение:

Хочу повторить раз 4x4, который будет выглядеть так:

Но с помощью следующего кода, оказывается до:

Vertex шейдеров:

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 
    } 
} 

Может кто-нибудь сказать меня здесь не так?

Answer 1

По умолчанию, текстуры имеют «зажим до края» режим оборачивания, что означает U или V по 1 все равно будет 1 вместо оберточной обратно в 0.

Чтобы исправить это, необходимо установить режим оборачивания вашей текстуры «Repeat», которое происходит, как это:

uniforms.texture.value.wrapS = uniforms.texture.value.wrapT = THREE.RepeatWrapping

Answer 2

Еще один трюк может быть, чтобы сделать что-то вроде fract (уф) и получить дробную часть. (он всегда будет в пределах 0-1)