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

Posted 2023-03-23

【中文标题】修复了 Three.js 中的纹理大小

【英文标题】：Fixed texture size in Three.js

【发布时间】：2013-07-06 00:06:33

【问题描述】：

我正在 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') 在函数中实例化了新对象

【参考方案1】：

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

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

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

【讨论】：

如果我错了，请纠正我；但不是用于设置偏移的 UV 坐标，而不是比例？

@claarman。虽然我对 UV 不是很好，但我很确定你错了 :) 我只是为另一种几何格式编写了 Three.js 导入器，错误转换的 UV 坐标导致比例错误。所以是的，它们会影响比例、偏移和方向。

好的，那我试试你的方法;)

@claarman 为了更清楚一点，我不是在谈论 map.offset.* 和朋友，它们是纹理的属性，而是几何 UV，你可以通过 geometry.faceVertexUvs[0] 来处理它跨度>

我花了比预期更长的时间才能继续。但我采用了克隆和设置比例的方法。但是，我将它集成到纹理/材质/模型加载过程中，因此只需很少的努力