DirectionalLight и его тени

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

Создание DirectionalLight

Создание направленного света в Three.js выполняется через конструктор:

const light = new THREE.DirectionalLight(0xffffff, 1);
light.position.set(10, 10, 10);
scene.add(light);
  • Первый параметр (0xffffff) задаёт цвет света.
  • Второй параметр (1) — интенсивность.
  • position определяет направление, откуда свет падает на объекты. Направление лучей определяется вектором от позиции света к центру сцены или конкретного объекта.

Включение и настройка теней

Для использования теней необходимо включить их на самом источнике света и на объекте, который должен их отбрасывать:

light.castShadow = true;

На объектах, которые должны отбрасывать тени:

mesh.castShadow = true;

На объектах, которые должны принимать тени:

mesh.receiveShadow = true;

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

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

light.shadow.mapSize.width = 1024;
light.shadow.mapSize.height = 1024;

light.shadow.camera.left = -10;
light.shadow.camera.right = 10;
light.shadow.camera.top = 10;
light.shadow.camera.bottom = -10;
light.shadow.camera.near = 0.5;
light.shadow.camera.far = 50;
  • mapSize — разрешение карты теней. Чем выше, тем более чёткими будут тени, но выше нагрузка на рендеринг.
  • Параметры камеры (left, right, top, bottom) определяют область сцены, которая будет покрыта тенью.
  • near и far задают диапазон видимости камеры для теней.

Смягчение теней

Для более реалистичного визуального эффекта используется размытие теней:

light.shadow.radius = 4;

Параметр radius задаёт мягкость края тени. В сочетании с увеличенным mapSize достигается плавный переход между освещённой и затенённой областью.

Примеры использования DirectionalLight с тенью

const planeGeometry = new THREE.PlaneGeometry(200, 200);
const planeMaterial = new THREE.MeshStandardMaterial({ color: 0x808080 });
const plane = new THREE.Mesh(planeGeometry, planeMaterial);
plane.rotation.x = - Math.PI / 2;
plane.receiveShadow = true;
scene.add(plane);

const boxGeometry = new THREE.BoxGeometry(2, 2, 2);
const boxMaterial = new THREE.MeshStandardMaterial({ color: 0xff0000 });
const box = new THREE.Mesh(boxGeometry, boxMaterial);
box.position.set(0, 1, 0);
box.castShadow = true;
scene.add(box);

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

Оптимизация теней

  • Уменьшение области ортографической камеры (left, right, top, bottom) уменьшает пикселизацию и улучшает производительность.
  • Использование mapSize не выше 2048–4096 для сцен со сложной геометрией.
  • Настройка bias помогает избавиться от «зубцов» на тенях:
light.shadow.bias = -0.0005;

bias смещает тени вдоль направления луча, предотвращая артефакты самозатенения.

Направление света и ориентация тени

Направление теней определяется не только позицией света, но и вектором target. По умолчанию свет направлен на центр сцены:

light.target.position.set(0, 0, 0);
scene.add(light.target);

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

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

  • Лучи всегда параллельны, поэтому расстояние от света до объекта не влияет на интенсивность.
  • Направленные источники света идеальны для больших открытых сцен (например, улиц, ландшафтов).
  • Для сложной динамической сцены может потребоваться несколько DirectionalLight с различными направлениями, чтобы эмулировать рассеянное солнечное освещение.

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

Оглавление