javascript - THREE.js 中单个网格的多个 UV/纹理

Question

我有一个使用四个纹理的 OBJ。文件中定义的 UV 范围从 (0, 0) 到 (2, 2)，例如 (0.5, 0.5) 指的是第一个纹理中的坐标，(0.5, 1.5) 是第二个纹理中的 UV 坐标， (1.5, 0.5) 是第三个纹理中的坐标，(1.5, 1.5) 是最后一个纹理中的坐标。

我已经有了正确的 three.js 几何体或对象。但是，我现在需要能够将正确的纹理贴图应用到这些对象。

在代码中:

我有一个 THREE.Mesh，它具有正确的几何形状(UV 坐标使得 U = [0, 2]，V = [0, 2])和一个虚拟占位符 Material 。我目前像这样加载单个纹理:

var texture = new THREE.TextureLoader().load('tex_u1_v1.png', function() {
    object.material.map = texture;
    object.material.map.needsUpdate = true;
});

正如预期的那样，四分之一的网格纹理正确。我还有三个纹理文件，tex_u1_v2.png、tex_u2_v1.png 和 tex_u2_v2.png。我希望能够将这些纹理也应用到 object(THREE.js 网格)，这样网格中的每个有效 UV 都有一个纹理。

但是，我不知道如何在 object 创建后将多个 Material 添加到它。此外，我不知道如何向网格指定 tex_u1_v2.png，例如，应该用于范围内的 UVs (U = [0, 2], V = [1, 2] ).

Answer 1

三中的标准 Material 只接受单个texture各种对象 map -参数(并且纹理对象将只包含一个图像)，因此为了在您的对象上使用多个纹理，您将不得不使用多种 Material 或创建您自己的多纹理- Material 。如果您有着色器编程经验，您可能会使用后一种方法获得最佳性能(假设您有足够的显存用于大型纹理)，因为您可以在单个绘制调用中绘制整个网格，而无需加载新的着色器或纹理。

要创建自己的着色器，您可以使用 ShaderMaterial或 RawShaderMaterial ，给它一个纹理uniform对于您需要的每个纹理(在您的情况下是四个)，然后在着色器代码中根据坐标选择正确的纹理进行采样。

要使一个对象使用多种 Material ，您可以设置 material Material 数组的属性(在使用构造函数参数创建期间，或者只是在稍后阶段手动替换它)。

const myMaterials = [tex1Material, tex2Material, tex3Material, tex4Material];
const myMesh = new THREE.Mesh(myGeometry, myMaterials);
//Or:
myMesh.materials = myMaterials;

然后，要使网格的不同部分使用您必须创建的适当 Material groups如果它是一个 BufferGeometry；或设置 materialIndex如果您使用的是 Geometry，则为面的一部分。 Material 索引(在组和面中)是上面显示的 mesh.material 数组中 Material 的索引。

现在网格的不同部分具有不同的 Material ，您可以为每种 Material 赋予它们自己的纹理。

• 可能是获得正确 uv 坐标的最简单方法纹理只是将每个部分保持在 [0,1] 区间内。自从网格的每个部分都使用您不必担心的独特 Material 关于重叠坐标。

如果您不想修改已经存在的坐标，则有两种替代方法:

• 设置texture wrapping到 THREE.RepeatWrapping:

  myTexture.wrapS = THREE.RepeatWrapping;
  myTexture.wrapT = THREE.RepeatWrapping;
  

  这将使纹理重复超出标准 [0-1] uv 间隔。

• 另一种方法是使用 offset纹理的属性将其推回 [0-1] 区间。对于要放置的纹理u[0,1], v[1,2] 间隔你会设置偏移量的 v 坐标通过-1:

  myTexture.offset = new THREE.Vector2(0, -1);
  

这是一个演示这些方法的 jsfiddle 链接: https://jsfiddle.net/xfehvmb4/