Повторение и смещение: repeat, offset, wrapS, wrapT

В Three.js управление текстурами осуществляется через объект THREE.Texture. Среди его ключевых свойств для контроля отображения текстуры на геометрии выделяются repeat, offset, wrapS и wrapT. Эти параметры позволяют задавать повторение, смещение и поведение при выходе текстуры за пределы координат UV.

repeat — повторение текстуры

Свойство repeat объекта Texture определяет, сколько раз текстура повторяется по осям U и V:

texture.repeat.set(2, 3);
  • Первый аргумент (2) — повторение по оси U (горизонтальная координата UV).
  • Второй аргумент (3) — повторение по оси V (вертикальная координата UV).

Если repeat больше 1, текстура многократно отображается на поверхности. Значения меньше 1 сжимают текстуру на соответствующей оси. Значения могут быть дробными, например repeat.set(0.5, 1.5).

offset — смещение текстуры

Свойство offset позволяет смещать текстуру по координатам UV:

texture.offset.set(0.25, 0.5);
  • Первый аргумент (0.25) — смещение по U.
  • Второй аргумент (0.5) — смещение по V.

Смещение задается в долях текстуры, где 1 соответствует полной ширине или высоте. Например, offset.set(1, 0) сдвигает текстуру на полную ширину по U, что эквивалентно циклическому сдвигу при повторяющемся паттерне.

wrapS и wrapT — поведение при выходе за пределы UV

Свойства wrapS и wrapT управляют тем, как текстура ведет себя, если координаты UV выходят за диапазон [0, 1]:

  • wrapS — отвечает за ось U.
  • wrapT — отвечает за ось V.

Возможные значения:

  1. THREE.RepeatWrapping — текстура повторяется бесконечно.
  2. THREE.ClampToEdgeWrapping — координаты за пределами [0, 1] «зажимаются» к краю текстуры.
  3. THREE.MirroredRepeatWrapping — текстура повторяется с зеркальным отражением при каждом повторе.

Пример:

texture.wrapS = THREE.RepeatWrapping;
texture.wrapT = THREE.MirroredRepeatWrapping;

В данном примере текстура по горизонтали повторяется обычным образом, а по вертикали — с зеркальными отражениями.

Связь между repeat, offset и wrap

Свойства repeat и offset работают совместно с wrapS и wrapT:

  • При RepeatWrapping повторение за пределами [0, 1] определяется значением repeat.
  • При ClampToEdgeWrapping значение repeat влияет на растяжение текстуры, но вне [0,1] цвет граничного пикселя используется.
  • MirroredRepeatWrapping сочетает повторение с зеркальными переворотами при каждом повторе.

Примеры практического использования

  1. Создание плиточного пола:
const floorTexture = new THREE.TextureLoader().load('floor.jpg');
floorTexture.wrapS = floorTexture.wrapT = THREE.RepeatWrapping;
floorTexture.repeat.set(10, 10);

const floorMaterial = new THREE.MeshStandardMaterial({ map: floorTexture });
const floor = new THREE.Mesh(new THREE.PlaneGeometry(500, 500), floorMaterial);
floor.rotation.x = -Math.PI / 2;
scene.add(floor);
  1. Сдвиг текстуры для анимации:
function animate() {
    requestAnimationFrame(animate);
    waterTexture.offset.y += 0.01;
    renderer.render(scene, camera);
}

Смещение позволяет создавать эффект движения воды, облаков или ленточного фона.

  1. Зеркальное повторение для симметричного узора:
const patternTexture = new THREE.TextureLoader().load('pattern.png');
patternTexture.wrapS = patternTexture.wrapT = THREE.MirroredRepeatWrapping;
patternTexture.repeat.set(4, 4);

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

Особенности использования

  • Изменения repeat и offset требуют установки texture.needsUpdate = true, если текстура уже применена к материалу.
  • Для MirroredRepeatWrapping важно, чтобы размеры текстуры были степени двойки (например, 256×256, 512×512) для корректного отображения на всех платформах.
  • При анимации текстур лучше комбинировать offset с RepeatWrapping для плавного циклического движения.

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

Оглавление