CODEWITHSUNDEEP
three.js
SET001
SET001

Reputation: 11708

Texture repeating for meshes with random size

I need some help with texturing in three.js. I have multiply blocks each with random width/height and I need apply same texture to them but repeated along whole block. As I see from another answers I can set texture repeating with this code:

lavaTexture.wrapS = lavaTexture.wrapT = THREE.RepeatWrapping;
lavaTexture.repeat.set( 2, 2 );

But in this case I should manually set how many times texture will be repeated. In my case this mean that if I would like to have 100 blocks of random size - I should create 200 textures (call THREE.ImageUtils.loadTexture 200 times) and 200 materials(MeshFaceMaterial - because I should apply texture with repeat setting for each side) which seems to have bad impact on performance.

So what is the right way to deal with this situation in three.js? Are there something like auto repeat option somewhere so that I would not have to bother calculating how much time texture should be repeated?

enter image description here

Upvotes: 3

Views: 860

Answers (2)

stdob--
stdob--

Reputation: 29172

You can change faceVertexUvs directly to the geometry of the object. For example if Box geometry, for each set of opposing faces:

function setUv( v, index, wr, hr ) {
    for (var i=index*4; i<(index+1)*4; i++) {
        console.log(i);
        for (var j=0; j<3; j++) {
            v[i][j].x = v[i][j].x * wr;
            v[i][j].y = v[i][j].y * hr;         
        }
    }
}

var material = new THREE.MeshPhongMaterial( {side: THREE.FrontSide, map: texture} );

var mesh = new THREE.Mesh( new THREE.BoxGeometry(50,75,100,1,1,1), material);

var v = mesh.geometry.faceVertexUvs[0];

setUv( v, 0, 4, 3 );
setUv( v, 1, 2, 4 );
setUv( v, 2, 2, 3 );

http://jsfiddle.net/9rbbz6xg/

Upvotes: 2

bjorke
bjorke

Reputation: 3305

Leave lavaTexture.repeat.set( 1, 1 ); and only add the texture one time.

For each block, just set the UV's to match the block dimensions -- for example, if a block has size 100, range the UV's fro 0 to 100, not 0 to 1.

If you are using BoxGeometry you will need to make your own copy to enable this. See src/extras/geometries/BoxGeometry.js and add the scale values to the uva uvb uvc uvd values around line 95 or so.

Upvotes: 1

Related Questions