Структура объекта Texture

В Three.js объект Texture представляет собой текстуру, которую можно применить к материалам для придания им визуальных свойств. Текстуры могут быть как простыми изображениями, так и сложными картами нормалей, отражений или альфа-каналов. Основной задачей Texture является хранение данных изображения и управление их отображением на поверхности геометрии.

Создание текстуры

Текстура создается через конструктор:

const texture = new THREE.Texture(image);
  • image — HTML-элемент (<img>, <canvas>, <video>) или объект, содержащий данные изображения.
  • После создания текстуры необходимо вызвать texture.needsUpdate = true, чтобы она была обработана рендерером.

Для загрузки изображений чаще используют TextureLoader:

const loader = new THREE.TextureLoader();
const texture = loader.load('texture.jpg');

TextureLoader.load() автоматически устанавливает флаг needsUpdate и обеспечивает асинхронную загрузку.

Основные свойства объекта Texture

  • image — исходный источник текстуры. Может быть изображением, канвой или видео.

  • mapping — определяет способ наложения текстуры на геометрию. По умолчанию используется THREE.UVMapping.

  • wrapS и wrapT — режимы оборачивания текстуры по горизонтали и вертикали:

    • THREE.RepeatWrapping — повторение текстуры.
    • THREE.ClampToEdgeWrapping — растяжение по краям.
    • THREE.MirroredRepeatWrapping — зеркальное повторение.

  • repeat — вектор типа Vector2, задающий количество повторов текстуры в каждом направлении.

  • offset — смещение текстуры по координатам UV.

  • rotation — угол вращения текстуры вокруг центра.

  • center — точка, вокруг которой происходит вращение.

  • format — формат пикселей текстуры (THREE.RGBAFormat, THREE.RGBFormat и др.).

  • minFilter и magFilter — фильтры для масштабирования текстуры:

    • THREE.LinearFilter — линейная интерполяция.
    • THREE.NearestFilter — пиксельная, без сглаживания.

  • anisotropy — уровень анизотропной фильтрации для повышения качества при косом просмотре.

  • encoding — цветовое пространство текстуры (THREE.LinearEncoding, THREE.sRGBEncoding).

Управление координатами UV

Texture тесно связан с координатами UV геометрии. Координаты UV определяют, как текстура накладывается на вершины объекта. Например:

geometry.attributes.uv.array; // доступ к массиву UV

Параметры repeat, offset и rotation изменяют финальное отображение изображения на поверхности, не меняя исходных координат UV.

Фильтрация и mipmaps

Mipmaps создаются автоматически при загрузке текстуры и улучшают качество при уменьшении объекта на экране. Свойства фильтрации управляют выбором текстурного значения:

  • minFilter — используется при уменьшении размера изображения на экране.
  • magFilter — используется при увеличении.
  • Пример применения:
texture.minFilter = THREE.LinearMipMapLinearFilter;
texture.magFilter = THREE.LinearFilter;

Использование mipmaps рекомендуется для оптимизации качества и производительности.

Анизотропная фильтрация

Свойство anisotropy усиливает качество текстуры на угловых поверхностях. Значение берется из возможностей устройства:

const maxAnisotropy = renderer.capabilities.getMaxAnisotropy();
texture.anisotropy = maxAnisotropy;

Это особенно важно для напольных текстур или дорожек, которые визуально простираются вдаль.

Применение текстур в материалах

Текстура может быть назначена различным материалам через соответствующие свойства:

const material = new THREE.MeshStandardMaterial({
    map: texture,            // Основная цветовая текстура
    normalMap: normalTexture, // Карта нормалей
    roughnessMap: roughnessTexture, // Карта шероховатости
    alphaMap: alphaTexture   // Карта прозрачности
});
  • map — базовая текстура цвета.
  • normalMap — изменяет нормали для имитации рельефа.
  • roughnessMap — задает коэффициент шероховатости.
  • alphaMap — определяет прозрачные участки материала.

Особенности работы с Texture

  1. Обновление текстуры Любое изменение исходного изображения требует установки флага:

    texture.needsUpdate = true;

  2. Клонирование и копирование Текстуры можно клонировать:

    const newTexture = texture.clone();

    Это полезно для материалов с похожими текстурами, но разными параметрами.

  3. Управление памятью Для удаления текстуры и освобождения GPU-памяти используется метод:

    texture.dispose();

  4. Поддержка видео и канвасов Текстуры могут динамически обновляться при использовании <video> или <canvas>:

    const videoTexture = new THREE.VideoTexture(videoElement);
videoTexture.minFilter = THREE.LinearFilter;
videoTexture.magFilter = THREE.LinearFilter;
videoTexture.format = THREE.RGBFormat;

Сводка ключевых возможностей

  • Хранение и управление изображениями для материалов.
  • Поддержка различных источников: изображений, видео, канвасов.
  • Настройка повторения, смещения, вращения и фильтрации.
  • Работа с UV-координатами и цветовым пространством.
  • Использование в различных типах материалов: стандартных, физических, прозрачных.

Эта гибкость делает Texture центральным элементом при создании реалистичных и оптимизированных визуальных эффектов в Three.js.

Оглавление