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

Question

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

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

//start doing stuff in the scene

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

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

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

我希望有一个人可以帮助我。

结论：

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

score 0 · Accepted Answer

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

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

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

1 回答 1