Растяжка текстуры по сложенным геометриям

Question

Я строю лабиринт первого лица - каждая стена в лабиринте THREE.PlaneGeometry. Насколько я понимаю, гораздо лучше использовать все эти стены, объединенные в единый объект. Я создал класс «стены», которая делает это каждый раз, когда новая «стена», добавлена:

this.geometry.merge(wall.mesh.geometry, wall.mesh.matrix);

После добавления всех стен, я создаю материал + применить текстуру:

this.material = new THREE.MeshBasicMaterial({ map: this.texture, side: THREE.DoubleSide }); this.mesh = new THREE.Mesh(this.geometry, this.material);

Проблема, с которой я сталкиваюсь, заключается в том, что стены не имеют одинаковой ширины, и поэтому отображение текстур происходит на всех фанках (Image Here) на объединенной географии. Каждая плоскость получает всю текстуру и растягивает ее до размеров. Принимая во внимание, что все стены требуют одинакового текстурирования, что было бы лучшим способом «обернуть» текстуру вокруг стен? Или я должен сначала строить свои стены по-разному?

Я также дал как Three.MultiMaterial(materials), так и THREE.MeshFaceMaterial(materials) a go (дающий уникальный материал каждой стене), но они оба серьезно убивают производительность.

Спасибо заранее,

Happy Days,

J

Скриншот: Maze Image

Answer 1

Выполнить цикл по каждому faceVertexUV гео каждой стены. Умножьте каждый UV.x на ширину стены (исключить растяжение/сжатие). Добавить смещение к UV.x стенки, которая соответствует суммированию ширины стен, таким образом далеко:

var len = wall.geometry.faceVertexUvs[0].length; 
for (var i = 0; i < len; i++){ 
    for (var j = 0; j < 3; j++){ 
     wall.geometry.faceVertexUvs[0][i][j].x *= wall.w; 
    wall.geometry.faceVertexUvs[0][i][j].x += this.w; 
    } 
} 
this.w += wall.w;