Как создавать 3D-сайты: пошаговый разбор для тех, кто не пишет код

Вы наверняка видели такие сайты: заходишь — а на первом экране медленно вращается кроссовок, который можно повернуть пальцем. Или летишь сквозь тёмное пространство с точками, пока крутишь страницу. Ещё пару лет назад такой сайт стоил как подержанная машина и делался месяц. Сегодня его можно собрать за вечер, ни разу не открыв ни одного файла с кодом.

Эта статья — для человека, который не программист и даже не пробовал «делать сайты с ИИ». Никаких терминов без объяснения, никакого «просто установите пакет». Мы разберём, что такое объёмный сайт на самом деле, кому он приносит заявки, а кому только мешает, и главное — как объяснить машине словами, чего вы хотите, чтобы она сделала это за вас.

Все примеры в статье живые: их можно трогать, крутить и сравнивать прямо здесь, не уходя со страницы.

Что такое 3D-сайт на самом деле

Слово «3D» пугает: кажется, что речь про игру или мультфильм. На деле объёмных сайтов бывает всего три вида, и отличаются они не красотой, а тем, сколько сил и веса требуют.

• Живой фон. Пространство с точками, дымкой или мягкими волнами позади обычного текста и кнопок. Самый лёгкий вид: сайт остаётся быстрым, а ощущение «дорого» появляется сразу.
• Объект, который можно повертеть. Товар, деталь, украшение, макет квартиры. Посетитель хватает его пальцем и разглядывает со всех сторон — как в магазине.
• Прогулка по сцене. Прокручиваешь страницу — а камера едет вперёд, сквозь комнаты, залы или этапы истории. Так делают сайты-презентации, где важно провести человека по сюжету.

Технически всё это рисует сам браузер: у него есть встроенная способность показывать объём (её называют WebGL — умение браузера рисовать объёмную графику без всяких плагинов), а самый популярный набор готовых инструментов для неё называется Three.js. Вам не нужно знать ни то, ни другое — это как не знать марку двигателя в такси. Важно только понимать: это не видео. Каждый кадр считается прямо на устройстве посетителя, и от этого зависит вся дальнейшая история про скорость и телефоны.

Кому 3D помогает продавать, а кому мешает

Объём — не украшение ради украшения. Он решает ровно одну задачу: удержать внимание на те несколько секунд, за которые человек решает, остаться или закрыть вкладку. Дальше продают текст, цена и кнопка. Вот честное сравнение одного и того же первого экрана — потяните разделитель в стороны.

Где объём окупается: премиальные услуги, товары ручной работы, недвижимость и интерьеры, автомобили и техника, обучение и всё, что продают через впечатление. Где он вредит — тоже стоит знать заранее:

• Магазин на сотни позиций. Человек пришёл искать размер и цену, а не любоваться. Объём здесь только замедлит поиск.
• Срочная страница под рекламу. Каждая лишняя секунда загрузки съедает часть тех, за кого вы заплатили. Тяжёлая сцена может стоить дороже, чем принесёт.
• Сайт для пожилой аудитории или для регионов со слабым интернетом. Красивая сцена на старом телефоне превращается в дёргающийся кисель.
• Всё, что должно хорошо находиться в поиске. Поисковик читает текст, а не картинку. Если весь смысл спрятан внутри сцены — для Яндекса и Google страница пустая.

Правило простое: объём делает первый экран, текст делает продажу. Если ради 3D приходится выкидывать текст — значит, 3D тут лишний.

Что такое вайбкодинг простыми словами

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

Ближайшая понятная аналогия — ремонт. Вы не кладёте плитку сами и не знаете марку клея. Вы говорите мастеру: «вот здесь светлее, шов потоньше, розетку левее». Разница только в том, что мастер приходит на неделю, а этот отвечает через минуту и не устаёт от восьмой переделки.

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

Три способа сделать 3D-сайт без программиста

Прежде чем идти по шагам — выберите дорогу. Их три, и они честно отличаются по сложности и результату.

Дальнейшие шаги написаны так, что подходят к любой из трёх дорог: меняется только, куда вы вставляете текст запроса. Сами запросы — одинаковые.

