How to write right repeat texture with three.js

Question

I search to repeat texture on the model. On all examples or questions I found only this like as:

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

I understand this, but when the material is written like this:

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

I search how to write exactly this in this format if is possible. Thanks for any answers.

possible duplicate of [How to repeat the texture map like GL\_REPEAT?](http://stackoverflow.com/questions/11304906/how-to-repeat-the-texture-map-like-gl-repeat) — bummi, Sep 24 '15 at 10:53

WestLangley · Accepted Answer · 2017-03-28T18:24:39.920

18

You want a texture to repeat on you model. To do so, follow this pattern:

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,
   . . .

} );

EDIT: Updated to three.js r.84

edited Mar 28 '17 at 18:24

answered Jan 01 '13 at 20:51

WestLangley

102,557
10
276
276

1

your solution is good but in fact is not the good procedure : the material is stretched over the mesh (seen woodark) ... I'm looking at this it seems tighter but this is apparently not repeat (seen woodlight) you can see here [the result](http://www.macabann.com/THREEJS03/modiflapin08.html) what is the properties rights... – Laurane Bernard Jan 01 '13 at 21:13
My answer to your question is correct. You appear to have other issues with the model and/or textures you are using. You should use "power-of-two" textures. (for example, of size 512 x 256) Also, check to make sure the UV's of your model are correct. Practice with a reference map as your texture. ( google uv_map_reference.jpg ) Please "accept" this answer by clicking on the checkmark, and if you are having other problems, post a new question. – WestLangley Jan 01 '13 at 22:03
I found where are my problem : texture too small and body mesh does with one only bloc... but I don't undertand the mapping in three.js... I ask a new question... – Laurane Bernard Jan 02 '13 at 12:05
@LauraneBernard I understand what you are looking for. Here is a good example. http://stemkoski.github.io/Three.js/Texture-Repeat.html You can go through the source code and see how it works. – GunnerFan Feb 07 '15 at 12:02

How to write right repeat texture with three.js

1 Answers1