Разработка сайтов · Санкт-Петербург

Разработка 3D-сайта на Three.js: цена

3D-сцена, которая разворачивается прямо в браузере: модель можно вращать, наводить курсор на детали, а камера летает по ней по мере прокрутки. Верхняя ступень иммерсивных сайтов — дороже и дольше, чем видео по скроллу, но только так получается настоящий интерактив. Ниже честно: сколько стоит, сколько весит, что при этом видит поиск и когда сцена вам не нужна.

от 120 000 ₽надбавка к сайту; лендинг со сценой целиком — от 180 000 ₽

3–5недель на сцену — поверх срока самого сайта

40+проектов с 2024 года; ИП, договор, фиксированная смета

Получить предварительную смету Посмотреть, как это устроено

Коротко

Если коротко

Трёхмерная сцена внутри страницы, которую браузер считает на лету. Не видео и не набор картинок: посетитель управляет ею сам — крутит модель, наводит курсор на детали, а камера летает по сцене по мере прокрутки.

Если коротко

Кому. Тем, у кого продукт сложнее, чем можно объяснить фотографией: оборудование, недвижимость, предметы с формой и фактурой, технологии
Сколько. От 120 000 ₽ надбавкой к сайту: с лендингом от 180 000 ₽ за всё, с корпоративным сайтом от 270 000 ₽. Срок — 3–5 недель поверх срока самого сайта
Что знать до заказа. Сцена — самое тяжёлое, что бывает на странице; поисковики внутри неё не видят ничего; на слабом телефоне её нужно упрощать. Все три пункта разобраны ниже, а не спрятаны
Есть вариант дешевле. Нужен эффект, а не интерактив — задачу решает видео по скроллу за 35 000 ₽ и в разы быстрее

Развилка

Сцена, видео по скроллу или конфигуратор

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

3D-сцена в реальном времени

Что это: Ничего не отрендерено заранее: картинку считает видеокарта посетителя
Что может посетитель: Крутить в любую сторону, кликать по деталям, менять материал
Зависимость от устройства: Есть, и заметная: нужен упрощённый мобильный вариант
Цена: от 120 000 ₽ надбавкой к сайту
Срок: 3–5 недель

Видео по скроллу

Что это: Заранее отрендеренные кадры, которые листаются прокруткой
Что может посетитель: Листать вперёд и назад — решений он не принимает
Зависимость от устройства: Небольшая: вес предсказуем, работает даже на Тильде
Цена: от 35 000 ₽
Срок: дни, а не недели

Конфигуратор

Что это: Не сцена, а программа: трёхмерная картинка — витрина поверх бизнес-логики
Что может посетитель: Выбрать комплектацию, проверить совместимость узлов, посчитать цену, выгрузить спецификацию
Зависимость от устройства: Как у сцены, плюс связь с вашей учётной системой
Цена: на рынке РФ от 70 000 ₽ за шаблонное решение до 700 000 ₽ за индивидуальное
Срок: больше месяца

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

Возможности

Что умеет сцена и на чём она собрана

Собирается это на Three.js — стандарте для 3D в браузере; если проект на React, добавляется React Three Fiber. Движение камеры привязывается к прокрутке через GSAP со ScrollTrigger, модели приходят в формате glTF/GLB со сжатием геометрии и текстур, свет чаще всего берётся из готовой панорамы: она даёт реалистичное освещение почти бесплатно по весу.

Вращение и приближение

Посетитель крутит модель сам, в любую сторону.

Наведение на детали

Узел подсвечивается, рядом появляется подпись.

Перелёты камеры по прокрутке

От общего вида к деталям, с остановками на нужных.

Разбор на узлы

Корпус раскрывается, видно устройство изнутри.

Смена материалов и цвета

Простые варианты, без расчёта цены и совместимости.

Реакция на действия

Клик по детали открывает описание или ведёт на нужную страницу.

Мощный хостинг не нужен: сцену считает видеокарта посетителя, ваш сервер только отдаёт файлы — требования те же, что у обычного сайта. Готовые движки с лицензией я не использую: есть платформы, на которых сцену собирают быстрее, но лицензия там стоит от 35 000 до 100 000 ₽, а если сцену пишет подрядчик — лицензий нужно две, вам и ему. На этапе сметы про это редко предупреждают; у меня такой строки в счёте нет вовсе.

Платформа

Можно ли это на Тильде

Наполовину. Нативного блока для 3D в Тильде нет — есть вставка стороннего кода в Zero Block, и через неё в страницу заходит просмотрщик готовой модели: покрутить объект, приблизить, поменять цвет. Для карточки товара этого хватает.

Чего на Тильде не выйдет

Перелётов камеры, связанных с прокруткой страницы
Сцены на весь первый экран, а не в рамке виджета
Реакции на действия за пределами виджета
Поддержки платформы по стороннему коду: если виджет сломается после обновления, чинить будет тот, кто ставил

Маршрут получается такой. Нужен просмотрщик товара — остаёмся на Тильде, это дёшево. Нужна сцена как часть истории страницы — сайт делается на чистом коде.

Модель

Откуда берётся модель

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

