三个JS Facevertex UV Map Triangles:仅如何缩放1个方向

Question

我目前有一个基于杜布先生教程的示例的城市："如何用100行进行程序城市"。在教程中，您可以看到他创建了100个建筑网格，然后出于性能原因将其合并为1个城市网格。然后制作一种应用于城市网眼的材料，使每座建筑物都具有质感。

我想停止的是建筑物质地的夹紧和拉伸。为了创建更现实的"窗户在不同建筑物上的高度相同"的外观。

我认为的解决方案是用几何形状的缩放值操纵面顶点紫外线。

使用以下代码我可以缩放纹理2x。

  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的第二，但这可能是一个不好的结论。

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