Перейти к руководству
Three.js Lightingавтор CloudAI-X

Three.js Lighting Skill.

Сделайте модель читаемой с помощью продуманной схемы освещения, а не беспорядочного повышения яркости.

  • 3D
  • Three.js
Обзор источника · Three.js LightingSKILL.md
Задача 3D Результат • Схема освещения с определёнными ролями источников • Параметры отбрасывания и приёма теней • План окружения и производительности Перед началом Рабочий проект Three.js с рендерером; сверяйте примеры из источника с установленной версией. Дополнительные элементы управления и загрузчики зависят от выбранного пути.
Редакционное резюме · источник проверен 2026-10-07 · не сгенерированный пример

01 Возможности

Three.js Lighting: формируем свет и тени

Выбор света, настройка теней, HDR-окружения и практичные схемы освещения.

Рабочий процесс на основе источникаНе тест выполнения

Рабочий подход

Three.js Lighting различает окружающий, полусферический, направленный, точечный, прожекторный и прямоугольный площадной свет. Эти варианты отличаются направленностью, поддержкой теней, реакцией материалов и стоимостью. Источник также описывает освещение окружения и схемы для студии или улицы.

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

Ожидаемые результаты

  • Схема освещения с определёнными ролями источников
  • Параметры отбрасывания и приёма теней
  • План окружения и производительности
Смотреть пример задания

От задания до проверки

  1. 01
    Определите роли света

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

  2. 02
    Настройте тени

    Проверьте вместе параметры рендерера, света и объектов, затем оцените покрытие и смещение (bias).

  3. 03
    Оцените поверхность

    Прежде чем увеличивать число источников или разрешение теней, оцените предполагаемые материалы и окружение.

02 Когда использовать

Когда использовать

Рабочий проект Three.js с рендерером; сверяйте примеры из источника с установленной версией. Дополнительные элементы управления и загрузчики зависят от выбранного пути.

Хорошо подходит

  • Презентация продуктаСочетание основного, заполняющего и контурного света может сделать форму объекта читаемой.
  • Сцены на открытом воздухеНаправленный солнечный свет и полусферическое заполнение дают чёткую отправную точку для дневного освещения.

Ограничения, которые нужно проверить

  • Неодинаковая поддержка тенейИсточник разделяет типы света с встроенными тенями и те, которым нужно другое решение.
  • Вспомогательные классы зависят от версииРасширенные вспомогательные классы теней и импорты нужно сверять с установленной версией.

Подготовьте исходные данные

  • Масштаб сценыУкажите размеры объектов и область, где нужны тени.
  • Выбор материалаОпределите поверхности, реакция которых важна.
  • Образец освещенияОпишите желаемое настроение студийной или уличной сцены.

03 Важные решения

Важные решения

  1. Систематическая диагностика теней

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

  2. Сфокусированное покрытие

    Узко заданная камера теней концентрирует детализацию на нужной области.

04 Пример задания

Попробуйте точное задание

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

Проверьте настройку

Используйте нужную папку threejs-skills как руководство для агента. Это не среда выполнения Three.js, и она не устанавливает ресурсы сцены.

Исходный файл из репозитория
https://github.com/CloudAI-X/threejs-skills/blob/b1c623076c661fc9b03dac19292e825a5d106823/skills/threejs-lighting/SKILL.md

Рабочий проект Three.js с рендерером; сверяйте примеры из источника с установленной версией. Дополнительные элементы управления и загрузчики зависят от выбранного пути.

Начните с одного результата

Перед запуском навыка адаптируйте в этом задании объём работы, исходные материалы и ограничения.

Пример задания
Используйте threejs-lighting, чтобы создать сдержанную студийную схему для этого продукта. Объясните роль каждого источника света, проверьте совместимость материалов и включите только необходимые тени. Прежде чем повышать разрешение, проверьте shadow acne (артефакты самозатенения), отделённые тени и затраты на рендеринг.

Проверьте результат

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

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

OpenDesign предоставляет локальное дизайн-пространство для агентов программирования. Наличие в каталоге не означает, что навык включён в поставку или что его внешние инструменты, учётные данные и программные зависимости входят в комплект.

05 Источник и лицензия

Источник и лицензия

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

Владелец источника
CloudAI-X
Репозиторий
CloudAI-X/threejs-skills
Лицензия
Не подтверждена — перед повторным использованием изучите условия исходного проекта.
Проверенный снимок
2026-10-07 · b1c623076c66
Редакционное резюме источника
Выбор света, настройка теней, HDR-окружения и практичные схемы освещения.

Оригинальное резюме от OpenDesign на основе указанного источника. Звёзды репозитория — датированный показатель популярности, а не использование навыка и не оценка качества.

06 Вопросы перед началом

Вопросы перед началом

Совпадает ли освещение окружения с фоном?

Нет. Источник использует отдельные назначения scene.environment и scene.background.

Достаточно ли castShadow у меша?

Нет. Участвуют также рендерер, источник света и принимающие поверхности.

Должны ли все источники света отбрасывать тени?

Источник рекомендует использовать тени выборочно и ограничивать число источников света.

OpenDesign

Оставьте место для следующей итерации дизайна.

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

Исходный файл из репозитория
https://github.com/CloudAI-X/threejs-skills/blob/b1c623076c661fc9b03dac19292e825a5d106823/skills/threejs-lighting/SKILL.md