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

1. Направленный свет.
   Направленный свет — это тип света, который имитирует удаленный источник света, например солнце. Он излучает световые лучи в параллельном направлении, обеспечивая равномерное освещение всей сцены. Вот пример того, как создать направленный свет в Three.js:

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

1. Точечный свет:
   Точечный источник света — это источник света, который излучает свет одинаково во всех направлениях из определенной точки пространства. Он создает локализованное освещение, идеально подходящее для имитации лампочек или фонарей. Вот пример того, как создать точечный источник света в Three.js:

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

1. Рассеянное освещение.
   Рассеянное освещение — это тип света, который равномерно освещает все объекты в сцене, независимо от их положения или ориентации. Он обеспечивает общее освещение и помогает устранить резкие тени. Вот пример того, как создать окружающее освещение в Three.js:

const ambientLight = new THREE.AmbientLight(0x404040);
scene.add(ambientLight);

1. Свет полусферы.
   Свет полусферы — это градиентный свет, имитирующий источник света окружающей среды. Он обеспечивает мягкое окружающее освещение, которое постепенно смешивает два цвета. Вот пример того, как создать свет в виде полусферы в Three.js:

const hemisphereLight = new THREE.HemisphereLight(0x0000ff, 0x00ff00, 1);
scene.add(hemisphereLight);

1. Прожектор.
   Прожектор — это источник света конической формы, излучающий свет в определенном направлении под ограниченным углом. Он обычно используется для имитации сфокусированных лучей света, таких как фонарики или прожекторы на сцене. Вот пример того, как создать прожектор в Three.js:

const spotlight = new THREE.SpotLight(0xffffff, 1);
spotlight.position.set(0, 10, 0);
spotlight.target.position.set(0, 0, 0);
scene.add(spotlight);
scene.add(spotlight.target);

1. Тени.
   Тени придают 3D-сцене глубину и реалистичность. Three.js предоставляет встроенную поддержку отбрасывания и получения теней. Чтобы включить тени, вам необходимо установить свойства castShadowи receiveShadowдля соответствующих объектов. Вот пример того, как включить тени для сетки в Three.js:

mesh.castShadow = true;
mesh.receiveShadow = true;

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