随机尺寸网格的纹理重复答案

【问题标题】：Texture repeating for meshes with random size随机尺寸网格的纹理重复
【发布时间】：2015-08-25 08:25:48
【问题描述】：

我需要一些关于在three.js 中进行纹理处理的帮助。我有多个具有随机宽度/高度的块，我需要对它们应用相同的纹理，但沿整个块重复。正如我从另一个答案中看到的那样，我可以使用以下代码设置纹理重复：

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

但在这种情况下，我应该手动设置纹理将重复多少次。在我的情况下，这意味着如果我想要 100 个随机大小的块 - 我应该创建 200 个纹理（调用 THREE.ImageUtils.loadTexture 200 次）和 200 个材料（MeshFaceMaterial - 因为我应该为每一侧应用具有重复设置的纹理）似乎对性能有不良影响。

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

【问题讨论】：

标签： three.js

【解决方案1】：

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

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/

【讨论】：

我认为第一行应该是 for (var i=index*2; i<(index+1)*2; i++) { 因为每个面有 2 个三角形，而不是 4 个。
本来要问另一个关于纹理缩放问题的问题，但这个问题在建议中弹出。 +1 setUv() 功能。修改并与PlaneGeometry一起使用。

【解决方案2】：

离开lavaTexture.repeat.set( 1, 1 );，只添加一次纹理。

对于每个块，只需设置 UV 以匹配块尺寸 - 例如，如果块的大小为 100，则 UV 的范围为 0 到 100，而不是 0 到 1。

如果您使用BoxGeometry，您需要制作自己的副本以启用此功能。请参阅 src/extras/geometries/BoxGeometry.js 并将比例值添加到第 95 行左右的 uva uvb uvc uvd 值。

【讨论】：