随机大小的网格的纹理重复 [英] Texture repeating for meshes with random size

问题描述

我需要一些有关three.js 中纹理的帮助.我有多个块，每个块都有随机的宽度/高度，我需要对它们应用相同的纹理，但在整个块上重复.正如我从另一个答案中看到的，我可以使用以下代码设置纹理重复:

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

但在这种情况下，我应该手动设置纹理重复的次数.就我而言，这意味着如果我想要 100 个随机大小的块 - 我应该创建 200 个纹理(调用 THREE.ImageUtils.loadTexture 200 次)和 200 个材料(MeshFaceMaterial - 因为我应该申请每边重复设置的纹理)，这似乎对性能有不良影响.

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.

那么在three.js中处理这种情况的正确方法是什么?是否有类似 auto repeat 的选项，这样我就不必费心计算纹理应该重复多少时间?

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?

推荐答案

您可以将 faceVertexUvs 直接更改为对象的几何形状.例如，如果 Box 几何体，对于每组相对面:

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/

这篇关于随机大小的网格的纹理重复的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！