Текстуры (часть 2)

В прошлой статье мы начали разбирать что такое текстуры и как мы можем их добавить в нашем коде. Сегодня мы продолжим тему текстур и научимся их модифицировать!

Как разворачиваются текстуры?

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

Как вы можете видеть, текстура растягивается или сжимается различными способами, чтобы покрыть геометрию.
Это называется UV-развёрткой. Вы можете представить это как разворачивание оригами или конфетной обертки, чтобы сделать ее плоской.

Каждая вершина будет иметь 2D координаты на плоскости (обычно квадратной).

Вы можете увидеть эти UV координаты в свойстве geometry.attributes.uv:

console.log(geometry.attributes.uv);

Эти UV-координаты генерируются Three.js при использовании примитивов. Если вы создаете собственную геометрию и хотите наложить на нее текстуру, вам придется указать UV-координаты.

Если вы создаете геометрию с помощью 3D-программы, вам также придется выполнить развертку UV-координат.

Преобразование текстур

Давайте вернемся к нашему кубу с одной текстурой и посмотрим, какие преобразования мы можем применить к этой текстуре.

Повтор

Вы можете сделать текстуру повторяемой с помощью свойства repeat, тип этого свойств - Vector2, что означает, что у него есть свойства x и y.

Попробуем изменить эти свойства:

const colorTexture = textureLoader.load('/textures/door/color.jpg');
colorTexture.repeat.x = 2;
colorTexture.repeat.y = 2;

Как видите, текстура не повторяется, но она стала меньше, а последний пиксель кажется супер растянутым.

Это связано с тем, что текстура по умолчанию не будет повторяться. Чтобы изменить это, необходимо обновить свойства wrapS и wrapT с помощью константы THREE.RepeatWrapping.

• wrapS для оси x
• wrapT для оси y

colorTexture.wrapS = THREE.RepeatWrapping;
colorTexture.wrapT = THREE.RepeatWrapping;

Также можете чередовать направления текстуры с помощью:

colorTexture.wrapS = THREE.MirroredRepeatWrapping;
colorTexture.wrapT = THREE.MirroredRepeatWrapping;

Вращение

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

colorTexture.rotation = Math.PI * 0.25;

Если убрать свойство repeat, то можно увидеть, что вращение происходит вокруг левого нижнего угла куба:

На самом деле это нулевые координаты. Если вы хотите изменить точку вращения, вы можете сделать это с помощью свойства center, которое также является Vector2:

colorTexture.rotation = Math.PI * 0.25;
colorTexture.center.x = 0.5;
colorTexture.center.y = 0.5;

Теперь текстура будет вращаться вокруг центра.

Смещение

Вы можете сместить текстуру с помощью свойства offset, которое также является Vector2 со свойствами x и y. Изменение этих свойств просто сместит UV-координаты:

colorTexture.offset.x = 0.5;
colorTexture.offset.y = 0.5;

На этом сегодня все, надеюсь вам это было полезно!