Готовая из библиотеки

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

Съёмка фотограмметрией

Реальный предмет превращается в модель по множеству фотографий. Хорошо работает для вещей со сложной фактурой.

Моделирование под заказ

Нужно, когда показываем именно ваш продукт и он должен выглядеть точно. Отдельный подрядчик и отдельная строка сметы — от 15 000 ₽ за объект.

Ваша модель, которая уже есть

Самый частый и самый обманчивый вариант. Модель из конструкторской программы или из каталога для печати почти никогда не годится для веба напрямую: миллионы полигонов, невидимые внутренние детали, винты и резьба. Её приходится переделывать, и это оплачиваемая работа — от 8 000 ₽ за объект. Скажу об этом сразу, как посмотрю файл, — до сметы, а не после.

Для простой сцены отдельный 3D-моделлер не нужен: готовой модели и аккуратно выставленного света достаточно. Скажу честно, если ваш случай требует моделлера.

Честно

Честные ограничения

Самый важный блок страницы. Направление легко продать картинкой и потом получить недовольного клиента, поэтому всё, что может пойти не так, стоит до цены, а не после.

Вес и скорость — цифрой, а не словом «оптимизируем»

3D-сцена — самое тяжёлое содержимое в вебе. Рабочий потолок для одной модели — около 3 МБ после сжатия: не строгий закон, а граница, за которой первый экран начинает грузиться заметно. Механика простая: текстуры сводятся к 1024 пикселям по стороне, невидимые детали вырезаются, свет запекается в текстуру вместо расчёта на лету.

Что называю цифрой

Вес сцены в мегабайтах, время до появления главного содержимого, задержку отклика на первое действие и то, не прыгает ли вёрстка при загрузке. Ориентиры поисковых систем — до 2,5 секунды до главного содержимого, до 200 миллисекунд на отклик, почти нулевой сдвиг вёрстки. Замер хуже согласованного — довожу, а не сдаю.

Что видит поиск

Ничего. Для робота содержимое сцены — пустой прямоугольник: текст, нарисованный внутри трёхмерного пространства, в индекс не попадёт. Поэтому рядом обязан стоять обычный текст в разметке, и заголовки живут в разметке, а не в сцене. Об этом молчат почти все, кто продаёт 3D, — а клиент узнаёт через полгода. SEO-слой страницы со сценой проектирую отдельно и показываю, какой именно текст увидит робот.

Телефоны

Больше половины трафика приходит с телефонов, а телефоны слабее компьютеров: сцена, летающая на компьютере, на среднем телефоне греет корпус и сажает батарею. Поэтому упрощённый мобильный вариант проектируется заранее и входит в цену, а не «если не потянет». Иногда правильное решение — на телефоне показывать секвенцию кадров вместо сцены; скажу об этом на раскадровке.

Что будет, если сцена не запустится

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

Картинка проще, чем студийный рендер, а правки дороже обычных

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

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

Кому подходит

Кому оправдано, а кому нет

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

Подходит

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

Не подойдёт

Решение принимается по цене и срокам, а не по устройству продукта: локальные услуги, доставка, ремонт. Человеку нужен телефон и цена, а не облёт камеры — достаточно хорошего лендинга
Сайт нужен под рекламу, где каждая секунда загрузки стоит денег: тяжёлый первый экран съедает бюджет до того, как человек прочитает оффер. Вам в сайт под рекламный трафик
Нужен эффект, а не интерактив: то же впечатление даёт секвенция кадров за 35 000 ₽. Проверяемый факт — часть сайтов, которые считаются образцом дорогого 3D, никакого 3D не содержат: там зациклённое видео, и это видно за одну строку в консоли браузера
Бюджет на весь проект меньше 180 000 ₽. Это не отказ, а порядок действий: начните с сайта и видео по скроллу — вместе с лендингом это от 80 000 ₽, — а сцену добавим вторым этапом, когда сайт начнёт приносить заявки. К сайту, который я делал или который веду, сцена пристраивается без переделки. Если сначала нужно понять, что вам вообще требуется, есть разбор задачи за 9 900 ₽, и его стоимость вычитается, когда заказываете работу
У продукта нет ни модели, ни бюджета на моделирование: честнее начать с хорошей предметной съёмки — она дешевле и работает всегда

Стоимость

Сколько стоит 3D-сцена

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

Что входит и что считается отдельно

Разбор задачи и раскадровка — от 9 900 ₽, 2–3 рабочих дня; стоимость вычитается, когда заказываете работу
Упрощённый мобильный вариант сцены — входит в цену сцены
Модель под заказ, если готовой нет — от 15 000 ₽ за объект, 5–10 дней
Переделка вашей модели под веб — от 8 000 ₽ за объект, 2–4 дня
Лицензии на готовые модели из библиотек — по факту, называю заранее

Что влияет на цену

Сложность модели
Число сценариев движения камеры
Объём интерактива
Нужен ли отдельный мобильный вариант сцены или хватает упрощения основной

от 120 000 ₽

