我想在 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
}
}
谁能告诉我这里出了什么问题?
最佳答案
默认情况下,纹理具有“Clamp To Edge”环绕模式,这意味着超过 1 的 u 或 v 仍将是 1 而不是环绕回 0。
要解决此问题,您需要将纹理的环绕模式设置为“重复”,如下所示:uniforms.texture.value.wrapS = uniforms.texture.value.wrapT = THREE.RepeatWrapping
关于glsl - THREE.js 在着色器中重复包装纹理,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/15240886/