ThreeJS - Проект текстуры на поверхности сетки

Question

Я хочу проецировать текстуру на поверхность меша в ThreeJS.

https://www.lanyardmarket.com/en/printed-tshirt

Эта ссылка дает результат, которого я ищу, однако я не уверен, как они его достигли.

.

Я буду обновлять этот пост по мере исследования, однако, если кто-нибудь знает, как спроецировать текстуру ThreeJS на сетку, которую я хотел бы знать.

Спасибо

Answer 1

Рабочий пример вы можете найти здесь: https://jsfiddle.net/mmalex/pcjbysn1/

BufferGeometry сохраняет координаты текстуры в атрибуте 'uv', вы можете добавить его с помощью BufferGeometry.addAttribute и получить к нему доступ через geom.attributes.uv.array.

let uvcoords = [];
let vertexCount = geom.attributes.position.array.length / 3;

// allocate array of UV coordinates (2 floats per each vertex)
uvcoords.length = 2 * vertCount;

if (geom.attributes.uv === undefined) {
    geom.addAttribute('uv', new THREE.Float32BufferAttribute(uvcoords, 2));
}

Теперь все, что вам нужно, это "спроецировать" вершины сетки на некоторую трехмерную плоскость. Эти координаты проекции появятся ваши координаты UV.

В общем случае вам нужно будет сделать Plane.projectPoint для каждой вершины. Этот подход прост и может быть оптимизирован с предварительным вращением сетки, так что компоненты вершин x и y становятся u и v соответственно. Это вы найдете в моем jsfiddle.