How to repeat the texture map like GL_REPEAT?

Question

I have a house model in my game, and I have some materials for the house geometry. There is a material for the wall of the house, and I have a texture-map-image to show the bricks.

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

In this way above, the texture map appears like GL_CLAMP I want it to show like GL_REPEAT.

What should I do?

If you can not see the images check this.

Vitascope

Answer 1

I have posted a full working example at: http://stemkoski.github.com/Three.js/Texture-Repeat.html

The relevant part of the code example is:

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

Remind

Thanks a lot!I've known how to make texture repeat on cube and sphere.But I got another question that how to make texture repeat on geometry's materials?I have some loaded model in my game,the geometry of the model has some materials,each of them has different texture-image,so could you give me some suggestion or example?Thank you! – Vitascope

I've got it.It's just the same way! The image which I was using is at a size of 120*120 , I change it into 128*128 so the problem solved!Maybe the size of image must at 128*128 or 256*256 or something if you want see 'repeat' – Vitascope

Yes, in order for repeat features to work the image dimensions must be a power of 2. – Remind

Answer 2

It's called THREE.RepeatWrapping there. The loadTexture defaults to THREE.ClampToEdgeWrapping (see ctor function from previous link). Don't know if you can use the callback (because this in JS is a bit weird (looks like it points to the created Image, not the created Texture)). Signature:

loadTexture: function ( path, mapping, callback ) {

Better you just name the texture locally and set the wrap modes manually:

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

Looks like you're not going far with threejs without looking at the actual code...

Counterstatement

I've try to set wrapS and wrapT like that , but it does not work . I think maybe the material is wrong , now I use the MeshPhongMaterial , should I use ShaderMaterial instead? – Vitascope

Don't know, I'd try to get this working though. The texture must be a power-of-two one, see WebGLRenderer, l. 5721. – Counterstatement

I had a similar problem, I scaled a cube and the texture was stretched. To prevent this you need to set the new cube size in the render() like that: texture.repeat.set( 2*cWidth, 2*cHeight ); (then the texture behaves like an unscaled pattern). Hope that helps. – Troyes

Answer 3

Image must be 8x8, 16x16, 32x32, 128x128, 256x256, 512x512 etc. And all be working. =)

Homebrew

Wrapping requires images to be power-of-two (POT), but they do not have to be square. – Eyelash