Три треугольника js facevertex uv map: как масштабировать только 1 направление

Question

В настоящее время у меня есть город, основанный на примере учебника г-на Дуба: "Как создать процедурный город из 100 строк". В уроке вы можете увидеть, что он создает 100 строительных сеток, которые затем объединяются в одну городскую сетку по соображениям производительности. Затем делается один материал, который применяется к городской сетке, придающей каждому зданию текстуру.

То, что я хочу остановить, - это сжатие и растяжение текстуры здания. Для того чтобы создать более реалистичный вид "окна одинаковой высоты на разных зданиях" выглядят.

То, что я думаю, было бы решением - манипулировать 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

После использования отладочного изображения и угадывания некоторых значений я пришел к следующему коду для масштабирования текстуры по вертикали, горизонтали или обоим.

  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 второй, но это может быть неверным выводом.

Я не мог раскрасить свои вершины, поэтому я не могу сказать, какая вершина есть какая.

Answer 2

Возможно, вам следует изменить .repeat свойство текстуры городской модели. ссылка на документ: https://threejs.org/docs/