如何像 GL_REPEAT 一样重复纹理贴图？

Posted 2023-02-27

【中文标题】如何像 GL_REPEAT 一样重复纹理贴图？

【英文标题】：How to repeat the texture map like GL_REPEAT?

【发布时间】：2012-07-03 12:43:48

【问题描述】：

我的游戏中有一个房屋模型，并且我有一些房屋几何形状的材料。房子的墙壁有一种材质，我有一个纹理贴图图像来显示砖块。

var mat = new THREE.MeshPhongMaterial(  
    ambient: 0x969696,
    map: THREE.ImageUtils.loadTexture( 'textures/G/G0.jpg' ), 
    overdraw: true,combine: THREE.MultiplyOperation 
 );

通过上面的这种方式，纹理贴图显示为GL_CLAMP 我希望它显示为GL_REPEAT。

我该怎么办？

如果看不到图片，请查看this。

【参考方案1】：

那里叫THREE.RepeatWrapping。 loadTexture 默认为 THREE.ClampToEdgeWrapping（请参阅上一个链接中的 ctor 函数）。不知道能不能用callback（因为JS里面的this有点奇怪（貌似是指向创建的Image，而不是创建的Texture））。签名：

loadTexture: function ( path, mapping, callback ) 

最好只在本地命名纹理并手动设置包裹模式：

var t = THREE.ImageUtils.loadTexture( 'textures/G/G0.jpg' );
t.wrapS = t.wrapT = THREE.RepeatWrapping;

如果不查看实际代码，您似乎对 threejs 的了解并不远...

【讨论】：

我尝试像这样设置 wrapS 和 wrapT，但它不起作用。我想可能是材质有问题，现在我用的是 MeshPhongMaterial，我应该改用 ShaderMaterial 吗？

不知道，不过我会尝试让它工作。纹理必须是 2 的幂，请参阅 WebGLRenderer, l. 5721。

我遇到了类似的问题，我缩放了一个立方体并拉伸了纹理。为了防止这种情况，您需要在render() 中设置新的立方体大小，如下所示：texture.repeat.set( 2*cWidth, 2*cHeight );（然后纹理的行为就像未缩放的图案）。希望对您有所帮助。

【参考方案2】：

我在以下位置发布了一个完整的工作示例： http://stemkoski.github.com/Three.js/Texture-Repeat.html

代码示例的相关部分是：

// for example, 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  );
var lavaBall = new THREE.Mesh( THREE.GeometryUtils.clone(sphereGeom), lavaMaterial );
scene.add( lavaBall );      

【讨论】：

非常感谢！我知道如何在立方体和球体上重复纹理。但我还有一个问题是如何在几何体的材质上重复纹理？我的游戏中有一些加载模型，模型的几何形状有一些材质，每种材质都有不同的纹理图像，你能给我一些建议或例子吗？谢谢！

我知道了。就是这样！我使用的图像大小为 120*120 ，我将其更改为 128*128 所以问题解决了！也许图像的大小必须为 128*128 或 256*256 或者如果你想看到“重复”

是的，为了使重复特征起作用，图像尺寸必须是 2 的幂。

【参考方案3】：

图片必须为 8x8、16x16、32x32、128x128、256x256、512x512 等。 并且都在工作。 =)

【讨论】：

包装要求图像是二次方 (POT)，但它们不一定是正方形。