И сразу главная оговорка статьи. Для живого фона хватит первого пути — чата, где ничего настраивать не надо. Но если нужен настоящий объём — прогулка по сцене или товар, который вертят в руках, — идите третьим путём и обязательно со скилом. Без него сцена почти наверняка получится кривой, и вы потратите вечер на переделки вместо результата. Что такое скил и как с ним работать — в двух ближайших разделах.

Шаг 0. Рабочая область: где вы всё это делаете

Про этот шаг обычно молчат, а он для новичка самый пугающий. Рабочая область — это просто место, где вы разговариваете с ИИ и тут же видите результат своими глазами. Пока её нет, любые красивые запросы писать некуда.

Вариант А — чат на сайте. Настраивать нечего. Вы открываете страницу, слева переписка, справа сразу живой сайт: сказали «сделай фон темнее» — увидели, как он потемнел. Ничего скачивать, устанавливать и открывать не нужно, сайт сразу лежит в интернете по своему адресу. Подготовка — ноль минут. Это тот случай, когда «рабочая область» уже собрана за вас.

Вариант Б — помощник на вашем компьютере. Здесь возни больше, зато и свободы больше. По шагам, что вообще происходит:

• Поставить программу-помощника. Их несколько; самые ходовые работают в «терминале» — это чёрное окно, куда пишут текстом. Пугаться его не надо: вы пишете обычные русские фразы, а не команды. Есть и варианты с привычным окном и кнопками.
• Завести отдельную пустую папку под этот сайт. Одна папка — один сайт. Это главное правило: если свалить в кучу три проекта, помощник начнёт править не то.
• Запустить помощника «в этой папке» — он видит только её содержимое и работает внутри неё. Всё, что он создаёт, появляется здесь же файлами.
• Научиться смотреть результат. Помощник запускает предпросмотр и даёт адрес вида localhost:3000 — откройте его в браузере. Это ваш сайт, который пока живёт только на вашем компьютере и никому в интернете не виден.
• Сохранять версии. Скажите: «сохрани текущую версию, чтобы можно было вернуться». Без этого после десятой правки откатиться будет некуда — а откатываться придётся.
• Сложить в папку заготовки: фотографии, текст о себе, цены, список услуг. Тогда помощник вставит ваше, а не выдуманное.

Одна папка — один сайт. И первым делом научитесь возвращать вчерашнюю версию. Это спасает нервы сильнее, чем любой красивый эффект.

Скилы: почему одних запросов бывает мало

Сразу честно: запросы из этой статьи понимает любой помощник и без скилов — но на настоящем 3D без них получается плохо. Лёгкий фон ещё выйдет, а вот прогулка по сцене или вращаемый товар без скила почти всегда получаются кривыми: то сцена не запускается, то камера улетает в стену, то на телефоне всё замирает. Это не придирка, это обычный опыт всех, кто пробовал. Поэтому дальше — отдельная пошаговая инструкция, как делать со скилом.

Скил — это заранее написанная инструкция для помощника по целому типу задач: чем рисовать сцену, как привязывать её к прокрутке, что обязательно проверить на телефоне, чего не делать никогда. Она лежит отдельным файлом и подключается один раз, а дальше срабатывает сама, как только вы заговорили про 3D.

По-простому: запрос — это когда вы каждому новому повару на словах объясняете, какой борщ любите. Скил — техкарта, висящая на кухне: по ней готовят одинаково хорошо все и всегда.

Если вы работаете в чате на сайте — скилы вам не нужны: там нужные инструкции уже вшиты внутрь, вы просто пишете словами, чего хотите. Всё, что ниже, — для тех, кто выбрал вариант с помощником на компьютере.

• 3d-scroll-frontend — главный для нашей темы. Делает страницу, по которой посетитель «летит» сквозь объёмную сцену на прокрутке, и собирает всё в один файл, без установки лишнего хозяйства.
• 3d-web-experience — про объём вообще: вращаемые товары, выбор цвета и комплектации, объёмные портфолио. Заодно честно подсказывает, где 3D уместен, а где только мешает.
• frontend-design — про внешний вид: шрифты, отступы, ритм страницы. Без него легко получить сайт с ощущением «шаблон из 2015 года», даже с красивой сценой.
• Скил про картинки (у разных помощников называется по-своему) — если нужны свои изображения: фоны, текстуры, иллюстрации вместо стоковых.

