三个js facevertex uv map三角形：如何仅缩放1个方向

Posted 2021-05-02

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

我想要阻止的是建筑纹理的夹紧和拉伸。为了创造一个更现实的“窗户在不同建筑物上的高度相同”的样子。

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

使用以下代码，我可以缩放纹理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);
    }
  }

但是我想只垂直缩放并单独留下水平缩放。但我并不完全理解2个三角形之间的关系。

答案

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

另一答案

使用调试图像并猜测一些值后，我来到下面的代码来垂直，水平或两者都缩放纹理。

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

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