在 Three.js 中使用 ShaderMaterials 重复纹理

Question

我对均匀纹理和重复纹理有疑问，因为：

\n\n

tex.wrapS = THREE.RepeatWrapping;\ntex.wrapT = THREE.RepeatWrapping;\ntex.repeat.x=100;\ntex.repeat.y=100;\n

\n\n

它不起作用。所以我在网上搜索了解决方案，并在 giuthub 上找到了以下线程： \n https://github.com/mrdoob/ Three.js/ issues/787 issues/787 \nthreadstarter 和我有同样的问题，但不幸的是答案的链接不再有效。

\n\n

当我想要重复均匀的纹理时，我必须做什么？

\n

Answer 1

您正在编写自己的片段着色器吗？如果是这样，您需要将 UV 坐标乘以重复值，例如

uniform sampler2D baseTexture;
varying vec2 vUv;

void main() 
{
    gl_FragColor = texture2D( baseTexture, vUv * 100 );     
}

如果没有，http://stemkoski.github.io/Three.js/Texture-Repeat.html包含纹理重复的示例，例如

// texture repeated twice in each direction
var lavaTexture = THREE.ImageUtils.loadTexture( 'images/lava.jpg' );
lavaTexture.wrapS = lavaTexture.wrapT = THREE.RepeatWrapping;
lavaTexture.repeat.set( 2, 2 );
var lavaMaterial = new THREE.MeshBasicMaterial( { map: lavaTexture } );