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"包装模式,这意味着u或v超过1将仍为1而不是回绕到0.

要解决此问题,您需要将纹理的包装模式设置为"重复",如下所示:

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