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

Question

我在统一纹理和重复使用它们方面遇到了问题，因为使用：

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

它不能正常工作。因此，我在网上搜索解决方案，并在github上找到了以下主题：

https://github.com/mrdoob/three.js/issues/787

与我有同样问题的人开了这个主题讨论，但不幸的是，带有答案的链接已经失效。

如果我想要使我的统一纹理重复，我该怎么做？

- user2524500

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

- Stemkoski

---

你好Lee，谢谢你的回答。我正在使用这个例子：http://mrdoob.github.io/three.js/examples/webgl_materials_normalmap2.html 我尝试通过以下方式重复纹理：var texture = THREE.ImageUtils.loadTexture( 'textures/test_COL.jpg' ); texture.wrapS = texture.wrapT = THREE.RepeatWrapping; texture.repeat.set( 5, 5); uniforms[ "tDiffuse" ].value = texture; - user2524500