是否可以在各种大小的对象上使用纹理材质

Question

使用Three.js r113，我将根据蓝图的坐标动态创建墙作为自定义几何图形。我已经成功设置了vertices, faces and faceVertexUvs。现在我想用一种有纹理的材料来包裹这些几何图形，这种材料可以重复纹理并保持原始的纵横比。由于墙的长度不同，我想知道哪种方法是最好的？

到目前为止，我尝试的是加载一次纹理，然后使用不同的纹理。根据墙的长度，重复值：

let textures = function() {
let wall_brick = new THREE.TextureLoader().load('../textures/light_brick.jpg');
return {wall_brick};
}();
function makeTextureMaterial(texture, length, height) { 
const scale = 2;
texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;
texture.repeat.set( length * scale, height * scale );
return new THREE.MeshStandardMaterial({map: texture});
}

然后，在创建几何图形后，我调用上面的函数，并将返回的材质指定给材质阵列，以将其应用于每面墙的正面和背面。注意：material.wall是其他面的无纹理网格标准材质。

let scaledMaterial = [
makeTextureMaterial(textures.wall_brick, this.length.back, this.height),
makeTextureMaterial(textures.wall_brick, this.length.front, this.height),
material.wall
];
this.geometry.faces[0].materialIndex = 0; // back
this.geometry.faces[1].materialIndex = 0; // back
this.geometry.faces[2].materialIndex = 1; // front
this.geometry.faces[3].materialIndex = 1; // front
this.geometry.faces[4].materialIndex = 2;
this.geometry.faces[5].materialIndex = 2;
this.geometry.faces[6].materialIndex = 2;
this.geometry.faces[7].materialIndex = 2;
this.geometry.faces[8].materialIndex = 2;
this.geometry.faces[9].materialIndex = 2;
this.geometry.faces[10].materialIndex = 2;
this.geometry.faces[11].materialIndex = 2; // will do those with a loop later on :)
this.mesh = new THREE.Mesh(this.geometry, scaledMaterial);

所发生的情况是，纹理显示在所需的面上，但它没有通过this.length.back和this.length.front单独缩放

有什么办法吗？非常感谢。

Answer 1

我刚刚找到了正确的方法。单个缩放是通过faceVertexUvs完成的，正如West Langley在这里回答的那样：https://stackoverflow.com/a/27098476/4355114