Search code examples
three.jstexturesrepeattexture-wrapping

How to write right repeat texture with three.js


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.


Solution

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

    const loader = new THREE.TextureLoader();
    
    const texture = loader.load( 'myTexture.jpg', function ( texture ) {
    
        texture.wrapS = texture.wrapT = THREE.RepeatWrapping;
        texture.offset.set( 0, 0 );
        texture.repeat.set( 2, 2 );
    
    } );
    
    const material = new THREE.MeshPhongMaterial( {
    
       color: 0xffffff,
       specular:0x111111,
       shininess: 10,
       map: texture,
       // . . .
    
    } );
    

    EDIT: Updated to three.js r.84