Гайды / Вайбкодинг
Вайбкодинг · 3D-сайт · по шагам
Объёмный 3D-сайт за вечер: собираем сцену на нейросети без кода
Те самые сайты, где на первом экране висит объёмная фигура, она крутится за курсором и реагирует на тебя. Выглядит как работа студии за пару тысяч долларов. На деле объёмную сцену ты собираешь мышкой в браузере бесплатно, а Claude Code сам вставляет её в твой сайт по одной строке. Ниже всё по шагам: где собрать объём, какую строку дать Claude, куда это встаёт и как посмотреть результат. Без вёрстки и без программирования, для человека, который открывает это впервые
Твой продукт.
Объёмно
фигура крутится за курсором
это не картинка, это живая 3D-сцена прямо на странице
В чём фокус
Объём собираешь мышкой, вставляет его Claude
Раньше объёмный сайт это была работа на стыке 3D-художника и программиста: один лепит фигуру, второй неделю прикручивает её к странице через тяжёлые библиотеки вроде Three.js. Дорого и долго. Сейчас всё разваливается на две простые части
Первая часть это Spline (бесплатный редактор 3D прямо в браузере, ничего ставить не нужно, работаешь мышкой как в любом графическом редакторе). Там ты лепишь объёмную сцену и нажимаешь одну кнопку, чтобы получить на неё ссылку. Вторая часть это Claude Code: даёшь ему эту ссылку одной строкой, и он сам вписывает объём в твой сайт, добавляет вращение за курсором и подгоняет под первый экран. Тебе не нужно знать ни Three.js, ни как устроен код сцены
Шаг 0 · что нужно до старта
На компьютере должен стоять Claude Code, а под рукой быть сайт
Объём мы вставляем в сайт, поэтому нужны две вещи. Первая это Claude Code (это Claude, встроенный в редактор кода VS Code, работает как обычная программа на компьютере). Вторая это сам сайт, куда мы добавим объём. Если сайта ещё нет, его собираешь той же одной строкой, у меня про это есть отдельный гайд по кодовому слову САЙТ
Если Claude Code ещё не стоит
У меня есть отдельный гайд: скачать, оплатить российской картой и запустить за один вечер, всё по скриншотам
Установить Claude Code с нуляClaude Code стоит, сайт открыт в VS Code? Тогда идём лепить объём
Шаг 1 · собери объёмную сцену
Открой Spline и собери фигуру мышкой
Зайди на spline.design и зарегистрируйся через Google. Бесплатного тарифа хватает с запасом, карта не нужна. Нажми New File, откроется чистая сцена с одной кнопкой на холсте
Дальше самое приятное: лепишь мышкой. Слева панель с фигурами (шар, куб, текст, тор). Перетащил шар на сцену, покрутил, задал цвет справа в панели материала. Хочешь, чтобы фигура реагировала на курсор, выбери её и в правой панели добавь Mouse → Look At (фигура будет поворачиваться за мышкой). Это весь объём, который нужен для первого экрана, не усложняй на старте
Не хочешь лепить с нуля
Слева вверху есть кнопка Discover: там готовые сцены сообщества. Берёшь похожую, перекрашиваешь под свой цвет и идёшь дальше. На старте это быстрее, чем рисовать своё
Шаг 2 · забери ссылку на сцену
Нажми Export → Viewer и скопируй ссылку
Сцена готова. Теперь её нужно превратить в ссылку, по которой Claude вставит объём в сайт. Справа вверху нажми Export, в открывшейся панели слева выбери Viewer и нажми Generate. Spline даст тебе код, внутри которого есть адрес сцены, он выглядит так:
# у тебя будет свой набор букв вместо ABCD1234
https://prod.spline.design/ABCD1234/scene.splinecode
Что скопировать
Тебе нужна именно строчка, которая заканчивается на scene.splinecode. Скопируй её целиком, на следующем шаге отдашь Claude. Остальной код из панели запоминать не нужно, Claude соберёт его сам
Шаг 3 · отдай ссылку Claude одной строкой
Вставь сцену в сайт, ничего не кодируя
Открой свой сайт в Claude Code (тот, в котором собирал лендинг) и напиши одну строку: вставь объёмную сцену на первый экран и дай ссылку, которую забрал в Spline. Claude сам подключит просмотрщик Spline и встроит объём в hero. Скопируй строку ниже и подставь свою ссылку:
› Вставь на первый экран сайта объёмную 3D-сцену
из Spline по ссылке
https://prod.spline.design/ABCD1234/scene.splinecode
Подключи официальный spline-viewer, посади сцену
справа от заголовка, сделай фон прозрачным и
оставь лёгкое вращение за курсором
Под капотом Claude добавит в страницу всего две вещи (тебе их знать не обязательно, но вот как это выглядит): подключение просмотрщика и сам тег сцены с твоей ссылкой
# 1. подключаем просмотрщик Spline <script type="module" src="https://unpkg.com/@splinetool/viewer/build/spline-viewer.js"></script> # 2. вставляем сцену (подставь свою ссылку) <spline-viewer url="https://prod.spline.design/ABCD1234/scene.splinecode"></spline-viewer>
Что увидишь
Claude отчитается, что вставил сцену, и сам откроет сайт в браузере. На первом экране появится объёмная фигура, она крутится за курсором. Не нравится размер или позиция, пишешь следующей строкой «сделай сцену крупнее» или «передвинь объём левее», Claude правит на месте
Как посмотреть результат
Просто открой страницу и подвигай мышкой
Claude сам откроет сайт в браузере после правки. Если хочешь открыть руками, попроси его одной строкой запустить локальный просмотр, он поднимет страницу и даст ссылку, которую ты откроешь в браузере
› Запусти локальный просмотр сайта и дай мне
ссылку, чтобы я открыл его в браузере
Открыл, поводил мышкой над фигурой, она поворачивается следом. Это и есть объём, ради которого люди залипают на первом экране. Дальше живёшь в одной строке: «поменяй цвет фигуры на синий», «добавь вторую сцену в блок о продукте», «сделай объём поменьше на телефоне», Claude переделывает сам
Чтобы не споткнуться
Ссылка должна кончаться на scene.splinecode, иначе объёма нет
- 01
Копируй ссылку до конца
Объём не появился? Чаще всего в Claude уехала не вся ссылка. Она обязана заканчиваться на scene.splinecode, проверь и дай заново
- 02
Держи сцену лёгкой
Чем больше фигур и эффектов в Spline, тем тяжелее страница и тем дольше она грузится у посетителя. На первый экран хватает одной выразительной фигуры. Тяжело грузится, попроси Claude добавить превью-картинку, пока сцена подтягивается
- 03
Проверь на телефоне
Объёмная сцена на телефоне может налезать на текст. Скажи Claude «на телефоне сделай сцену ниже заголовка и поменьше», он сам подгонит под маленький экран
Зачем тебе это на самом деле
Объём это не украшение, это первая секунда внимания
Собрать сцену по шагам выше ты сможешь сегодня вечером. Но дело не в красоте ради красоты. Человек заходит на твой сайт и за первую секунду решает, остаться ему или закрыть. Живой объём на первом экране держит этот взгляд там, где у всех остальных плоская картинка
Раньше за такую первую секунду платили студии и ждали неделями. Теперь у тебя в руках связка из бесплатного редактора и одной строки. Появилась идея продукта, ты за вечер собрал под неё сайт с объёмом и пустил трафик. Не зашло, собрал другой
А дальше
«Объём собрал. А как сделать из сайта поток заявок?»
Объём это вход и первая секунда внимания. Дальше идёт то, что в Spline не нарисуешь: как написать первый экран, чтобы человек после красивой фигуры остался читать, какие блоки и в каком порядке ведут к заявке, как подключить оплату и форму, как привести на этот сайт людей. Это уже не одна строка, это система
Я разбираю её по шагам на ИИ-Лагере: собираем сайт, доводим до продающего и подключаем к нему трафик, от пустого экрана до первых заявок, руками вместе со мной
Живое мероприятие · ИИ-Лагерь
Хочешь не просто собрать объёмный сайт, а сделать из него поток клиентов?
На ИИ-Лагере разбираем весь путь: собираем сайт, доводим до продающего и подключаем трафик, от пустого экрана до первых заявок, вместе со мной
Забрать бесплатную путёвкуОткрывается в браузере без VPN ))