修复了 Three.js 中的纹理大小

Question

我正在 Three.js（FPS-a-like）中构建一个相当复杂的 3D 环境。为此，我想以面向对象的方式构建纹理和材质的加载。例如; materials.wood.brownplank是一种具有一定质感和其他特性的可重复使用材料。下面是模型使用材料和材料使用纹理的过程的简化可视化。

loadTextures();
loadMaterials();
loadModels();

//start doing stuff in the scene

我想在不同大小的物体上使用这种材料。但是，在 Three.js 中，您不能（AFAIK）设置一定的纹理比例。您必须设置重复以使其适合您的对象。但我不想对我使用的每个对象的每个平面都这样做。

Here is how it looks now

如您所见，纹理的大小并不统一。

有没有简单的方法来实现这一点？所以每次都克隆纹理和/或材质并根据几何设置重复是行不通的:)

我希望有人可以帮助我。

结论：

没有真正简单的方法可以做到这一点。我最终改变了我的加载方法，现在 materials.wood.brownplank 之类的东西现在是 getMaterial('wood', 'brownplank') 在函数中实例化了新对象

Answer 1

您应该能够通过根据每个面的“真实”尺寸修改几何 UV 坐标来做到这一点。

在 Three.js 中，UV 坐标是相对于面和纹理的（例如，0.0 = 一条边，1.0 = 另一条边），无论纹理或面的实际大小是多少。但是通过修改几何体中的 UV（将它们乘以基于面部物理尺寸的某个因子），您可以在每个面部使用不同尺寸（和方向）的相同材质和纹理。

您只需要弄清楚 UV、几何比例和所需工作单位（例如 mm 或 m）之间的映射。抱歉，我没有，或者不知道一个现成的算法来做到这一点，但这是你可能需要采取的方法。通过一些实验和 google-fu 应该是完全可行的。