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

我想在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: {
    texture: {
        type: 't', 
        value: THREE.ImageUtils.loadTexture('image/box.jpg')
    },
    textRepeat: {
        type: 'f',
        value: 8
    }
}

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

默认情况下，纹理具有“夹紧到边缘”的包装模式，这意味着u或v超过1仍将是1，而不是包装回0

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

---

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

另外一个技巧是执行类似于分形（uv）的操作并获得分数部分。（始终在0-1范围内）

对于ShaderMaterial和自定义统一贴图，这是唯一适合我的解决方案。但对于mip贴图，这会有问题，我认为，为什么另一种方法不起作用？