CubeTexture и CubeTextureLoader

CubeTexture — это специализированный тип текстуры в Three.js, используемый для создания окружающей среды (environment mapping) и эффектов отражений и преломлений. В отличие от обычных 2D-текстур, CubeTexture содержит шесть изображений, соответствующих шести граням куба: передняя (positiveZ), задняя (negativeZ), левая (negativeX), правая (positiveX), верхняя (positiveY), нижняя (negativeY). Такая организация позволяет симулировать полное окружение сцены вокруг объекта.

Создание CubeTexture вручную

CubeTexture создается с помощью конструктора THREE.CubeTexture и массива текстур:

const loader = new THREE.TextureLoader();
const images = [
    loader.load('px.jpg'), // правая грань
    loader.load('nx.jpg'), // левая грань
    loader.load('py.jpg'), // верхняя грань
    loader.load('ny.jpg'), // нижняя грань
    loader.load('pz.jpg'), // передняя грань
    loader.load('nz.jpg')  // задняя грань
];

const cubeTexture = new THREE.CubeTexture(images);
cubeTexture.needsUpdate = true;

Особенности:

  • Порядок изображений важен. Нарушение порядка приведет к некорректному отображению окружающей среды.
  • cubeTexture.needsUpdate = true необходим, чтобы текстура обновилась и корректно отображалась в сцене.

CubeTextureLoader

Для упрощения загрузки шести изображений одновременно используется класс THREE.CubeTextureLoader. Он автоматически сопоставляет изображения с гранями куба и поддерживает асинхронную загрузку:

const loader = new THREE.CubeTextureLoader();
const cubeTexture = loader.load([
    'px.jpg', // positive X
    'nx.jpg', // negative X
    'py.jpg', // positive Y
    'ny.jpg', // negative Y
    'pz.jpg', // positive Z
    'nz.jpg'  // negative Z
]);

Важные моменты:

  • Метод load() может принимать дополнительные колбэки:

    • onLoad — вызывается после успешной загрузки всех шести изображений.
    • onProgress — отслеживает прогресс загрузки.
    • onError — обрабатывает ошибки загрузки.

Пример с колбэками:

const loader = new THREE.CubeTextureLoader();
loader.load(
    [
        'px.jpg','nx.jpg','py.jpg','ny.jpg','pz.jpg','nz.jpg'
    ],
    function(texture) {
        console.log('CubeTexture успешно загружен');
        scene.background = texture;
    },
    function(xhr) {
        console.log(`Загружено ${xhr.loaded / xhr.total * 100}%`);
    },
    function(err) {
        console.error('Ошибка загрузки CubeTexture', err);
    }
);

Использование CubeTexture в сцене

  1. Фон сцены CubeTexture часто применяется как фон сцены:
scene.background = cubeTexture;

Это создаёт эффект полной окружающей среды, заменяя обычный цвет фона.

  1. Отражения на материалах Для материалов с отражениями используется свойство envMap:
const material = new THREE.MeshStandardMaterial({
    color: 0xffffff,
    metalness: 1,
    roughness: 0,
    envMap: cubeTexture
});

Особенности работы envMap:

  • Для металлических поверхностей (metalness = 1) отражения становятся полностью видимыми.
  • roughness управляет размытием отражений: чем выше, тем менее чёткие отражения.
  • CubeTexture автоматически применяется для всех отражающих точек на объекте.

Настройка фильтров и форматов

CubeTexture поддерживает стандартные настройки текстур:

cubeTexture.mapping = THREE.CubeReflectionMapping;
cubeTexture.minFilter = THREE.LinearFilter;
cubeTexture.magFilter = THREE.LinearFilter;
cubeTexture.format = THREE.RGBFormat;
  • mapping может быть THREE.CubeReflectionMapping для отражений или THREE.CubeRefractionMapping для преломлений.
  • minFilter / magFilter управляют качеством фильтрации при масштабировании.
  • format определяет цветовой формат текстуры, обычно RGB или RGBA.

Практические советы

  • Для оптимальной производительности стоит использовать меньшие разрешения текстур или компрессированные форматы.
  • CubeTexture идеально подходит для небесных сфер (skyboxes), отражающих поверхностей (металл, стекло) и реалистичного освещения.
  • Асинхронная загрузка с CubeTextureLoader предотвращает зависание интерфейса при больших изображениях.
  • Можно комбинировать CubeTexture с PMREMGenerator для генерации предварительно фильтрованных отражений, что особенно важно для PBR-материалов (MeshStandardMaterial и MeshPhysicalMaterial).

Генерация HDRI окружения

Three.js поддерживает CubeTexture и для HDR изображений с использованием RGBELoader:

new THREE.RGBELoader()
    .setDataType(THREE.UnsignedByteType)
    .load('env.hdr', function(texture) {
        const pmremGenerator = new THREE.PMREMGenerator(renderer);
        const envMap = pmremGenerator.fromEquirectangular(texture).texture;
        scene.background = envMap;
        scene.environment = envMap;
        texture.dispose();
        pmremGenerator.dispose();
    });
  • Этот подход позволяет использовать HDR карты для физически корректного освещения.
  • scene.environment автоматически применяется к PBR-материалам для отражений.

Применение в анимации и динамических сценах

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

const loader = new THREE.CubeTextureLoader();
loader.load(['new_px.jpg','new_nx.jpg','new_py.jpg','new_ny.jpg','new_pz.jpg','new_nz.jpg'], function(newTexture){
    scene.background = newTexture;
});

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

CubeTexture и CubeTextureLoader обеспечивают мощный инструмент для создания реалистичного окружения, отражений и освещения в Three.js, делая сцены визуально насыщенными и динамичными.

Оглавление