Большинство библиотек промптов для 3D-сайтов либо взимают плату за сам текст промпта, либо показывают вам демо-видео и держат слова при себе. Вот шесть полных промптов: вставьте их в Claude как есть или адаптируйте одну строку для Lovable, Bolt и Cursor. Все шесть прошли через live model; пять вернулись в виде работающих страниц Three.js, и каждый скриншот ниже — это один из этих рендеров, а не макет.
Шесть промптов для 3D-сайта, которые вы можете скопировать прямо сейчас
Каждый запрос требует одностраничную HTML-страницу с Three.js, загружаемым из CDN. Это ограничение важно: один файл открывается локально в любом браузере и его легко передать разработчику или вставить в блок custom-code, а также оно заставляет модель держать сцену автономной, вместо того чтобы разбрасывать импорты по всему проекту.
1. Галактика частиц героя
Создайте одностраничный HTML-файл с интерактивным 3D-полем частиц-галактики в секции hero
с использованием Three.js (загрузите его из CDN). Требования: около 50 000
частиц, формирующих спиральную галактику, которая медленно вращается; цвета частиц меняются
от тёплого янтарного в ядре до фиолетового на внешнем крае; добавьте OrbitControls, чтобы
посетители могли перетаскивать для вращения и масштабирования; наложите по центру заголовок hero,
который говорит "Build Beyond Flat" с короткой подстрокой и CTA-кнопкой; установите
pointer-events: none на контейнере наложения и pointer-events: auto на
CTA-кнопке, чтобы галактику можно было перетаскивать за текстом; тёмный
фон #0a0616; обработайте изменение размера окна. Выведите ТОЛЬКО полный HTML
файл в одном блоке кода.
Сгенерировано за 27 секунд и 3 692 выходных токена. Галактика вращается, перетаскивание для орбиты работает, и кнопка остаётся кликабельной через наложение. Один реальный недостаток: подзаголовок попадает на яркое галактическое ядро, и его трудно читать. Исправление приведено в тестовых примечаниях ниже.
2. Демонстрация продукта, управляемая прокруткой
Создайте одностраничный HTML-файл: управляемую прокруткой 3D-витрину продукта с
Three.js, загружаемым из CDN. Требования: парящий хромированный тора-кнот
по центру в фиксированном полноэкранном canvas; на странице 4 полноэкранных
секции прокрутки, и по мере прокрутки камеры объект совершает полный оборот на 360
градусов, а цвет материала объекта плавно меняется для каждой секции
(серебряный, глубокий синий, изумрудный, медный); в каждой секции отображаются заголовок и
одна строка текста, закреплённые слева поверх canvas; плавная интерполяция (lerp)
при прокрутке, чтобы движение ощущалось сглаженным; тёмный студийный вид с двумя цветными
прожекторами и мягкой тенью на полу; обработайте изменение размера окна. Выведите ТОЛЬКО полный
HTML-файл в одном блоке кода.
Это был самый тяжелый из пяти рабочих поколений (63 секунды, 7 023 выходных токена) и самый впечатляющий результат. Прокрутка перемещает камеру вокруг объекта, а материал перекрашивается по секциям точно так, как было запрошено:
И демпфированная интерполяция lerp тоже была соблюдена; движение имеет тяжёлое, дорогое ощущение сайта агентства, а не слайд-шоу с навязанной прокруткой.
3. Фон с жидкостным градиентом GLSL
Создайте одностраничный HTML-файл с полноэкранным анимированным WebGL фоном из
градиента жидкости, используя собственный фрагментный GLSL-шейдер с Three.js,
загружаемым из CDN. Требования: медленно движущиеся органичные пятна, смешивающие
глубокий синий, фиолетовый и коралловый цвета, управляемые uniform-переменной
времени и шумом в стиле simplex в фрагментном шейдере; добавьте в шейдер
едва заметное пленочное зерно; поверх разместите центрированную стеклянную карточку
(backdrop blur) с белым заголовком "Ship Immersive Sites", одной подстрокой и
двумя кнопками; анимация должна оставаться плавной на ноутбуке (один quad, без
postprocessing-проходов); обработайте изменение размера. Выводите ТОЛЬКО полный
HTML-файл в одном блоке кода.
31 секунду, 3,830 токенов, успешный первый проход. Фраза «single quad, no postprocessing passes» — это ограничение по производительности: без него модели обычно тянутся к EffectComposer и bloom-pass, которые сильно снижают частоту кадров на встроенных GPU.
4. 3D-полет по портфолио (тот, что дал отпор)
Создайте одностраничный HTML-файл: 3D-портфолио с использованием Three.js из CDN.
Шесть плавающих карточек проектов (скруглённые плоскости с заглушками градиентных
текстур и названиями проектов, нанесёнными на текстуру карточки), расположенных вдоль
плавной кривой в 3D-пространстве. По мере прокрутки пользователем камера летит вперёд
вдоль кривой, фокусируя по одной карточке за раз; камера
должна удерживать карточку в фокусе полностью в кадре с комфортным отступом и никогда
не проходить сквозь карточку; карточка в фокусе немного увеличивается.
Соседние карточки остаются частично видимыми для глубины. Добавьте лёгкий туман, тёмный фон, интерполяцию прокрутки с демпфированием.
При нажатии на карточку в фокусе открывается ссылка. Обработайте изменение размера.
Сделайте код компактным: переиспользуйте одну функцию построения карточки, без комментариев.
Выведите ТОЛЬКО полный HTML-файл в одном блоке кода.
На это ушло три прогона, и всё равно это нельзя выпускать, а скриншот выше показывает, почему мы всё же публикуем это: карточка отображается, но камера находится позади неё, поэтому заголовок читается зеркально. В первом прогоне мы превысили наш лимит вывода в 16 000 токенов на середине файла. Во втором прогоне (с строкой «keep the code compact», поэтому эта строка и есть в подсказке) карточки отрисовались, но камера пролетела прямо сквозь них. В третьем прогоне исправили отсечение, но потеряли привязку камеры к прокрутке. Хореография траектории камеры плюс текстуры для каждой карточки действительно сложнее для моделей, чем сцены выше; закладывайте время на отладку или упростите до статической изогнутой сетки со состояниями hover.
5. Интерактивный просмотрщик продукта
Создайте одностраничный HTML-файл: интерактивный 3D-просмотрщик продукта с
использованием Three.js из CDN. Разместите по центру стилизованный
геометрический макет продукта без каркаса (скругленный куб или капсула) на
пьедестале. Справа панель с тремя образцами цветов и переключателем
металл/матовый, которые обновляют материал в реальном времени;
OrbitControls, ограниченный горизонтальным вращением; мягкое студийное
трёхточечное освещение и контактная тень. Оставьте панель простым HTML/CSS,
накладываемым поверх холста. Обработайте изменение размера. Выведите ТОЛЬКО
полный HTML-файл в одном блоке кода.
Успешная попытка с первого раза, 66 секунд, 7 719 токенов. Образцы и переключатель metal/matte обновляют материал в реальном времени, а модель добавила непрошеную приятную деталь: сноску с объяснением, что вращение заблокировано по горизонтальной оси, чтобы продукт оставался в кадре.
6. Одностраничный 3D-сайт для бизнеса
Создайте одностраничный HTML-файл: одностраничный сайт для дизайн-студии с
Three.js из CDN. Разделы: hero, services, work, contact. Одна
низкополигональная абстрактная фигура парит в правом верхнем углу hero и медленно вращается;
когда пользователь прокручивает страницу к каждому разделу, фигура изменяет масштаб и цвет
в соответствии с акцентом этого раздела. В остальном разделы используют чистый HTML/CSS
(без тяжёлой 3D-графики для каждого раздела), чтобы страница оставалась быстрой. Плавная прокрутка, адаптация
для мобильных устройств, обработка изменения размера окна. Выведите ТОЛЬКО полный HTML-файл в одном
кодовом блоке.
62 секунды, 7,419 токенов. Модель придумала название студии, построила четыре раздела и разместила низкополигональный икосаэдр точно там, где было указано. Наша первая попытка с этим запросом упёрлась в лимит вывода 8,000 токенов и пришла обрезанной — если вы вызываете модель через API, установите лимит вывода на 16,000 токенов или больше для полноформатных запросов на всю страницу.
Что произошло, когда мы их запустили
Три прогона одной модели на один промпт — это анекдот, а не бенчмарк; воспринимайте это как точечную проверку того, на каком уровне находится генерация 3D по промпту в середине 2026 года. Примечания к методу: claude-sonnet-5 через его API 17 июля 2026 года, настройки по умолчанию, без системного промпта, результаты отображались в desktop Chrome при 1280×720 на MacBook на Apple Silicon; в успешных прогонах модель сама выбрала сборку Three.js r128 UMD с публичного CDN.
| Prompt | Выходные токены | Время | Результат |
|---|---|---|---|
| Particle galaxy hero | 3,692 | 27.4s | Сработало с первого раза; контраст подзаголовка слишком низкий |
| Scroll-driven showcase | 7,023 | 63.4s | Сработало с первого раза, все 4 цветовые стадии корректны |
| GLSL fluid gradient | 3,830 | 31.6s | Сработало с первого раза, на тестовом MacBook не видно пропущенных кадров |
| Portfolio fly-through | 3 runs | 84–163s | Непригодно для публикации: переполнение токенов, затем клиппинг камеры, затем зеркальные заголовки |
| Product viewer | 7,719 | 65.8s | Сработало с первого раза, переключение материалов в реальном времени |
| One-page business site | 7,419 | 62.4s | Сработало после одного повторного запуска с более высоким лимитом выходных токенов |
Единственный визуальный дефект среди пяти рабочих страниц: подстрока в prompt 1 расположена на самом ярком участке галактики и становится почти нечитаемой. Одна последующая строка исправила это — Give the subline a subtle dark text-shadow and raise its font weight so it stays readable over the bright galaxy core. Это закономерность во всех этих прогонах: сама 3D-сцена обычно получается правильно, а бюджет итераций уходит на типографику, контраст оверлея и (в случае портфолио) камеру и её движение.
Стоимость не является проблемой на этом масштабе. Полный прогон теста — девять генераций, включая повторные попытки для портфеля, около 46 000 выходных токенов — обошёлся значительно меньше чем в доллар; мы прогнали его через AIReiter, который перепродаёт доступ к Claude API по цене, составляющей пятую часть официальной стоимости за токен, так что даже упрямая сессия итераций остаётся в пределах мелочи.
Как написать свой собственный промпт для 3D-сайта
Промпты, которые прошли, имеют пять общих частей. Сохраните все пять, и ваши шансы пройти с первого раза резко возрастут.
1. Один объект сцены. Галактика, торус-узел, градиентное поле. В наших запусках и в большинстве общих примеров сообщества промпты, которые просят несколько несвязанных 3D-элементов на одной странице, — это место, где модели начинают упускать требования. 2. Драйвер движения. Либо время (slowly rotates, driven by a time uniform), либо прокрутка (as the user scrolls, the camera orbits). Укажите это явно; одно лишь "animated" позволяет модели выбрать что-то скучное. Примечание по сбою в портфолио: управлять прокруткой *объектом* надежно, а управлять прокруткой *камерой вдоль пути между объектами* — это место, где всё ломается. 3. Взаимодействие. OrbitControls для перетаскивания и поворота работал в каждом успешном запуске нашего теста. Если вы накладываете текст на canvas, попросите pointer-events: none для контейнера оверлея и pointer-events: auto для кнопок — иначе текстовый слой перехватывает перетаскивания и клики, предназначенные для сцены. 4. Содержимое оверлея. Укажите точный текст заголовка в кавычках. Модели заполняют неуказанный текст общими слоганами, которые вам всё равно придется заменить. 5. Ограничения по производительности и размеру. Количество частиц, single quad, no postprocessing или low-poly сохраняют страницу быстрой; keep the code compact удерживает вывод в пределах лимитов токенов API — два из наших девяти запусков завершились из-за ограничения на вывод еще до того, как проявилась какая-либо проблема с качеством кода.
Словарь, который подталкивает модель к настоящему 3D, а не к плоской CSS-имитации: Three.js, particle system, GLSL fragment shader, OrbitControls, scroll-driven camera, torus-knot, lerp, fog, point lights. Слова важны, потому что они соответствуют реальным именам API, так что модель пишет под библиотеки, которые видела при обучении, вместо того чтобы импровизировать.
Сочетание клавиш для вставки кода
Для эффектов, которые вы не можете описать, есть второй приём. Найдите готовый эффект Three.js на CodePen, вставьте сырой код в свой AI-инструмент и в prompt укажите только Add this 3D animation to the hero. Модель переведёт фрагмент в ваш стек — React components, your build setup, your section structure — что обычно и является самой утомительной частью. Builder.io задокументировали этот приём с анимацией планеты из 50,000 частиц, включая такое же исправление наложения pointer-events: none, в their walkthrough.
Это самый эффективный путь, когда вам нужна полировка на уровне наградных сайтов: математика шейдера исходит от человека, который её настроил, а AI занимается только интеграцией.
Какие инструменты принимают эти запросы
Шесть приведённых выше подсказок не зависят от инструмента; любой инструмент, который пишет и предварительно просматривает HTML/JS, сможет их выполнить. Различия между инструментами заключаются в форме вывода и владении кодом (проверено 17 июля 2026 года):
| Инструмент | Бесплатный путь | Что вы получаете | Владение кодом |
|---|---|---|---|
| Claude (чат или Claude Code) | Бесплатный тариф | Сырой HTML в одном файле или полный репозиторий | Ваше, полный исходный код |
| Lovable | Бесплатный тариф | Размещенное приложение на React | Доступен экспорт |
| Bolt | Бесплатный тариф | Размещенное полнофункциональное приложение | Доступен экспорт |
| Cursor | Бесплатный тариф | Код в вашем собственном репозитории | Ваше, полный исходный код |
| VULK | Нет — 3-дневный вводный период от €3.99, планы от €19.99/мес | Сгенерированный сайт на React Three Fiber, бэкенд PostgreSQL | Полный экспорт в GitHub |
| Spline Omma | Ожидание/ограниченно | 3D-слой, добавляемый поверх существующего сайта | Размещено на платформе |
Два из них заслуживают отдельного упоминания. У VULK основная идея в том, что он генерирует настоящий код React Three Fiber — интерактивные сцены WebGL, а не зацикленный видеохедер — и его демонстрационные сайты это подтверждают. Реальный код вместо видеохедера — именно то различие, которое стоит проверить, прежде чем платить за любой «AI 3D website builder». А если вам больше нравится просматривать подсказки, чем писать их, MotionSites ведет каталогизированную библиотеку, рассчитанную на Lovable, Bolt, Cursor и Claude. Часть доступна для бесплатного копирования, остальное находится за подпиской:
Где промпты достигают своего потолка
Повторяющийся вопрос в тредах r/lovable и r/web_design — можно ли с помощью правильного промпта воссоздать сайты вроде mont-fort.com или страницы labs Noomo Agency. Честный ответ: не с помощью одного лишь промпта. Такие сайты построены на кастомных моделях GLTF, художественно выстроенном освещении и уникальной работе со шейдерами — это ассеты, которые текстовый промпт не может породить из ничего. То, что дает промпт, — это *механика* этих сайтов (камеры, управляемые прокруткой, фоновые шейдеры, демпфированное движение) с геометрией-заглушкой. Подстановка реального файла модели закрывает часть этого разрыва, но освещение, материалы и мобильные fallback-варианты по-прежнему остаются настоящей дизайнерской работой. Сбой нашего fly-through в портфолио выше — это тот же урок в миниатюре: чем ближе промпт подбирается к срежиссированным сценам с несколькими объектами, тем больше человеческих итераций это требует.
Три режима сбоя охватывают большинство некорректных генераций, и для каждого есть исправление в одну строку:
- Черный экран, ошибок не видно. Обычно это несоответствие импорта ES-модуля/CDN. Подсказка для исправления:
Use a single non-module script tag with the Three.js r128 UMD build from a CDN, no import maps.(r128 — это версия, которую наши тестовые запуски выбрали без подсказки, и она по-прежнему работает; более новые версии Three.js убрали UMD-путь, поэтому закрепление версии позволяет избежать несоответствия.) - Плавно на компьютере, дергается на телефонах. Количество частиц, которое было нормальным на ноутбуке. Подсказка для исправления:
Halve the particle count on screens narrower than 768px and cap devicePixelRatio at 2. - 3D-сцена работает, но на странице ничего нельзя нажать. Канвас или оверлей перехватывает события. Подсказка для исправления:
Set pointer-events: none on the full-screen overlay and re-enable pointer-events: auto on buttons and links.
И еще один из наших собственных прогонов: текст на 3D-карте отображается зеркально. Камера смотрит на обратную сторону плоскости. Подсказка для исправления: Make card materials double-sided with the texture mirrored correctly, or rotate cards to always face the camera.
Часто задаваемые вопросы
Есть ли бесплатные промпты для 3D-сайтов?
Да. Шесть в этом посте — полностью готовые и свободные для копирования, а DocsBot и бесплатный тариф MotionSites предлагают ещё больше. Платные библиотеки в основном дают вам объём и предварительно протестированное разнообразие, а не какой-то иной тип промпта.
Эти промпты работают в Lovable или Bolt?
Да, с одним изменением: уберите требование «один HTML-файл», поскольку эти платформы создают каркас React-проектов. Всё остальное — тема сцены, движок движения, взаимодействие и ограничение на производительность — переносится напрямую.
Нужно ли мне знать Three.js, чтобы использовать промпт для 3D-сайта?
Нет для генерации, немного для итераций. Приведённые выше промпты содержат необходимую лексику Three.js. Понимание того, что такое OrbitControls или фрагментный шейдер, помогает запрашивать точные изменения вместо слепой повторной генерации.
Какой лучший AI-инструмент для 3D-сайта?
Для одностраничного эффекта или hero section — Claude напрямую: вы сохраняете исходный код и платите за токены. Для размещённого сайта с backend — Lovable или Bolt на их бесплатных тарифах, либо VULK, если вам нужен именно экспортированный код React Three Fiber.
Повлияет ли 3D-герой на производительность или SEO?
Только если вы это позволите. Оставьте 3D в одной сцене, добавьте указанные выше ограничения для мобильных устройств и держите заголовок и основной текст в обычном HTML поверх canvas, как это делают все шесть промптов. Краулеры читают текстовый слой, а Core Web Vitals зависят в основном от того, что ещё загружает страница.