Промпт для создания 3D-сайта «Долина цветущей сакуры»
Детализированный промпт для генерации интерактивного 3D-сайта с японской долиной цветущей сакуры на HTML/CSS/JS и Three.js, протестированный на GPT-6 Astra.
Промпт
Пожалуйста, создайте сразу высококачественную 3D-страницу ландшафта, с которой можно взаимодействовать в реальном времени в браузере.
Тема: Японская долина цветущей сакуры.
Реализуйте с использованием HTML, CSS и JavaScript. Не генерируйте изображения, не предоставляйте только дизайн-предложения,
Не имитируйте 3D с помощью фонового изображения и параллакс-эффектов. Мне нужен реально работающий, исследуемый продукт.
[1. Позиционирование продукта]
Это полный, непрерывный ландшафт долины со слоями глубины,
а не изолированные мелкие украшения, плавающие острова, песочницы с основаниями или простые технические демоверсии.
Стиль — современный детализированный воксельный арт:
Сохраняйте язык моделирования кубической геометрии, но экран должен быть высокого разрешения, сглаженным, с тонкими светом и тенью.
Никакого ретро пикселизации низкого разрешения, грубого складывания блоков или применения пиксельных фильтров к экрану.
Приоритет отдается визуальному качеству. Лучше меньше функций, чем жертвовать композицией, материалами и освещением.
[2. Использование референсных изображений]
Если приложены референсные изображения, сначала поймите их композиционную иерархию, масштаб, освещение и цветовые соотношения.
Заимствуйте только атмосферу и визуальный язык, переработайте сцену,
Не копируйте расположение зданий, деревьев, гор и дорог, не воспроизводите 1:1.
Референсные изображения не являются фоновыми ассетами на веб-странице. Сама сцена должна состоять из реальной 3D-геометрии.
[3. Композиция сцены]
По умолчанию при открытии должно представляться полное, привлекательное изображение,
пользователям не нужно сначала вращать камеру, чтобы найти хороший ракурс.
Используйте перспективную камеру, а не изометрическую верхнюю камеру в стиле песочницы.
Экран имеет четкий передний план, средний план и задний план:
Передний план:
Древнее дерево сакуры с присутствием, в сочетании с камнями, растительностью, каменными фонарями и некоторыми опавшими лепестками,
формирующее естественную рамку по краю экрана, но не блокирующее реку, мост и главные здания.
Средний план:
Извилистая река направляет взгляд вглубь экрана, красный деревянный мост пересекает реку;
деревни, чайные дома, святилища и тропы распределены вдоль рельефа, с реальными связями проходов между зданиями.
Земля имеет неровности, береговые линии и естественные переходы, а не модели, равномерно размещенные на плоскости.
Задний план:
Многоэтажные башни на склонах холмов, леса и хребты на разных расстояниях, и далекие заснеженные горы.
Выразите расстояние через изменения масштаба, перекрытия, теплые/холодные изменения и атмосферную перспективу,
а не просто уменьшая удаленные объекты.
Не распределяйте все элементы равномерно. Нужны первичные/вторичные элементы, плотность/разреженность, белое пространство и четкий визуальный фокус.
[4. Моделирование и качество экрана]
Деревья сакуры:
Стволы имеют изгибы, разветвления и корни, кроны состоят из нерегулярных цветочных кластеров,
имеют зазоры, вариации толщины и видимые ветви. Не делайте их несколькими регулярными сферами или блочными скоплениями.
Здания:
Крыши имеют слоистую черепицу, карнизы, балки, колонны и оконные решетки;
различные здания отличаются назначением, объемом и высотой, не копируйте один и тот же дом, чтобы заполнить долину.
Рельеф:
Береговые линии имеют влажные камни, траву и переходы растительности.
Избегайте слишком регулярных ступеней, повторяющихся полос, шахматных досок и очевидных сеток процедурной генерации.
Водная поверхность:
Должна отражать окружающие пейзажи, иметь умеренные рябь, вариации глубины и переходы береговой линии.
Старайтесь использовать реальные отражения сцены; сохраняйте визуальную достоверность даже при необходимости снижения производительности.
Не заменяйте воду мерцающим шумом, сильным искажением или сплошной синей плоскостью.
Детали:
Могут быть некоторые кои, опавшие цветы, светлячки, водопады и дальние птицы,
но они все должны служить атмосфере, не могут делать экран шумным.
Не накапливайте детали только ради количества моделей.
[5. Цвет и атмосфера]
По умолчанию — синий час (blue hour):
Холодные долины и дальние горы, мягкая розовая сакура, теплый, но не переэкспонированный свет фонарей и окон.
Теплый свет концентрируется там, где активны люди, не окрашивайте всю среду в оранжевый.
Нужны мягкие тени, свет/тень в точках контакта объектов, разумная экспозиция,
сдержанное свечение (bloom), сглаживание и тонкий туман со слоями расстояния.
Избегайте отбеливания, дымки, перенасыщения, густого тумана на весь экран, переэкспонированных источников света и очевидной алиасинга.
Блочная геометрия может быть четкой, но сам рендеринг не может быть грубым.
Также предоставьте атмосферы «Утро» и «Дождь»;
при переключении синхронно изменяйте небо, окружающий свет, туман и локальные эффекты,
а не просто модифицируйте цвет фона.
[6. Взаимодействие и интерфейс]
Предоставьте четыре настроенные камеры:
Панорама долины, низкое положение у реки, путь к храму, вид с холма сверху вниз.
Переключение должно быть плавным, каждой камере нужна независимая композиционная ценность.
Базовое взаимодействие:
Перетаскивание мышью для обзора, колесо прокрутки для масштабирования или продвижения, сенсорные экраны поддерживают перетаскивание и масштабирование щипком.
Предоставьте функции сброса вида, скрытия интерфейса и сохранения текущего экрана.
Опциональные улучшения:
Свободное исследование, медленный круиз камеры, фоновый звук.
Фоновый звук выключен по умолчанию, играет только после активного клика пользователя.
Дополнительные функции не могут влиять на полноту экрана по умолчанию.
Интерфейс должен быть сдержанным и продуманным, акцент на ландшафте.
Заголовки и панели управления размещены по краям, не блокируя визуальный фокус.
На десктопе и мобильных устройствах не должно быть переполнения кнопок, наложения текста или проблем с операцией.
[7. Инженерия и производительность]
Разрешено использование Three.js / WebGL и CDN-зависимостей с фиксированной версией, взаимно совместимых.
Отдавайте приоритет зрелым возможностям рендеринга, не переписывайте весь движок ради «нулевых зависимостей».
Самописные HTML, CSS, JavaScript должны по возможности организовываться в одном HTML-файле.
Пейзаж генерируется процедурной геометрией и материалами, без опоры на внешние изображения или ресурсы 3D-моделей.
Для повторяющихся объектов используйте подходящие методы пакетной или инстансинговой отрисовки;
Разумно контролируйте субдивизию, тени, отражения и разрешение рендеринга.
Предоставьте режимы высокого качества и легковесный режим, телефоны по умолчанию используют более легкие настройки.
Не обменивайте бесконечное увеличение количества вокселей на детали.
Добавьте подсказки загрузки, предупреждения о неподдержке WebGL и необходимую обработку ошибок.
Не воспроизводите автоплей, если звук не включен; уважайте системные предпочтения для уменьшенного движения.
[8. Приемка перед доставкой]
Не доставляйте сразу после написания кода.
Если текущая среда поддерживает запуск браузера и скриншоты, пожалуйста, сначала фактически откройте страницу,
проверьте камеру по умолчанию, четыре вида, переключение атмосферы, макеты для десктопа и мобильных устройств,
затем исправьте очевидные проблемы композиции, экспозиции, перекрытий и рендеринга на основе скриншотов.
Ключевые проверки:
Есть ли пустые экраны, сбои загрузки, ошибки консоли;
Есть ли клиппинг, мерцание, полосатость теней, переэкспонирование, аномалии водной поверхности;
Действительно ли экран по умолчанию выглядит как полный ландшафт, а не маленькая песочница;
Действительно ли функциональные кнопки работают, есть ли переполнение на мобильных устройствах.
Можно использовать скриншоты браузера для приемки, но не вызывайте инструменты генерации изображений.
Честно указывайте незавершенные тесты, не заявляйте о проверке.
Финальная доставка:
1. Фактически существующий, открываемый HTML-файл или интерактивное превью, поддерживаемое текущей средой.
2. Если возможны скриншоты, прикрепите реальный скриншот рендеринга браузера.
3. Краткое объяснение метода работы и необходимых условий запуска.
Пожалуйста, завершите производство напрямую; принимайте последовательные дизайнерские решения для некритических деталей самостоятельно,
не возвращайте мне снова и снова проблемы реализации, которые вы можете решить сами.
Как использовать этот промпт
- 1
Скопируйте полный промпт выше.
- 2
Откройте платформу, поддерживающую GPT 6 Astra, например YouMind, и вставьте промпт.
- 3
Замените объект, стиль или детали в соответствии с вашей идеей, а затем создавайте.
Это бесплатный AI-промпт из библиотеки YouMind. Изучите тысячи других промптов веб-страница, которые можно бесплатно копировать и адаптировать.
Изучить больше промптов веб-страницаЕще от GPT 6 Astra
Рабочий процесс проекции текстур Astra ImageGen
@Alex
Концепция двигателя X-16 на Three.js
@Techartist
Реконструкция Эйфелевой башни: GPT-6 Astra против Opus 5.5
@Tony
Рабочий процесс развёртки UV в Blender с использованием Codex
@miya
Браузерная игра в жанре Tower Defense с зомби
@Oren John
Доработка дизайна костюма для VRM
@shinshin86｜AITuber OnAir開発者｜AIキャラのミコをバズらせたい人
Другие функции промптов
Библиотека AI
Поиск AI-промптов
Позвольте AI искать среди десятков тысяч промптов. Фильтруйте по модели, временному диапазону, ключевым словам и сортируйте по вовлеченности — просмотрам, закладкам, репостам и многому другому.
Инструменты зрения
Изображение в промпт
Превратите любую фотографию в подробный AI-промпт для изображения. Бесплатный конвертер изображений в промпты анализирует композицию, стиль и освещение, чтобы вы могли воссоздать любой образ за секунды.
Другие функции промптов
Поиск по модели
Поиск по типу медиа
AI-инструменты
Создано для творцов. Бесплатно навсегда.
YouMind — это ИИ-копилот для творчества, которому доверяют миллионы создателей по всему миру. Каждый промпт здесь отобран так, чтобы помочь вам творить лучше и быстрее.