三个js facevertex uv贴图三角形：如何只缩放1个方向

Question

我目前有一个基于 Doob 先生教程示例的城市："How to do a procedural city in 100 lines"。在本教程中，您可以看到他创建了 100 个建筑网格，然后出于性能原因将这些网格合并到 1 个城市网格中。然后制作一种应用于城市网格的材料，为每个建筑物提供纹理。

我要停止的是建筑纹理的夹紧和拉伸。为了营造更逼真的“不同建筑物的窗户高度相同”的外观。

我认为解决方案是使用几何体的缩放值来操纵面顶点 UV。

使用以下代码，我可以将纹理缩放 2 倍。

  let faceVertexUvs = buildingMesh.geometry.faceVertexUvs[0];
  for (let k = 0; k < faceVertexUvs.length; k++) {
    const uvs = faceVertexUvs[k];
    if ( k == 4 || k == 5){
      // Make the roof blank
      uvs[0].set(0, 0);
      uvs[1].set(0, 0);
      uvs[2].set(0, 0);
    }
    else if( k % 2 == 0) {
      uvs[0].set(0, 0.5);
      uvs[1].set(0, 0);
      uvs[2].set(0.5, 0.5);
    }
    else {
      uvs[0].set(0, 0);
      uvs[1].set(0.5, 0);
      uvs[2].set(0.5, 0.5);
    }
  }

但是，我只想垂直缩放，而不要单独进行水平缩放。但我并不完全理解这两个三角形之间的关系。

Answer 1

也许您应该修改城市模型纹理的.repeat 属性。 文档链接：https://threejs.org/docs/#api/textures/Texture.repeat

Answer 2

使用调试图像并猜测一些值后，我使用以下代码来垂直、水平或同时缩放纹理。

  let scale_y = buildingMesh.scale.y/200;
  let scale_x = buildingMesh.scale.x/100;

  for (let k = 0; k < faceVertexUvs.length; k++) {
    const uvs = faceVertexUvs[k];
    else if( k % 2 == 0) {
      uvs[0].set(0, texture_scale_y);                 // 0 1
      uvs[1].set(0, 0);                               // 0 0
      uvs[2].set(texture_scale_x, texture_scale_y);   // 1 1
    }
    else {
      uvs[0].set(0, 0);                               // 0 0
      uvs[1].set(texture_scale_x, 0);                 // 1 0
      uvs[2].set(texture_scale_x, texture_scale_y);   // 1 1
    }
  }

这解决了我的问题，但我仍然想知道解释。我可以看到 X 总是第一个，Y 总是第二个，但这可能是一个不好的结论。

我无法为我的顶点着色，所以我无法分辨哪个顶点是哪个。