3D-сайт по одному промпту за 30 секунд: 6 проверенных вариантов

Библиотеки промптов для 3D-сайтов обычно идут двумя путями: либо просят деньги за сам текст, либо показывают эффектное демо-видео, но не раскрывают запрос. Ниже — шесть полноценных промптов, которые можно без изменений вставить в Claude или слегка адаптировать для Lovable, Bolt и Cursor. Все они были прогнаны через живую модель: пять вернулись рабочими страницами на Three.js. Скриншоты — реальные результаты генерации, а не подготовленные макеты.

6 промптов для 3D-сайта, которые можно скопировать прямо сейчас

Каждый запрос требует одностраничный HTML-файл, где Three.js подключается через CDN. Это важное ограничение: такой файл открывается локально в любом браузере, его удобно передать разработчику или вставить в блок с кастомным кодом. Заодно модель не расползается по проекту с импортами, а держит всю сцену в одном файле.

1. Hero-блок с галактикой из частиц

Create a single-file HTML page with an interactive 3D particle galaxy hero
section using Three.js (load it from a CDN). Requirements: about 50,000
particles forming a spiral galaxy that slowly rotates; particle colors shift
from warm amber at the core to violet at the outer rim; add OrbitControls so
visitors can drag to rotate and zoom; overlay a centered hero headline that
says "Build Beyond Flat" with a short subline and a CTA button; set
pointer-events: none on the overlay container and pointer-events: auto on
the CTA button so the galaxy stays draggable behind the text; dark
background #0a0616; handle window resize. Output ONLY the complete HTML
file in a single code block.

Генерация заняла 27 секунд и выдала 3 692 выходных токена. Галактика вращается, управление перетаскиванием работает, а кнопка остаётся кликабельной поверх сцены. Недочёт оказался один: подзаголовок попал на яркое ядро галактики и плохо читается. Исправление — в заметках о тестировании ниже.

2. Продуктовая витрина, управляемая скроллом

Create a single-file HTML page: a scroll-driven 3D product showcase using
Three.js loaded from a CDN. Requirements: a floating chrome torus-knot
centered in a fixed full-screen canvas; the page has 4 full-screen scroll
sections, and as the user scrolls the camera orbits the object a full 360
degrees while the object material color smoothly transitions per section
(silver, deep blue, emerald, copper); each section shows a headline and
one-line copy pinned to the left over the canvas; smooth interpolation (lerp)
on scroll so motion feels damped; dark studio look with two colored
spotlights and a soft ground shadow; handle resize. Output ONLY the complete
HTML file in a single code block.

Это была самая тяжёлая из пяти успешных генераций: 63 секунды и 7 023 выходных токена. Зато результат оказался и самым впечатляющим. Скролл ведёт камеру вокруг объекта, а материал меняет цвет в каждой секции именно так, как было задано:

Модель выполнила и требование о сглаженной lerp-интерполяции: движение получилось вязким и дорогим на ощущение, как у сайта агентства, а не у обычного слайд-шоу, привязанного к скроллу.

3. Жидкий градиентный фон на GLSL

Create a single-file HTML page with a full-screen animated WebGL fluid
gradient background using a custom GLSL fragment shader with Three.js loaded
from a CDN. Requirements: slow-moving organic blobs blending deep blue,
purple and coral, driven by a time uniform and simplex-style noise in the
fragment shader; add subtle film grain in the shader; overlay a centered
glass card (backdrop blur) with a white headline "Ship Immersive Sites", one
subline, and two buttons; the animation must stay smooth on a laptop (single
quad, no postprocessing passes); handle resize. Output ONLY the complete
HTML file in a single code block.

31 секунда, 3 830 токенов, успешный результат с первой попытки. Строка про single quad, no postprocessing passes здесь служит ограничителем производительности. Без неё модели нередко добавляют EffectComposer и bloom-проходы, из-за которых на встроенной графике резко падает частота кадров.

4. 3D-портфолио с пролётом камеры — промпт, который сопротивлялся

