Витражная лампа Тиффани

Используйте three.js, чтобы создать одностраничную интерактивную сцену с «настольной витражной лампой Тиффани». Всё содержимое должно процедурно генерироваться кодом — не загружайте внешние изображения, модели или шрифты.

Сцена разворачивается в тёмной комнате поздней ночью: деревянный стол, стена и горящая настольная лампа. Абажур собран из сотен неправильных стеклянных фрагментов, обрамлённых свинцовыми переплётами, с волнистой фестончатой каймой по нижнему краю; в узоре — колибри, красный гибискус, розовые лилии и вьющиеся стебли с листьями. Стекло должно быть полупрозрачным и подсвеченным изнутри: сторона каждого фрагмента, расположенная ближе к лампочке, ярче, а поверхность имеет лёгкую рябь ручного стекла. Основание и стойка лампы выполнены из бронзы с окисленной зелёной патиной и рельефным орнаментом-завитком. Внутри лампочки видна вольфрамовая нить накаливания.

Главное — свет. Когда лампа включена, цветные световые пятна ложатся на столешницу и стену, свинцовые переплёты отбрасывают на стол сетку тёмных линий, под краем абажура висит едва заметная тёплая дымка, а в воздухе дрейфуют пылинки, видимые только в свете. Общий стиль кинематографичный: HDR-рендеринг + мягкое свечение + глубина резкости + зерно виньетки — сдержанно, без пересветов и резкой яркости. Когда лампа выключена, оставьте немного холодного лунного света из окна, чтобы силуэт и цепочка выключателя оставались видны. Замените в узоре абажура колибри и гибискус на стрекоз и кувшинки: переведите палитру стекла в холодные синие и зелёные тона с фиолетовыми акцентами, добавьте на бронзовое основание рельефный узор водной ряби и окрасьте проецируемые световые пятна на стене в соответствующие водянистые сине-зелёные оттенки. Взаимодействия:
- Прокрутка страницы управляет движением камеры: от общего плана к виду сверху, макросъёмке абажура и крупному плану основания; в конце прокрутки включается режим свободного вращения
- Потяните за цепочку, чтобы включить или выключить лампу; перетаскивайте цепочку вверх и вниз для плавной регулировки яркости; лампа загорается фрагмент за фрагментом — от края абажура к верхушке
- Нажатие на абажур поднимает его целиком; после этого можно вынуть отдельный стеклянный фрагмент и поднести к глазам для осмотра
- Двойное нажатие на основание разбирает лампу на парящие детали
- Три цветовые схемы (оригинальная / холодная / янтарная); при переключении цвета стекают вниз от верхушки абажура

Макет: слева — крупный вертикальный заголовок с засечками, исчезающий при прокрутке; справа — колонка лёгких кнопок-капсул («Включить», «Поднять абажур», «Разобрать», «Свободный вид») и точки цветовых схем, при этом подписи кнопок отражают текущее состояние. Сохраните минималистичный общий дизайн в соответствии с тёмной тональностью сцены; на мобильных устройствах он автоматически преобразуется в горизонтальный ряд внизу.

Используйте three.js, чтобы создать одностраничную интерактивную сцену с «настольной витражной лампой Тиффани». Всё содержимое должно процедурно генерироваться кодом — не загружайте внешние изображения, модели или шрифты.

Сцена разворачивается в тёмной комнате поздней ночью: деревянный стол, стена и горящая настольная лампа. Абажур собран из сотен неправильных стеклянных фрагментов, обрамлённых свинцовыми переплётами, с волнистой фестончатой каймой по нижнему краю; в узоре — колибри, красный гибискус, розовые лилии и вьющиеся стебли с листьями. Стекло должно быть полупрозрачным и подсвеченным изнутри: сторона каждого фрагмента, расположенная ближе к лампочке, ярче, а поверхность имеет лёгкую рябь ручного стекла. Основание и стойка лампы выполнены из бронзы с окисленной зелёной патиной и рельефным орнаментом-завитком. Внутри лампочки видна вольфрамовая нить накаливания.

Главное — свет. Когда лампа включена, цветные световые пятна ложатся на столешницу и стену, свинцовые переплёты отбрасывают на стол сетку тёмных линий, под краем абажура висит едва заметная тёплая дымка, а в воздухе дрейфуют пылинки, видимые только в свете. Общий стиль кинематографичный: HDR-рендеринг + мягкое свечение + глубина резкости + зерно виньетки — сдержанно, без пересветов и резкой яркости. Когда лампа выключена, оставьте немного холодного лунного света из окна, чтобы силуэт и цепочка выключателя оставались видны. Добавьте переключатель обучающего режима: когда он включён, нажатие на любой стеклянный фрагмент приближает его и показывает название цвета — на китайском и английском — а также hex-код; соседние фрагменты того же цвета мягко подсвечиваются. Это позволит использовать сцену для обучения детей цветам и подбору цветов. Взаимодействия:
- Прокрутка страницы управляет движением камеры: от общего плана к виду сверху, макросъёмке абажура и крупному плану основания; в конце прокрутки включается режим свободного вращения
- Потяните за цепочку, чтобы включить или выключить лампу; перетаскивайте цепочку вверх и вниз для плавной регулировки яркости; лампа загорается фрагмент за фрагментом — от края абажура к верхушке
- Нажатие на абажур поднимает его целиком; после этого можно вынуть отдельный стеклянный фрагмент и поднести к глазам для осмотра
- Двойное нажатие на основание разбирает лампу на парящие детали
- Три цветовые схемы (оригинальная / холодная / янтарная); при переключении цвета стекают вниз от верхушки абажура

Макет: слева — крупный вертикальный заголовок с засечками, исчезающий при прокрутке; справа — колонка лёгких кнопок-капсул («Включить», «Поднять абажур», «Разобрать», «Свободный вид») и точки цветовых схем, при этом подписи кнопок отражают текущее состояние. Сохраните минималистичный общий дизайн в соответствии с тёмной тональностью сцены; на мобильных устройствах он автоматически преобразуется в горизонтальный ряд внизу.