Как подключить, если коротко: скилы лежат папками внутри скрытой папки помощника у вас на компьютере — обычно это папка .claude/skills в домашней папке пользователя. Внутри каждой папки — файл SKILL.md с самой инструкцией. Скачали папку со скилом, положили туда, перезапустили помощника — готово. Не ищите её руками: попросите помощника «открой мою папку со скилами и положи туда вот этот скил» — он умеет делать это сам.

Если возиться со скилами не хочется, есть приём попроще: положите в папку с сайтом обычный текстовый файл со своими правилами — «фон всегда тёмный, шрифт такой-то, на телефонах движение отключать, кнопка заявки видна всегда» — и в каждом запросе просите его учитывать. Это тот же скил, только сделанный на коленке.

Инструкция: делаем 3D-сайт со скилом, по шагам

Дальше — самая практическая часть статьи. Подготовка занимает минут двадцать один раз в жизни, дальше вы просто пишете, чего хотите. Ничего из этого не требует понимания кода.

Шаг А. Поставьте помощника, который умеет работать с файлами. Обычный чат в браузере не подойдёт — он не может ни положить скил себе в папку, ни сохранить готовый сайт. Нужен помощник, который живёт у вас на компьютере и видит папки: например, Claude Code или Codex CLI (работают в терминале — том самом чёрном окне, где вы пишете обычными словами) либо редактор вроде Cursor, если привычнее окна и кнопки.

Шаг Б. Положите скил в папку скилов. Скил — это папка с одним файлом внутри, SKILL.md. Живут они в скрытой папке помощника: .claude/skills в домашней папке пользователя (у других помощников путь свой, но принцип тот же). Руками её искать не нужно — попросите самого помощника.

Шаг В. Перезапустите помощника и убедитесь, что скил виден. Скилы подхватываются при запуске, а не на лету — это причина половины разочарований («положил, а ничего не изменилось»). После перезапуска скилы вызываются по имени через косую черту, например /3d-scroll-frontend, — или помощник берёт их сам, как только вы заговорили про 3D.

Шаг Г. Первый запуск. Вызываете скил и сразу даёте ему заготовку: тип сцены, из каких экранов состоит история, цвета и куда ведёт кнопка. Скил для прокрутки умеет шесть видов движения камеры, и лучше выбрать самому, а не оставлять на волю случая:

• Туннель — летим вперёд сквозь коридор. Хорошо для истории и постепенного раскрытия.
• Орбита — камера кружит вокруг одного предмета. Для товара и портфолио.
• Полёт над местностью — сверху над городом, горами, картой. Для впечатляющего вступления.
• Проход по комнатам — из помещения в помещение. Для интерьеров, студий, экскурсий.
• Спуск вниз — камера падает по слоям. Для истории «шаг за шагом» и таймлайнов.
• Полёт по кривой — камера идёт по плавной траектории. Самый киношный и самый капризный.

Шаг Д. Правки — но внутри правил скила. Главная ошибка на этом этапе: правите обычными словами, помощник тихо выходит за рамки скила, и сцена ломается на третьей правке. Лечится одной фразой в начале каждого запроса: «продолжай по правилам скила».

Шаг Е. Проверка и вес. Попросите помощника самому пройтись по слабым местам — он знает, где обычно ломается, лучше вас.

Шаг Ж. Куда девать готовый файл. Скил собирает всё в один файл страницы — его можно положить на любой хостинг или отдать тому, кто ведёт ваш сайт. Если возиться с хостингом не хочется, есть путь короче: попросить похожий эффект прямо в чате на нашем сайте — там публикация в один клик, свой адрес и приём заявок уже встроены.

Скилы можно совмещать: «используй 3d-scroll-frontend для сцены и frontend-design для оформления текста» — это нормальная просьба, помощник умеет так работать.

