【问题标题】:How to write right repeat texture with three.js如何用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
} )

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

【问题讨论】:

标签: three.js textures repeat texture-wrapping


【解决方案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你可以去看看源代码,看看它是如何工作的。
猜你喜欢
  • 1970-01-01
  • 2020-07-23
  • 2017-08-11
  • 1970-01-01
  • 1970-01-01
  • 2021-03-03
  • 1970-01-01
  • 2022-01-18
  • 1970-01-01
相关资源
最近更新 更多