Модель освещения и типы материалов

В Three.js освещение играет ключевую роль в создании реалистичных 3D-сцен. Библиотека предоставляет несколько типов источников света, каждый из которых моделирует различные физические свойства света. Правильный выбор освещения напрямую влияет на восприятие объектов, глубину сцены и визуальное качество рендеринга.

Типы источников света

  1. AmbientLight Обеспечивает равномерное, рассеянное освещение всех объектов сцены. Не создаёт теней и не зависит от положения объектов. Используется для общей подсветки, чтобы избежать полностью тёмных областей.

    const ambientLight = new THREE.AmbientLight(0xffffff, 0.5);
scene.add(ambientLight);

  2. DirectionalLight Имитирует параллельные лучи света, как от солнца. Направление света задаётся вектором, а интенсивность постоянна по всей сцене. Может создавать тени.

    const directionalLight = new THREE.DirectionalLight(0xffffff, 1);
directionalLight.position.set(10, 10, 10);
directionalLight.castShadow = true;
scene.add(directionalLight);

  3. PointLight Точечный источник света, излучающий во все стороны. Эффект похож на лампу накаливания. Для реалистичных сцен важно настроить параметры distance и decay.

    const pointLight = new THREE.PointLight(0xff0000, 1, 50, 2);
pointLight.position.set(5, 5, 5);
scene.add(pointLight);

  4. SpotLight Направленный световой конус, похожий на прожектор. Позволяет управлять углом конуса (angle) и резкостью границ (penumbra). Используется для акцентной подсветки.

    const spotLight = new THREE.SpotLight(0xffffff, 1);
spotLight.position.set(15, 40, 35);
spotLight.angle = Math.PI / 6;
spotLight.penumbra = 0.2;
spotLight.castShadow = true;
scene.add(spotLight);

  5. HemisphereLight Симулирует свет от неба и отражённого света от земли. Верхняя часть света окрашена в один цвет, нижняя — в другой. Отлично подходит для дневных сцен на открытом воздухе.

    const hemiLight = new THREE.HemisphereLight(0xffffbb, 0x080820, 1);
scene.add(hemiLight);

Модели материалов в Three.js

Материалы определяют, как объекты взаимодействуют со светом. В Three.js реализованы как физически корректные, так и **упрощённые модели.

MeshBasicMaterial

Материал без влияния света. Используется для объектов, которые должны иметь постоянный цвет независимо от источников света.

const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });

MeshLambertMaterial

Использует модель Ламберта для рассеянного отражения. Свет влияет на материал, создавая мягкие тени и реалистичное освещение без бликов. Оптимален для объектов без глянцевых поверхностей.

const material = new THREE.MeshLambertMaterial({ color: 0x00ff00 });

MeshPhongMaterial

Добавляет отражения и блики (specular highlights) с использованием модели Фонга. Позволяет задавать shininess для контроля блеска поверхности.

const material = new THREE.MeshPhongMaterial({
    color: 0x00ff00,
    specular: 0x555555,
    shininess: 30
});

MeshStandardMaterial

Физически корректный материал, основанный на модели PBR (Physically Based Rendering). Поддерживает металлические и диэлектрические свойства через параметры metalness и roughness. Подходит для реалистичных сцен с множеством источников света.

const material = new THREE.MeshStandardMaterial({
    color: 0x00ff00,
    metalness: 0.5,
    roughness: 0.4
});

MeshPhysicalMaterial

Расширение MeshStandardMaterial с поддержкой прозрачности, отражений, тонкого слоя (clearcoat) и субповерхностного рассеяния. Используется для материалов, требующих сложного поведения света, таких как автомобильные покрытия или пластик.

const material = new THREE.MeshPhysicalMaterial({
    color: 0x00ff00,
    metalness: 0.5,
    roughness: 0.3,
    clearcoat: 1.0,
    clearcoatRoughness: 0.1
});

Взаимодействие света и материалов

  • Рассеянные материалы (Lambert, Standard) реагируют на угол падения света, создавая плавные тени.
  • Отражающие материалы (Phong, Physical) формируют блики, изменяя интенсивность в зависимости от позиции источника и угла обзора камеры.
  • Физически корректные материалы позволяют комбинировать несколько источников света и сохраняют реалистичное поведение независимо от их количества и расположения.

Правильное сочетание типа света и материала определяет качество визуализации. Например, точечный свет с Phong или Physical материалом создаёт выразительные блики, тогда как для Lambert лучи света дают только мягкие тени без блеска.

Настройка теней

Для реалистичного освещения важно включить тени:

  1. Разрешить объекту отбрасывать тени:

    mesh.castShadow = true;

  2. Разрешить объекту принимать тени:

    mesh.receiveShadow = true;

  3. Убедиться, что свет поддерживает тени:

    directionalLight.castShadow = true;

Настройки shadow.mapSize, shadow.bias и shadow.camera позволяют контролировать качество и точность теней, предотвращая артефакты и “зазубрины” на краях.

Цвет и интенсивность света

Цвет источника света задаёт атмосферу сцены. Например, тёплые оттенки (желтые, оранжевые) создают ощущение заката, холодные (синие) — дневного света. Интенсивность (intensity) регулирует яркость света, а параметр distance у точечных источников ограничивает радиус действия.

Применение HDR и глобального освещения

Three.js поддерживает HDR-текстуры и environment maps для имитации сложного освещения:

  • Environment maps позволяют материалам отражать окружающую среду.
  • HDRI (High Dynamic Range Imaging) создаёт естественные отражения и освещает сцену более реалистично, чем стандартные источники света.
const hdrLoader = new THREE.RGBELoader();
hdrLoader.load('path/to/hdr.hdr', function(texture) {
    texture.mapping = THREE.EquirectangularReflectionMapping;
    scene.environment = texture;
});

Итоговая схема построения сцены

  1. Выбор типов источников света в зависимости от задачи.
  2. Настройка материалов с учётом физической модели отражения.
  3. Включение теней и их корректная настройка.
  4. Использование environment maps или HDR для повышения реализма.

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

Оглавление