Three.js 中的自动纹理映射答案

【问题标题】：Automate texture mapping in Three.jsThree.js 中的自动纹理映射
【发布时间】：2019-02-27 18:16:05
【问题描述】：

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

【问题讨论】：

有一个方程，是的。 UV 坐标 = 纹理大小 / 对象大小
如何计算纹理大小？
你不计算它，你要么已经知道它，要么从文件中读取它。正如您在问题中所说，这里是 1024。由于您的对象的大小可能不是 1024，因此您需要添加一个 pixels / unit 因子
纹理的比例因子再次根据对象发生变化。我计算如下：假设：Three.js 小立方体中 1 个单位 = 1 米是 50 英寸，所以 1.27 米大立方体是 100 英寸，所以 2.54 米 uv = 1024/1.27 = 806
如果立方体是两倍大，你需要一个 0.5 而不是 1 的 UV 坐标。如果不先建立纹理像素和英寸之间的关系，806 是没有意义的。你有 1024/50 作为每英寸像素，所以你需要 1024 / 100 * (50/1024) 是 0.5

标签： javascript three.js

【解决方案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;

【讨论】：