修复了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应该是非常可行的。