THREE.js在着色器中重复包裹纹理

Question

我想在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);
}

JavaScript文件中的

uniforms，其中textureRepeat给出了需要重复的时间：

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

有谁能告诉我这里出了什么问题？

Answer 1

默认情况下，纹理具有“Clamp To Edge”换行模式，这意味着u或v超过1仍然是1而不是回绕到0。

要解决此问题，您需要将纹理的环绕模式设置为“重复”，如下所示：

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

Answer 2

另外一个技巧可能是做一些像fract（uv）这样的小部分。 （它总是在0-1之内）