Create a single-file HTML page: a 3D portfolio using Three.js from a CDN.
Six floating project cards (rounded planes with placeholder gradient
textures and project titles rendered onto the card texture) arranged along
a gentle curve in 3D space. As the user scrolls, the camera flies forward
along the curve, bringing each card into focus one at a time; the camera
must keep the focused card fully in frame with comfortable margin and never
pass through a card; the focused card scales up slightly. Neighboring cards
stay partially visible for depth. Add subtle fog, a dark background, damped
scroll interpolation. Clicking a focused card opens a link. Handle resize.
Keep the code compact: reuse one card-building function, no comments.
Output ONLY the complete HTML file in a single code block.

На этот вариант ушло три запуска, но он всё равно не готов к публикации. Скриншот выше объясняет, почему его всё же стоит показать: карточка рендерится, но камера находится за ней, поэтому заголовок читается зеркально. Первый запуск упёрся в лимит 16 000 выходных токенов прямо посреди файла. Во втором — после добавления строки keep the code compact, которая поэтому и осталась в промпте, — карточки появились, но камера пролетала прямо сквозь них. Третий запуск исправил пересечения, но потерял связь камеры со скроллом. Хореография камеры на траектории плюс текстуры для отдельных карточек объективно сложнее для модели, чем сцены выше. Здесь стоит заложить время на отладку либо упростить задачу до статичной изогнутой сетки с hover-состояниями.

5. Интерактивный просмотр товара

Create a single-file HTML page: an interactive 3D product viewer using
Three.js from a CDN. Center a stylized wireframe-free geometric product
stand-in (a beveled cube or capsule) on a pedestal. Right-side panel with
three color swatches and a metal/matte toggle that update the material live;
OrbitControls limited to horizontal rotation; soft three-point studio
lighting and a contact shadow. Keep the panel plain HTML/CSS overlaying the
canvas. Handle resize. Output ONLY the complete HTML file in a single code
block.

Успех с первой попытки: 66 секунд и 7 719 токенов. Образцы цветов и переключатель metal/matte меняют материал в реальном времени. Модель добавила и незапрошенную полезную деталь: сноску о том, что вращение ограничено горизонтальной осью, чтобы товар оставался в кадре.

6. Одностраничный 3D-сайт для бизнеса

Create a single-file HTML page: a one-page site for a design studio with
Three.js from a CDN. Sections: hero, services, work, contact. A single
low-poly abstract shape floats top-right of the hero and slowly rotates;
as the user scrolls into each section the shape morphs its scale and color
to match that section accent. Sections otherwise use clean HTML/CSS
(no heavy 3D per section) so the page stays fast. Smooth scroll, mobile
friendly, handle resize. Output ONLY the complete HTML file in a single
code block.

62 секунды, 7 419 токенов. Модель придумала название студии, собрала все четыре секции и разместила низкополигональный икосаэдр ровно там, где требовалось. Первая попытка с этим промптом достигла лимита в 8 000 выходных токенов и пришла обрезанной. Если вызываете модель через API, для полноценных страниц стоит выставлять лимит от 16 000 токенов.

Что показали запуски

Три прогона одной модели на каждый промпт — это не бенчмарк, а лишь точечная проверка состояния prompt-to-3D-генерации в середине 2026 года. Условия теста: claude-sonnet-5 через API, 17 июля 2026 года, настройки по умолчанию, без системного промпта. Результаты открывались в десктопном Chrome при 1280×720 на MacBook с Apple Silicon. Во всех успешных запусках модель самостоятельно выбрала UMD-сборку Three.js r128 из публичного CDN.

Единственный визуальный дефект среди пяти рабочих страниц — подзаголовок в первом промпте: он лежит на самой яркой части галактики и почти не читается. Проблему решила одна уточняющая строка: 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. Один объект сцены. Галактика, torus-knot, градиентное поле. По нашим запускам и большинству опубликованных примеров из сообщества, модели начинают терять требования, когда в одной странице просят несколько несвязанных 3D-эффектов.
2. Источник движения. Это либо время — slowly rotates, driven by a time uniform, — либо скролл: as the user scrolls, the camera orbits. Указывайте его явно: одно слово «анимированный» оставляет модели слишком много свободы и часто приводит к скучному результату. Урок из неудачи с портфолио: скроллом надёжно управляется объект, а вот движение камеры по траектории между объектами — место, где всё начинает ломаться.
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-инструмент и дайте короткий запрос: Add this 3D animation to the hero. Модель перенесёт сниппет в ваш стек — React-компоненты, существующую сборку, структуру секций. Обычно именно эта интеграция и отнимает больше всего времени. Builder.io показали этот подход на анимации планеты из 50 000 частиц, включая то же исправление со слоями pointer-events: none, в своём руководстве.

