Когда сайту нужна 3D-графика?
Сцена в реальном времени оправдывает затраты, когда действия посетителя меняют то, что он узнаёт: вращает продукт, чтобы понять его устройство, перемещается по зданию или ландшафту, сравнивает места рядом друг с другом или изучает систему, которую проще осознать в пространстве. Если ракурс и порядок заданы заранее, проще создать и протестировать отрендеренный ролик или последовательность кадров, и он всё равно может выглядеть кинематографично.
3D обычно подходит для демонстрации продуктов, пространственных и архитектурных историй, научной коммуникации и иммерсивных миров бренда к запуску. Если для истории хватает анимации и скролла без сцены с навигацией, лучше выбрать более лёгкий путь — креативную разработку; карты и дашборды на основе данных относятся к визуализации данных.
Что входит в проект 3D-сайта
В предложении указано, какие результаты входят в объём работ, кто создаёт или предоставляет 3D-ассеты и как принимается каждый пункт.
- Бриф по сюжету и взаимодействию: что исследуют посетители, в каком порядке и что делают дальше
- План 3D-ассетов: ваши модели, лицензированные ассеты или новое моделирование, подготовленные в виде сжатых файлов glTF
- Прототип в браузере с управлением мышью, касаниями и клавиатурой на согласованных телефоне и компьютере
- Читаемый HTML-контент и версия той же истории с уменьшенным движением
- Приёмка по производительности, устройствам и запасным сценариям, а также передача исходных файлов и лицензий на ассеты
Janus Observatory: 3D-интерфейс для десяти возможных futures
Janus Observatory — проект, созданный совместно с Blue Marble Space, в котором Dardo превратил умозрительную исследовательскую структуру в кинематографичное путешествие в браузере. Десять вариантов будущего сразу создают проблему навигации: простой список потерял бы пространственную идею, а одна длинная 3D-последовательность затруднила бы сравнение. Поэтому опыт многослойный. Кинематографичное вступление задаёт атмосферу, атлас показывает весь набор, а обсерватория помогает рассмотреть детали; обратно можно вернуться, не проигрывая вступление заново.
3D-слой задаёт масштаб и различия между мирами, а подписи, состояние навигации и текстовые пояснения передают факты за пределами отрендеренной сцены. При приёмке проверяют, может ли посетитель назвать текущий мир, вернуться в атлас и продолжить после запасного режима отображения; одной частотой кадров на это не ответить. Сборка укладывается в бюджеты размера бандла и проходит браузерное тестирование, а релизы проверяются на визуальные регрессии. Сценарии носят исследовательский характер и не являются прогнозами; измеренных результатов обучения или вовлечённости мы не заявляем.
Производительность и SEO для 3D-сайтов
Поисковые системы не читают то, что нарисовано внутри canvas, поэтому заголовок, текст, ссылки и метаданные отдаются в виде HTML до загрузки сцены. Постер удерживает место сцены, это место резервируется, чтобы ничего не смещалось, а 3D-код загружается после появления первого контента. Если состояние опыта стоит того, чтобы его находили в поиске, оно получает собственный URL.
Производительность измеряется на реальных ассетах и целевых устройствах, а не обещается как универсальная частота кадров. Мы фиксируем последовательность загрузки, типичное взаимодействие, использование памяти там, где это важно, и допустимое визуальное упрощение на слабых телефонах, ориентируясь на пороговые значения Core Web Vitals от Google. Мы не гарантируем позиции в выдаче; мы следим, чтобы 3D-слой никогда не стоял между вашим контентом и поисковым роботом.
Запасные сценарии, уменьшенное движение и доступность
Посетитель должен понимать предложение, даже если движение уменьшено, графический контекст потерян или устройство не тянет сцену. Запасным вариантом может быть статичное изображение, короткое видео или обычная вёрстка с контентом, и он должен сохранять возможность принять решение, а не показывать ошибку. При уменьшенном движении пролёты камеры заменяются склейками или шагами, которыми управляет посетитель, а интерактивные элементы получают управление с клавиатуры и заметный фокус.
От чего зависит стоимость 3D-сайта?
Стоимость 3D-сайта зависит от создания оригинальных ассетов, количества отдельных сцен и состояний взаимодействия, анимации, графического программирования, поддержки устройств и тестирования. Готовая модель продукта и индивидуальное окружение — совершенно разные отправные точки, даже если оба окажутся на одной странице, поэтому в расчёте отдельно указаны арт-дирекшн, моделирование или лицензированные ассеты, анимация, программирование, контент, звук и поддержка запуска.
Первый этап — небольшой рабочий фрагмент в согласованных браузерах на телефоне и компьютере, с реальным текстом, одним типичным ассетом и настоящим взаимодействием. Он выявляет проблемы с навигацией, размером файлов и временем кадра до того, как будет сделано всё остальное. В предложении также указано, кто сможет заменять контент и модели после запуска. Dardo — команда из трёх человек в Боготе под руководством основателя Nicolás Cerón; мы работаем на английском или испанском по восточному и центральному времени США.
Вопросы перед выбором
Сколько стоит 3D-сайт?
Стоимость зависит в основном от производства ассетов и количества сцен. Оценку 3D-проекта мы даём, когда выясним, есть ли готовые модели, сколько нужно разных сцен и состояний взаимодействия и какие устройства необходимо поддерживать. Диапазоны бюджета в форме заявки, от менее 5 000 USD до 60 000 USD и выше, помогают сориентироваться при подготовке первого предложения.
Вредят ли 3D-сайты SEO?
Нет, если контент размещён в HTML. Поисковые системы не могут прочитать то, что нарисовано внутри WebGL-холста, поэтому заголовок, текст, ссылки и метаданные должны выводиться как обычное содержимое страницы, а сцена загружаться после них. При таком подходе 3D-страница сканируется как любая другая; остаются риски медленной загрузки и сдвигов макета, которые мы проверяем до запуска.
Работают ли сайты на Three.js на телефонах?
Да, если сцена изначально создаётся для телефонов, а не просто уменьшается из десктопной демоверсии. Для этого нужны сжатые модели и текстуры, ограниченное разрешение рендеринга, отрисовка только при изменениях и облегчённая версия для менее мощных устройств. Мы тестируем на согласованном телефоне начиная с первого рабочего фрагмента, так что мобильные ограничения влияют на дизайн, а не преподносят сюрприз при запуске.
Всегда ли интерактивному 3D-сайту нужен WebGL?
Нет. Технология зависит от задачи. Если пользователям нужно менять ракурс или управлять объектом, обычно лучше подходит графика WebGL в реальном времени. Для заранее заданного сюжета можно использовать отрендеренные кадры или видео с более лёгким слоем контента: это дешевле в производстве и проще сохранить быстрым. Иногда достаточно слоёв изображений и аккуратной анимации.
Кто создаёт 3D-модели?
Это могут сделать обе стороны, и в предложении мы указываем, кто именно. Вы можете предоставить готовые модели продукта, которые нужно подготовить для веба, мы можем использовать лицензированные ассеты, или в проект может входить новое моделирование. Каждый вариант меняет стоимость и сроки. Каким бы ни был источник, мы согласуем форматы файлов, лимиты полигонов и текстур, а также кто владеет итоговыми исходными файлами и лицензиями.
Сколько времени занимает создание 3D-сайта?
Фиксированного срока нет: он зависит от производства ассетов, количества сцен и раундов правок. График мы задаём в предложении после оценки первого рабочего фрагмента, ведь именно он показывает, что обычно сдвигает сроки, например тяжёлые модели или взаимодействия, которые нужно переосмыслить для сенсорных экранов. Сообщите дату запуска в самом начале, чтобы мы разбили работу на этапы с учётом неё.
Можно ли добавить 3D-сцену на наш существующий сайт?
Часто да. Один 3D-раздел, например просмотр продукта или вступительную сцену, можно добавить на существующий сайт, если его технологии позволяют загружать сцену после контента страницы. Сначала мы изучаем текущую сборку, затем оцениваем сцену, запасной вариант и бюджет производительности как отдельный объём работ, который можно принять самостоятельно.