Надбавка к сайту, срок 3–5 недель поверх срока самого сайта. Срок считается от момента, когда у меня есть ответы на бриф и материал по модели. Цена фиксируется в договоре после раскадровки и дальше не растёт.

Получить предварительную смету

180 000₽ — лендинг со сценой целиком, 4–7 недель

270 000₽ — корпоративный сайт со сценой, 6–9 недель

9 900₽ — разбор задачи и раскадровка, вычитается из работ

Ориентир по рынку, чтобы было с чем сравнивать. В России одна модель с вращением на странице стоит у студий 50 000 – 100 000 ₽, интерактивная сцена с анимациями — 150 000 – 300 000 ₽, конфигуратор с расчётом — от 70 000 до 700 000 ₽. Цифры сняты с открытых страниц студий в сентябре 2026. Дешевле встречается — обычно это готовый виджет с типовой моделью, и это честный вариант, если он решает вашу задачу. Остальные цены разработки — на странице цен.

Как идёт работа

Как проходит работа

Разбор задачи

Смотрю продукт, материал и цель страницы. Отвечаю на главный вопрос: нужна ли сцена или задача решается дешевле. От 9 900 ₽, вычитается из стоимости работ.

Раскадровка

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

Модель

Готовая, снятая, заказанная или переделанная из вашей. Сжатие геометрии и текстур — обязательная часть, а не опция.

Свет и материалы

То, что отличает «модель на сайте» от сцены, на которую хочется смотреть.

Программирование сцены

Движение камеры, реакция на прокрутку и действия, связь с содержанием страницы, запасной вариант на случай отказа WebGL.

Оптимизация и мобильный вариант

Отдельная работа, спроектированная заранее, а не подгонка в последний день.

Тесты на реальных устройствах

Не в эмуляторе: тяжёлая сцена ведёт себя в нём иначе. Скорость называется цифрой.

Сдача

С фиксированным числом итераций и передачей исходников сцены и подготовленной модели.

Что нужно от вас — 4–6 часов на весь проект, и почти всё в первую неделю: материал по объекту (модель, если есть, чертежи, габариты, фотографии со всех сторон), ответ на бриф, согласование раскадровки на созвоне 40–60 минут и приёмка с того телефона, с которого смотрят ваши клиенты. Разбираться в форматах, полигонах и текстурах, искать 3D-специалиста и покупать лицензии на софт не нужно. Сроки согласований входят в срок проекта: если ответ занимает неделю, проект сдвигается ровно на неделю — предупрежу сразу.

Обсудить сцену

Гарантии

Что гарантирую и что остаётся у вас

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

Что гарантирую

Состав работ прописан в договоре, а не «комплекс мероприятий по визуализации»
Срок из договора; цена зафиксирована после раскадровки и дальше не растёт
Замер веса и скорости цифрой — до заказа и после сдачи
Сцена работает на телефоне в упрощённом варианте, а не «должна работать»
При отказе WebGL страница остаётся понятной и продающей
Текст, по которому страница ранжируется, живёт в разметке, а не внутри сцены
Свои ошибки правлю бесплатно, в том числе через полгода после сдачи

Что остаётся у вас

Исходник сцены и подготовленная под веб модель — её можно переиспользовать в презентациях и на маркетплейсах
Доступы оформлены на вас с самого начала
Текст, картинки и блоки вокруг сцены правите сами
Саму сцену правлю я или любой разработчик, знающий Three.js: код обычный, без самодельных надстроек, к нему приложено описание, что где лежит
Стоимость владения та же, что у обычного сайта на коде: домен и хостинг

Что советую до запуска: проверить гипотезу дешевле — собрать страницу с секвенцией кадров, посмотреть на поведение и только потом вкладываться в сцену. Скажу об этом, даже если это означает продать вам работу на 35 000 ₽ вместо 120 000 ₽.

Вопросы

Частые вопросы

Сколько стоит 3D-сайт?

От 120 000 ₽ надбавкой к сайту, то есть от 180 000 ₽ за лендинг со сценой целиком. Точная сумма — после раскадровки: цена зависит от сложности модели и объёма интерактива.

Почему так дороже, чем видео по скроллу?

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

Будет ли тормозить на телефоне?

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

Поисковики увидят содержимое сцены?

Нет, для робота это пустой прямоугольник. Поэтому рядом всегда ставится обычный текст в разметке: сцена работает на впечатление, текст — на поиск. Как собирается сайт под SEO.

У меня нет модели продукта. А если есть, но из конструкторской программы?

Без модели вариантов три: готовая из библиотеки, съёмка фотограмметрией, моделирование под заказ. Модель из конструкторской программы обычно требует переделки — в ней миллионы полигонов и невидимые детали, а веб рассчитан примерно на 3 МБ на объект. Посмотрю файл и назову цену до сметы, отдельной строкой.

Можно сделать конфигуратор с расчётом цены?

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

Можно ли это на Тильде?

Просмотрщик модели — да, через вставку кода в Zero Block. Сцену с перелётами камеры по прокрутке — нет. Если нужно остаться на платформе, ваш вариант — секвенция кадров. Что умеет Тильда.

Работаете один или командой?

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

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

Получить предварительную смету

Made on

Tilda