如何用three.js编写正确的重复纹理

Posted 2023-02-27

【中文标题】如何用three.js编写正确的重复纹理

【英文标题】：How to write right repeat texture with three.js

【发布时间】：2012-12-16 08:19:21

【问题描述】：

我在模型上搜索重复纹理。在所有示例或问题中，我发现只有这样：

var lavaTexture = THREE.ImageUtils.loadTexture( 'images/lava.jpg' );
lavaTexture.wrapS = lavaTexture.wrapT = THREE.RepeatWrapping;
lavaTexture.repeat.set( 3, 3 );
var lavaMaterial = new THREE.MeshBasicMaterial(  map: lavaTexture  );

这个我明白，但是当材料是这样写的时候：

Wood: new THREE.MeshPhongMaterial( 
   color: 0xffffff,
   specular:0xffffff,
   shininess: 10,
   map: new THREE.ImageUtils.loadTexture ( "models/macabann/chataigner.jpg"),
// not sure as right
   WrapS : THREE.RepeatWrapping,
   WrapT : THREE.RepeatWrapping,
   maprepeat : [2,2],

   envMap: textureCube,
   combine: THREE.MixOperation,
   reflectivity: 0.05
 )

如果可能的话，我会搜索如何以这种格式准确地写这个。 感谢您的任何回答。

【问题讨论】：

How to repeat the texture map like GL_REPEAT?的可能重复

【参考方案1】：

您希望纹理在您的模型上重复。为此，请遵循以下模式：

var loader = new THREE.TextureLoader();

var texture = loader.load( 'myTexture.jpg', function ( texture ) 

    texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
    texture.offset.set( 0, 0 );
    texture.repeat.set( 2, 2 );

 );

var material = new THREE.MeshPhongMaterial( 

   color: 0xffffff,
   specular:0x111111,
   shininess: 10,
   map: texture,
   . . .

 );

编辑：更新到 three.js r.84

【讨论】：

您的解决方案很好，但实际上不是很好的程序：材料在网格上拉伸（见 woodark）......我正在看这个它似乎更紧，但这显然不会重复（看到woodlight）你可以在这里看到the result什么是产权...

我对你的问题的回答是正确的。您使用的模型和/或纹理似乎有其他问题。您应该使用“二次幂”纹理。 （例如，尺寸为 512 x 256）另外，请检查以确保模型的 UV 正确。使用参考贴图作为纹理进行练习。 ( google uv_map_reference.jpg ) 请点击复选标记“接受”此答案，如果您有其他问题，请发布新问题。

我发现我的问题出在哪里：纹理太小，身体网格只用一个块......但我不理解three.js中的映射......我问了一个新问题。 ..

@LauraneBernard 我明白你在找什么。这是一个很好的例子。 stemkoski.github.io/Three.js/Texture-Repeat.html你可以去看看源代码，看看它是如何工作的。