Что чаще всего идёт не так со скилами

• Скил положили, но не перезапустили помощника. Самая частая беда. Список скилов читается при запуске — перезапустите и проверьте запросом из шага В.
• Помощник говорит «использую скил», а на деле нет. Просите перечислить доступные скилы списком и прямо предупреждайте: «не выдумывай, если его нет».
• Скил забылся к середине разговора. В длинной переписке начало теряется. Начинайте каждый крупный запрос с «продолжай по правилам скила такого-то».
• Скил рассчитан на конкретную версию библиотеки. Тот, что для прокрутки, работает со старой проверенной версией Three.js — не просите «возьми самое новое», иначе сцена перестанет запускаться.
• Скил делает страницу, но не бизнес. Он не знает ваших цен, отзывов и адреса — их нужно дать текстом. Иначе получите красивую пустышку с выдуманным содержанием.
• Скилов навалили десяток «на всякий случай». Помощник начинает путаться, какой применять. Держите включёнными два-три нужных.

Шаг 1. Сформулируйте идею одной фразой

Прежде чем что-то писать машине, ответьте себе на три вопроса: кто ваш посетитель, что он должен почувствовать за первые три секунды и какое действие сделать. Получится примерно так: «Женщина 30–45 лет, ищет мастерскую керамики, должна почувствовать теплоту ручной работы и записаться на занятие».

Эта фраза — фундамент. Из неё сразу видно, что объём тут не должен быть космическим и холодным: нужны мягкие тёплые формы, а не звёздное поле. Половина неудачных 3D-сайтов получается именно потому, что этот шаг пропустили и попросили «что-нибудь эффектное».

Шаг 2. Соберите три-пять примеров

Найдите чужие сайты, которые вам нравятся, и сохраните ссылки. Не для того, чтобы копировать — а чтобы объяснить машине направление. Словами описать «вот такое движение» тяжело, а сказать «сделай движение фона как на первом экране такого-то сайта» — легко.

Полезно рядом записать, что именно вам там понравилось: скорость движения, цвета, крупный шрифт, тишина и пустота вокруг. Часто выясняется, что нравится вовсе не объём, а просто много воздуха и хороший шрифт — и тогда задача упрощается втрое.

Шаг 3. Первый запрос — по шаблону

Хороший первый запрос всегда состоит из пяти частей: для кого сайт, что на первом экране, какой объёмный эффект, какие цвета и что должно случиться в конце (заявка, звонок, оплата). Возьмите заготовку и подставьте своё.

Последняя строчка про телефон — не вежливость, а рабочая часть запроса. Без неё вы почти наверняка получите красивую сцену, которая тормозит на половине устройств ваших клиентов.

Шаг 4. Круг правок: как говорить, чтобы вас поняли

Первый результат почти никогда не бывает тем самым. Это нормально: дальше идут круги правок, по одной мысли за раз. Не сваливайте пять пожеланий в одно сообщение — правьте по очереди, иначе не поймёте, что именно испортило картинку.

• Про скорость движения: «Замедли движение фона примерно вдвое, сейчас рябит в глазах».
• Про размер: «Сделай объект крупнее, чтобы он занимал две трети высоты экрана».
• Про свет: «Убери блики, свет должен быть мягким, как в пасмурный день».
• Про камеру: «Камера должна стоять чуть выше и смотреть немного сверху вниз».
• Про читаемость: «Затемни фон под заголовком, белый текст сейчас теряется».
• Про поведение: «Пусть фигура сама медленно вращается, пока её не трогают, и останавливается, когда посетитель схватил её пальцем».

Если результат стал хуже — не пытайтесь чинить поверх. Скажите прямо: «верни как было в прошлый раз, эта правка не подошла». Это обычная фраза, её понимают все помощники.

Шаг 5. Добавьте то, ради чего всё затевалось

Самая частая ошибка новичка: неделю крутить красивую сцену и не сделать форму заявки. Красота не приносит клиентов сама — приносит кнопка и поле, куда человек оставляет телефон. Добавляйте это до того, как начнёте вылизывать блики.

