SpotLight: угол конуса и полутень

В Three.js объект SpotLight представляет собой источник света с направленным конусом. В отличие от PointLight, который освещает пространство во всех направлениях, SpotLight позволяет создавать сцены с направленным освещением, подчеркивая определённые объекты и создавая реалистичные эффекты света и тени. Основные параметры, влияющие на форму и интенсивность конуса света, включают angle, penumbra и decay.

Угол конуса (angle)

Свойство angle определяет ширину конуса света. Значение измеряется в радианах и задаёт угол между осью света и границей его конуса.

const spotlight = new THREE.SpotLight(0xffffff, 1);
spotlight.angle = Math.PI / 6; // 30 градусов
  • Малый угол создаёт узкий, направленный конус света, похожий на фонарик.
  • Большой угол позволяет свету рассеиваться, охватывая большую область сцены.

Важно учитывать, что angle ограничен сверху значением Math.PI/2, иначе конус света не будет корректно рендериться.

Полутень (penumbra)

Полутень создаёт эффект мягкого края конуса света, где интенсивность постепенно уменьшается к границе. Свойство penumbra принимает значение от 0 до 1:

  • 0 — резкий край конуса (жёсткая тень).
  • 1 — максимально мягкий переход света к тени.
spotlight.penumbra = 0.5; // Полумягкая граница

Полутень особенно важна при визуализации реалистичных сцен, где жёсткие тени выглядят ненатурально. Комбинация angle и penumbra позволяет точно регулировать, насколько свет рассеивается по объектам и окружению.

Распределение интенсивности света (decay и distance)

Свойство decay задаёт экспоненциальное затухание света с расстоянием:

spotlight.decay = 2; // Реалистичное затухание по физическим законам
spotlight.distance = 50; // Максимальная дальность действия света
  • decay = 1 — линейное уменьшение интенсивности.
  • decay = 2 — квадратное уменьшение, соответствует законам физики (интенсивность света обратно пропорциональна квадрату расстояния).

Свойство distance ограничивает радиус действия света. За пределами этого значения интенсивность светового потока будет равна нулю.

Создание тени с SpotLight

Для включения теней у SpotLight необходимо:

  1. Активировать генерацию теней:
spotlight.castShadow = true;
  1. Настроить параметры теней для повышения качества:
spotlight.shadow.mapSize.width = 1024;
spotlight.shadow.mapSize.height = 1024;
spotlight.shadow.camera.near = 0.5;
spotlight.shadow.camera.far = 50;
spotlight.shadow.focus = 1;
  • mapSize влияет на детализацию теней; большее значение — более чёткая тень.
  • near и far определяют диапазон камеры теней, ограничивая область рендеринга.
  • focus управляет мягкостью края тени, в сочетании с penumbra создаёт естественные полутона.

Визуализация конуса света

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

const helper = new THREE.SpotLightHelper(spotlight);
scene.add(helper);

Это помогает точно настроить угол конуса, позицию источника и распределение света по сцене.

Практические рекомендации

  • Узкий конус с малым angle и низким penumbra идеально подходит для сцен с акцентом на объект, например, для театрального освещения.
  • Широкий конус с большим penumbra создаёт естественное рассеянное освещение, подходящее для интерьерных сцен.
  • Настройка decay и distance помогает избежать слишком резких контрастов и нереалистичных падений света.
  • Для динамических сцен важно обновлять SpotLightHelper после изменения позиции или угла света:
helper.update();
  • Комбинирование нескольких SpotLight с разными angle и penumbra позволяет моделировать сложные сценарии освещения и создавать глубокие полутени.

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

Оглавление