Это самый эффективный путь к полировке уровня award-сайтов: шейдерная математика остаётся от человека, который её настраивал, а AI берёт на себя только интеграцию.

Какие инструменты понимают эти промпты

Шесть промптов выше не привязаны к конкретному сервису: их запустит любой инструмент, который умеет писать и показывать HTML/JS. Разница между сервисами — в формате результата и правах на код. Информация проверена 17 июля 2026 года:

Два сервиса здесь требуют отдельной ремарки. VULK заявляет, что генерирует настоящий код React Three Fiber — интерактивные WebGL-сцены, а не зацикленную видео-шапку, — и примеры сайтов это подтверждают. Настоящий исходный код вместо видео в hero-блоке — именно то различие, которое стоит проверять перед оплатой любого «AI-конструктора 3D-сайтов». А если не хочется писать промпты с нуля, MotionSites поддерживает каталог по категориям для Lovable, Bolt, Cursor и Claude. Часть запросов доступна бесплатно, остальные — по подписке:

Где заканчиваются возможности промптов

В обсуждениях r/lovable и r/web_design регулярно спрашивают, способен ли удачный промпт воспроизвести сайты уровня mont-fort.com или лабораторные страницы Noomo Agency. Честный ответ: не одним промптом. Такие проекты строятся на кастомных GLTF-моделях, художественно выстроенном свете и уникальных шейдерах — текстовый запрос не создаст эти ассеты из воздуха. Промпт позволяет получить механику подобных сайтов: камеры, управляемые скроллом, шейдерные фоны, сглаженное движение — но с геометрией-заглушкой. Подстановка настоящей модели сокращает разрыв, однако свет, материалы и мобильные fallback-варианты всё равно остаются полноценной дизайнерской работой. Провал с портфолио выше показывает тот же урок в миниатюре: чем ближе промпт подходит к постановочной многообъектной сцене, тем больше ручных итераций потребуется.

Большинство сломанных генераций укладывается в три сценария — и для каждого есть исправление одной строкой:

• Чёрный экран, ошибок не видно. Обычно причина в несовместимости 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-сцена работает, но на странице ничего не нажимается. Canvas или оверлей перехватывает события. Исправляющий промпт: 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.

FAQ

Есть ли бесплатные промпты для 3D-сайтов?

Да. Все шесть промптов из этого материала можно копировать бесплатно. Больше вариантов предлагают DocsBot и бесплатный тариф MotionSites. Платные библиотеки в основном дают количество и заранее протестированное разнообразие, а не какой-то принципиально иной тип промптов.

Работают ли эти промпты в Lovable или Bolt?

Да, с одной поправкой: уберите требование single-file HTML, поскольку эти платформы создают React-проекты. Всё остальное — объект сцены, источник движения, взаимодействие и ограничение производительности — переносится напрямую.

Нужно ли знать Three.js, чтобы пользоваться промптами для 3D-сайтов?

Для генерации — нет, для итераций — немного. В промптах выше уже есть необходимая терминология Three.js. Понимание того, что такое OrbitControls или фрагментный шейдер, помогает просить точечные правки вместо слепой повторной генерации.

Какой AI-инструмент лучше выбрать для 3D-сайта?

Для однофайлового эффекта или hero-секции — Claude напрямую: исходники остаются у вас, а оплата идёт за токены. Для развёрнутого сайта с бэкендом подойдут Lovable или Bolt на бесплатных тарифах, либо VULK, если вам нужен экспортируемый код на React Three Fiber.

Не ухудшит ли 3D hero-блок производительность или SEO?

Только если не контролировать реализацию. Оставьте 3D в рамках одной сцены, добавьте мобильные ограничения выше и держите заголовок с основным текстом в обычном HTML поверх canvas, как во всех шести промптах. Поисковые роботы читают текстовый слой, а Core Web Vitals в основном зависят от остальных ресурсов, которые загружает страница.