Шаг 6. Проверьте на телефоне — по-настоящему

Больше половины ваших посетителей придут с телефона, и именно там объёмная графика ведёт себя хуже всего. Откройте сайт со своего телефона, а не в уменьшенном окне на компьютере — это разные вещи. Смотрите на три вещи: за сколько секунд появился первый экран, не дёргается ли движение при прокрутке, не греется ли телефон через минуту.

Если что-то из этого плохо — не отказывайтесь от объёма сразу, сначала попросите его облегчить: «Сделай сцену легче для телефонов: меньше точек, проще свет. На узких экранах вместо движущегося фона показывай статичную картинку».

Библиотека готовых запросов

Шесть заготовок под самые ходовые эффекты. Копируйте, подставляйте свои цвета и слова — и вставляйте в чат с ИИ.

Где брать 3D-модели и как не утяжелить сайт

Простые фигуры — шары, кольца, коробки, частицы — машина рисует сама, ничего искать не нужно. Модель понадобится, только если вы хотите показать конкретную вещь: кресло, кроссовок, флакон.

Готовые модели лежат в бесплатных библиотеках вроде Sketchfab и Poly Haven — там есть раздел с бесплатными файлами, но обязательно смотрите условия использования: часть моделей нельзя применять в рекламе без покупки. Просите файл в формате glb — это самый лёгкий вид объёмной модели для интернета.

• Вес всей страницы — до 3 мегабайт, если хотите, чтобы она открывалась на обычном мобильном интернете.
• Сама модель — не больше 1,5 мегабайта. Если файл тяжелее, попросите: «сожми модель, упрости её, снизь качество текстур до разумного минимума».
• Нет модели — не беда. Хорошая фотография товара на объёмном фоне часто работает не хуже, а грузится в десять раз быстрее.
• Не ставьте больше одной сцены на страницу. Два объёмных блока — верный способ уронить скорость.

Пять поломок и фразы, которые их чинят

Всё, что перечислено ниже, случается у всех. Это не признак того, что вы что-то делаете не так — просто скопируйте нужную фразу в чат.

• Белый или чёрный пустой экран. «Сцена не запускается, экран пустой. Найди причину и добавь запасной вариант: если объём не поддерживается, показывай обычную картинку».
• Тормозит на телефоне. «Сделай сцену заметно легче для телефонов: меньше деталей, проще свет, на узких экранах — статичный фон».
• На айфоне не так, как на компьютере. «Проверь, как страница ведёт себя в Safari на iPhone, и почини расхождения».
• Прокрутка дёргается. «Привяжи движение к прокрутке плавно, со сглаживанием, чтобы не было рывков».
• Текст не читается на фоне. «Затемни фон под текстом и увеличь контраст, читаемость важнее красоты».

Чек-лист перед публикацией

Отметьте пункты — галочки сохранятся, даже если вы закроете страницу и вернётесь завтра.

Сколько это стоит по времени и деньгам

Главная статья расходов при самостоятельной работе — не деньги, а ваше терпение на кругах правок. Поэтому и совет: начинайте с живого фона. Он даёт девять десятых впечатления за одну десятую усилий.

Как сделать то же самое за пару минут

Всё описанное выше можно пройти самому, ничего не устанавливая — прямо в чате на webnia.ru. Вы описываете свой бизнес обычными словами, сайт собирается сам, и дальше вы правите его теми же фразами из этой статьи: «замедли фон», «сделай кнопку крупнее», «добавь форму заявки».

Перед первой генерацией открывается галерея готовых видов — среди них есть образцы с настоящей объёмной графикой. Выбрать такой можно даже на первом бесплатном сайте, ничего не оплачивая заранее.

И главное, ради чего всё затевалось: заявки с формы приходят вам на почту и в Telegram, а на платном тарифе к сайту подключается приём оплаты картой — деньги идут на вашу кассу напрямую. Красивый объёмный первый экран удерживает человека, а дальше работают форма и кнопка оплаты.

Начните с одного экрана. Живой фон, честный заголовок, кнопка. Если это соберёт заявки — вот тогда и стоит городить прогулку по сцене.