How to repeat the texture map like GL_REPEAT?

问题

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.

回答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 );

回答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...

回答3:

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

来源：https://stackoverflow.com/questions/11304906/how-to-repeat-the-texture-map-like-gl-repeat

标签

opengl-es

textures

WebGL

three.js