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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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