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?

回答1:

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/

回答2:

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.

来源：https://stackoverflow.com/questions/32192643/texture-repeating-for-meshes-with-random-size

标签

three.js