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

Texture repeat with ShaderMaterials in three.js

我对均匀纹理及其重复存在问题，因为：

1
2
3
4

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

它不起作用。因此，我在网上搜索了一个解决方案，并在giuthub上找到了以下线程：
https://github.com/mrdoob/three.js/issues/787
threadstarter与我有同样的问题，但是不幸的是，答案的链接不再起作用。

我要重复均匀的纹理时该怎么办？

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

1
2
3
4
5
6
7

uniform sampler2D baseTexture;
varying vec2 vUv;

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

如果不是，则http://stemkoski.github.io/Three.js/Texture-Repeat.html包含一个纹理重复的示例，例如

1
2
3
4
5

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