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

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了三个js facevertex uv map三角形:如何仅缩放1个方向相关的知识,希望对你有一定的参考价值。

我目前有一个基于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是第二个,但这可能是一个糟糕的结论。

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

以上是关于三个js facevertex uv map三角形:如何仅缩放1个方向的主要内容,如果未能解决你的问题,请参考以下文章

计算行进立方体网格的法线、索引和 UV 坐标

Unity里的UV到底是什么

什么是三个js JSON属性中的“索引”

三角形的优雅值(map和哈希表)

OBJ可视化——UV还原(修正)

关于 OpenGL 纹理、帧缓冲区和 UV 坐标的问题 [关闭]