Свободно исследуемый 3D-город с сакурой в стиле аниме
Подробный промпт для Three.js: доступный по ссылке одностраничный 3D-городок в японском стиле аниме, по которому можно свободно перемещаться. В нём описаны торговая улица, железнодорожный переезд и станция, площадь с сакурой, святилище Инари, набережная, процедурно создаваемые вишнёвые деревья, анимированные люди и транспорт, режимы времени суток, коллизии, управление на компьютере и мобильных устройствах, а также генерируемый эмбиентный звук. В исходной публикации прямо указано, что автор создал проект с помощью Claude Opus 5.5 и Three.js; полная инструкция приведена в подтверждённом комментарии автора.
С помощью Three.js создайте «свободно исследуемый 3D-город с сакурой в стиле аниме» в виде одного HTML-файла, а затем опубликуйте его как веб-страницу, доступную по ссылке.
[Технические ограничения]
- Используйте только three.js r128 (UMD-сборка) с cdnjs. Не загружайте внешние модели и изображения — процедурно создайте все модели, текстуры и вывески магазинов с помощью кода и Canvas.
- Используйте оригинальные названия магазинов, вывески и персонажей. Не имитируйте реальные бренды и существующие произведения.
- Используйте MeshStandardMaterial или MeshPhongMaterial. Избегайте высокой металличности и карт отражения окружения: на некоторых компьютерах из-за них объекты могут отображаться без цвета.
- Объедините статичные объекты по материалам в небольшое количество мешей, чтобы сцена работала на обычных компьютерах; добавьте переключатель качества High / Medium / Low.
[Сцена: «桜ヶ丘 (Sakuragaoka)», небольшой японский городок весенним днём]
1. Торговая улица: главная улица, идущая с севера на юг, с более чем 20 магазинами по обеим сторонам (раменная, кафе, веломагазин, книжный магазин, цветочный магазин, магазин японских сладостей, аптека, магазин у дома и т. д.). У каждого магазина должны быть: многострочная вывеска (название магазина + название на английском + номер телефона), полосатый навес с фестончатым краем, утопленный фасад с хорошо видимой глубиной интерьера и уличная витрина (ящики с фруктами, стойка с журналами, витрина с муляжами еды, вращающийся парикмахерский столб). На верхних этажах — окна, кондиционеры, балконы с развешанным бельём и телевизионные антенны на крышах.
2. Детали улицы: опоры с множеством воздушных проводов, декоративные фонари с баннерами торговой улицы, гирлянды праздничных фонариков, квадратная плитка тротуаров с жёлтой тактильной разметкой, решётки ливневых стоков, знаки «止まれ» и автобусная остановка.
3. Железнодорожный переезд и поезда: двухпутная железная дорога. При приближении поезда красные огни переезда мигают попеременно, звонит колокол, а шлагбаумы опускаются. Двухвагонный пригородный поезд останавливается на станции примерно на 14 секунд, а затем отправляется. Окна прозрачные, поэтому внутри видны сиденья и поручни.
4. Станция с островной платформой: табличка с названием станции, навес над платформой, скамейки и торговый автомат.
5. Площадь с сакурой: столетнее вишнёвое дерево с круглой скамьёй вокруг ствола.
6. Святилище Инари: большие ярко-красные тории и ряд маленьких тории, каменные фонари, статуи лис, зал поклонения (медно-зелёная крыша, элементы chigi и katsuogi, ящик для подношений, подвесной колокол), фонтан для ритуального омовения (temizuya), статуи Дзидзо, дощечки эма, священное дерево и гравийное покрытие.
7. Набережная: два ряда вишнёвых деревьев, образующие цветочный тоннель, фонари, река, дома на дальнем берегу и горы вдали.
[Как создать вишнёвые деревья (ключевая часть)]
- Ориентируйтесь на сорт Сомэй-ёсино: ствол низко разделяется на 3–4 основные ветви, которые рекурсивно ветвятся ещё на три уровня. Ветви расходятся в стороны и слегка поникают на концах, формируя общий зонтичный силуэт.
- Создайте крону из десятков тысяч «карточек цветочных кластеров»: нарисуйте на Canvas пятилистные цветы с выемками на кончиках лепестков, красноватыми центрами и тычинками, а под цветами добавьте мягкий розовый базовый слой. Для карточек используйте alphaTest и рендеринг с двух сторон.
- Добавьте несколько розовых объёмных комков внутри кроны. Внешние и верхние участки должны быть светлее, а внутренние и нижние — с тёплыми розовыми тенями.
- Используйте нежно-розовый цвет, а не неоново-розовый. Крона должна плавно колыхаться на ветру, землю под каждым деревом должен покрывать ковёр из опавших лепестков, а лепестки должны постоянно падать в воздухе — с помощью шейдера.
[Персонажи]
- Более 20 персонажей в стиле аниме — школьники и жители города: анимация ходьбы с суставами коленей и локтей, лица в стиле аниме, нарисованные на Canvas (большие глаза, блики, румянец), которые моргают, отдельные пряди чёлки, разнообразные причёски (длинные волосы, каре, качающийся хвост, два хвостика), матроски, школьные пиджаки и повседневная одежда. Рендерьте персонажей с двухцветным цел-шейдингом и тёмным контуром.
- Люди ходят по улице, общаются на площади, ждут на платформе, молятся в святилище и ездят на велосипедах по набережной.
[Транспорт]
- Создайте автомобили экструзией силуэта в боковой проекции (с колёсными арками, окнами, фарами, японскими номерными знаками и вращающимися колёсами). Автомобили останавливаются перед переездом и во время звонка колокола ждут, пока шлагбаумы не поднимутся.
[Освещение и время суток]
- Мягкий вид аниме-фона: голубое небо с белыми облаками (шейдер), лёгкая дымка вдали и тени с сине-фиолетовым оттенком.
- Переключение между режимами Afternoon / Dusk / Night Sakura. Ночью должны загораться окна, фонари и уличные светильники.
[Управление]
- Вид от первого лица: WASD — ходьба, Shift — бег, Space — прыжок, F — полёт, мышь — осмотр (блокировка указателя), цифровые клавиши — телепортация в каждую локацию, H — скрыть интерфейс, M — выключить звук.
- Мобильные устройства: проводите пальцем по левой половине экрана для перемещения, по правой — для осмотра.
- Коллизии включены; игрок может подняться на платформу и преодолевать ступени.
- Используйте Web Audio для генерации эмбиентного звука: ветра, пения птиц, колокола переезда и шума движущегося поезда.
Как использовать этот промпт
01
Начните с подходящего инструмента
Откройте привычного помощника для программирования или 3D-инструмент. Попробуйте модель, указанную в примере, и изучите инструкции по настройке в связанных проектах.
02
Выберите одно изменение
Замените объект, художественный стиль или окружение. Чётко опишите камеру и взаимодействие. Сначала создайте небольшую версию, затем улучшайте по одной детали.
03
Добавьте собственные объекты в сцену
Для своего персонажа или реквизита создайте 3D-модель по короткому описанию предмета или референсу, затем импортируйте её в проект.
Права на превью принадлежат соответствующим авторам. Перед повторным использованием кода или материалов проверьте первоисточник и лицензию проекта.