Three.js 中的自动纹理映射

Question

我想在网格上自动进行纹理映射。 如图所示，我将一个纹理（1024 X 1024 像素）应用于两个立方体，一个立方体具有大表面，第二个具有小表面。 随着图像相对于 UV 坐标进行缩放，两个立方体的纹理大小会有所不同。 我想知道是否有办法计算表面图像的理想比例。 比如，表面边界、UV 坐标和图像大小之间是否存在任何等式。

Answer 1

如果是平铺纹理（重复时没有接缝），您可以根据立方体的大小重复纹理。

// depending on how you create the cube, the actual size of the cube is hidden either in
// the geometry, the transformation matrix (or object scale), or both. This should respect all.
var size = cube.geometry.boundingBox.getSize().multiply(cube.scale);

// adjust size of texture with `resolution` or some constant
var repeatFactor = resolution * size.x;

var texture = cube.material.map;
texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.RepeatWrapping;
texture.repeat.set( repeatFactor, repeatFactor );
texture.needsUpdate = true;