glsl - 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);
}

uniforms 在 JavaScript 文件中，其中 textureRepeat 给出了需要重复的次数:

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

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

Answer 1

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

要解决此问题，您需要将纹理的环绕模式设置为“重复”，如下所示:
uniforms.texture.value.wrapS = uniforms.texture.value.wrapT = THREE.RepeatWrapping