RectAreaLight

RectAreaLight — это тип источника света в библиотеке Three.js, предназначенный для имитации освещения от плоских прямоугольных поверхностей, таких как окна, панели или светильники. В отличие от PointLight или SpotLight, RectAreaLight создаёт равномерное освещение, распространяющееся в определённом направлении, и не имеет резких точек света.

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

  • Создаёт мягкие тени и равномерное освещение.
  • Направлен в одну сторону (свет выходит только из лицевой стороны поверхности).
  • Используется только с материалами MeshStandardMaterial и MeshPhysicalMaterial.
import * as THREE from 'three';
import { RectAreaLightHelper } from 'three/examples/jsm/helpers/RectAreaLightHelper.js';

// Создание источника света
const rectLight = new THREE.RectAreaLight(0xffffff, 5, 10, 10); // цвет, интенсивность, ширина, высота
rectLight.position.set(5, 5, 5);
rectLight.lookAt(0, 0, 0);

scene.add(rectLight);

// Добавление вспомогательного объекта для визуализации
const helper = new RectAreaLightHelper(rectLight);
rectLight.add(helper);

Конструктор и параметры

Конструктор RectAreaLight имеет следующий синтаксис:

new THREE.RectAreaLight(color, intensity, width, height)
  • color — цвет света в формате HEX или THREE.Color.
  • intensity — числовое значение яркости света.
  • width — ширина прямоугольного источника.
  • height — высота прямоугольного источника.

В отличие от других типов света, RectAreaLight не затухает с расстоянием по формуле 1/r², но можно управлять яркостью через параметр intensity.

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

RectAreaLight освещает сцену только в направлении нормали прямоугольника. Для задания ориентации используют метод lookAt() или устанавливают rotation объекта:

rectLight.lookAt(new THREE.Vector3(0, 0, 0));

Важно: освещение не проходит через объект — задняя сторона прямоугольника остаётся тёмной. Для создания эффектов, где свет отражается или рассеивается, используют дополнительные источники или глобальное освещение (AmbientLight, HemisphereLight).

Использование с материалами

Материалы, совместимые с RectAreaLight:

  • MeshStandardMaterial — физически корректный стандартный материал.
  • MeshPhysicalMaterial — расширенный вариант с поддержкой металличности, шероховатости, прозрачности.

Пример применения:

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

const geometry = new THREE.BoxGeometry(2, 2, 2);
const cube = new THREE.Mesh(geometry, material);

scene.add(cube);

Только такие материалы корректно реагируют на мягкие тени и рассеянное освещение от RectAreaLight.

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

Для отладки и визуального контроля используют RectAreaLightHelper:

import { RectAreaLightHelper } from 'three/examples/jsm/helpers/RectAreaLightHelper.js';

const helper = new RectAreaLightHelper(rectLight);
rectLight.add(helper);

Хелпер показывает положение, размер и направление света в сцене. Он полезен при компоновке сложных интерьеров.

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

  • Для реалистичного эффекта комбинируют RectAreaLight с отражающими поверхностями и глобальным освещением.
  • Использование большого количества RectAreaLight может сильно влиять на производительность, особенно при расчёте мягких теней.
  • Настройка ширины и высоты напрямую влияет на область освещения: больше площадь — более мягкий свет.
  • Интенсивность света лучше регулировать через intensity, а не масштаб объекта, чтобы сохранить физическую корректность.

Пример сложного применения

const rectLight1 = new THREE.RectAreaLight(0xffaa00, 3, 5, 10);
rectLight1.position.set(-5, 5, 5);
rectLight1.lookAt(0, 0, 0);
scene.add(rectLight1);

const rectLight2 = new THREE.RectAreaLight(0x00aaff, 2, 10, 5);
rectLight2.position.set(5, 5, -5);
rectLight2.lookAt(0, 0, 0);
scene.add(rectLight2);

scene.add(new THREE.AmbientLight(0x404040, 0.5)); // мягкий фон

В этом примере два прямоугольных источника света создают комбинированное освещение с контрастом тёплого и холодного света. Использование AmbientLight смягчает тени и предотвращает полностью чёрные участки сцены.

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

Оглавление