--- title: "3D-сайты: когда они оправданы и как сделать их быстрыми" description: "Когда 3D-сайт оправдан, что выбрать — 3D, видео или изображения — и как мы сделали десять 3D-миров Janus Observatory быстрыми и рабочими без WebGL." url: "https://dardo.studio/ru/blog/3d-websites/" language: "ru" translations: {"en":"https://dardo.studio/en/blog/3d-websites/","es":"https://dardo.studio/es/blog/paginas-web-3d/","fr":"https://dardo.studio/fr/blog/sites-web-3d/","de":"https://dardo.studio/de/blog/3d-website/","it":"https://dardo.studio/it/blog/siti-web-3d/","pt":"https://dardo.studio/pt/blog/sites-3d/","nl":"https://dardo.studio/nl/blog/3d-websites/","sv":"https://dardo.studio/sv/blogg/3d-webbplatser/","pl":"https://dardo.studio/pl/blog/strony-internetowe-3d/","uk":"https://dardo.studio/uk/blog/3d-websites/","ar":"https://dardo.studio/ar/blog/3d-websites/","hi":"https://dardo.studio/hi/blog/3d-websites/","th":"https://dardo.studio/th/blog/3d-websites/","ja":"https://dardo.studio/ja/blog/3d-websites/","ko":"https://dardo.studio/ko/blog/3d-websites/","zh-Hans":"https://dardo.studio/zh-Hans/blog/3d-websites/","zh-Hant":"https://dardo.studio/zh-Hant/blog/3d-websites/"} updated: "2026-10-13T01:05:28.556Z" --- [Блог](https://dardo.studio/ru/blog/) # 3D-сайты: когда они оправданы и как сохранить их быстрыми Когда 3D-сайт оправдан, когда лучше подойдут видео или изображения и как мы сохранили десять 3D-миров Janus Observatory быстрыми, доступными и удобными. Автор: [Nicolás Cerón](https://dardo.studio/ru/studio/) ·12 октября 2026 г. ![Интерьер старого планетария ночью: латунный звёздный проектор рассыпает янтарные точки света по тёмно-синему куполу, а над ним парит маленькая гранёная алая планета.](https://dardo.studio/_astro/01M4S57YNVSKTAW62QJ0T2N659_Z2oYIIr.webp) ## Главное - 3D оправдано, когда сам предмет пространственный или когда его исследование объясняет то, что не может передать картинка; в остальных случаях изображения или видео обычно работают лучше. - Делайте страницу так, чтобы она работала без WebGL, а 3D-слой считайте улучшением; так текст и данные остаются доступными для поисковых систем. - В Janus Observatory gzip-варианты сократили объём передачи 59 3D-моделей с 15,8 МБ до 8,2 МБ, а оригиналы остались запасным вариантом. - Задайте бюджеты на JavaScript и вес моделей до начала моделирования и проверяйте их в каждом релизе. - Ограничьте pixel ratio, учитывайте режим уменьшенного движения, дайте каждому взаимодействию путь с клавиатуры и тестируйте на реальных телефонах среднего класса. ## Коротко 3D-сайт оправдан, когда сам предмет пространственный или когда движение по нему объясняет то, что не передаст картинка: продукт, который хочется повернуть, место, набор данных, целый мир. Он не оправдан, когда лишь украшает страницу, которую фото или короткое видео объяснили бы не хуже. В любом случае у 3D-слоя есть реальная цена — объём загрузки, расход батареи и доступность, — поэтому делайте страницу так, чтобы она работала без него, а 3D считайте улучшением. Это руководство основано на двух наших собственных проектах: [Janus Observatory](https://dardo.studio/ru/work/janus-observatory/) — браузерном проекте с десятью 3D-мирами — и dardo.studio, главная страница которого открывается 3D-сценой в реальном времени. ## Когда 3D оправдано - **Посетителю нужно увидеть что-то с разных сторон:** продукт, здание, оборудование. - **Пространство — это и есть история:** карта, генплан, путешествие по разным местам. - **Взаимодействие объясняет систему** быстрее текста, например при сравнении сценариев или изучении данных. - **Опыт бренда — это и есть продукт:** запуски, выставки и кампании, где важна атмосфера и посетители ожидают, что смогут всё исследовать. ## Когда нет - 3D-сцена повторяет то, что уже говорят заголовок и изображение. - Большинство посетителей заходят с телефонов среднего класса через мобильный интернет, и им быстро нужен один факт: цена, адрес или часы работы. - После запуска никто в команде не будет поддерживать модели, код и запасные варианты. ## 3D, видео или изображения? | Вариант | Подходит для | На что обратить внимание | | ----------------------------------------- | ------------------------------------------------------------------------ | -------------------------------------------------------------------------------------- | | 3D в реальном времени на WebGL или WebGPU | Исследования, вращения, сравнения, реакции на действия пользователя | Вес моделей и кода, нагрузка на GPU, работа над доступностью, тестирование в браузерах | | Видео | Показа последовательности или атмосферы, одинаковых при каждом просмотре | Размер файла, правила автовоспроизведения, субтитры, отсутствие интерактива | | Изображения или короткая анимация | Быстрого объяснения чего-то одного | Запоминаются хуже; исследовать нельзя | [WebGL](https://developer.mozilla.org/en-US/docs/Web/API/WebGL%5FAPI) работает во всех современных браузерах. [WebGPU](https://developer.mozilla.org/en-US/docs/Web/API/WebGPU%5FAPI) новее и для некоторых задач быстрее, но его поддержка всё ещё неоднородна, поэтому предусмотрите запасной вариант. 3D-вход на dardo.studio сначала пробует WebGPU и при необходимости переключается на WebGL 2, а страницы услуг, работ и контактов — это обычный HTML, который никогда не ждёт 3D-сцену. ## Что мы узнали, создавая Janus Observatory Janus Observatory превращает десять опубликованных сценариев будущего Земли в историю из 17 глав, атлас и обсерваторию с десятью оригинальными низкополигональными мирами и инопланетным астрономом с подвижными сочленениями. Проект работает на бесплатном тарифе Cloudflare Workers, который ограничивает размер приложения. В отчёте о релизе проекта от 27 сентября 2026 года зафиксировано, что потребовалось, чтобы сохранить его быстрым: - **Сжимайте модели и оставляйте запасной вариант.** 59 3D-моделей поставляются в виде gzip-вариантов общим объёмом 8,2 МБ вместо 15,8 МБ — на 47,9% меньше для загрузки. Браузеры, которые не умеют их распаковывать, получают исходные файлы. - **Декодируйте вне основного потока, а потом останавливайтесь.** Декодирование Meshopt выполняется в одном фоновом воркере, который отключается после пяти секунд простоя. - **Задайте бюджет на JavaScript и соблюдайте его.** Начальный JavaScript главной страницы занимает 197 059 байт в gzip при бюджете 256 000 байт, и сборка это проверяет. - **Следите за лавинами запросов.** Цикл спекулятивной предзагрузки в стеке Next.js и OpenNext сделал 11 704 запроса в одной неудачной трассировке браузера. Решением стало отключение предзагрузки для этих ссылок, и теперь тесты требуют, чтобы спекулятивных запросов не было вовсе. - **Фиксируйте разрешение, а не гонитесь за частотой кадров.** Canvas рендерятся с фиксированным device pixel ratio от 1 до 1,5. В отчёте также отозвана приведённая ранее цифра частоты кадров, которая зависела от снижения разрешения, поэтому мы её не называем. ## Сделайте так, чтобы всё работало без 3D У Janus есть одно правило, которое определяет всё остальное: основной опыт должен работать без WebGL и без ИИ. Все десять записей сценариев загружаются при отключённом JavaScript, элементы управления работают без WebGL, а вращение с клавиатуры, видимый фокус и уменьшенное движение создавались вместе с каждой функцией. На [странице доступности](https://janus-observatory.nicocerond.workers.dev/accessibility) перечислены элементы управления, невизуальные эквиваленты и известные ограничения. Цель — [WCAG 2.2](https://www.w3.org/TR/WCAG22/) уровня AA, соответствие проверяется автоматическими тестами в Chromium, Firefox и WebKit. Это правило помогает и поиску, и ИИ-ассистентам: текст, названия и данные находятся в HTML, а не внутри canvas. ## Чек-лист быстрой и доступной 3D-страницы 1. **Сначала сделайте страницу без 3D.** Если HTML-версия не имеет смысла, 3D её не спасёт. 2. **Решите, что именно объясняет 3D**, и уберите всё, что нужно только для эффекта. 3. **Задайте бюджеты** на JavaScript, вес моделей и размер текстур до начала моделирования и проверяйте их при сборке. 4. **Сжимайте модели** такими инструментами, как [meshoptimizer](https://meshoptimizer.org/), отдавайте их в формате [glTF](https://www.khronos.org/gltf/) и оставляйте несжатый запасной вариант, если полагаетесь на новые возможности браузеров, например [DecompressionStream](https://developer.mozilla.org/en-US/docs/Web/API/DecompressionStream). 5. **Загружайте сцену после контента** и только тогда, когда она вот-вот появится на экране. 6. **Ограничьте pixel ratio**, чтобы экраны с высокой плотностью пикселей не рендерили в четыре раза больше пикселей. 7. **Учитывайте** [**prefers-reduced-motion**](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion), дайте каждому взаимодействию путь с клавиатуры и разместите текстовый эквивалент рядом с каждым canvas. 8. **Тестируйте на реальных телефонах среднего класса** и в нескольких браузерных движках, а после запуска следите за [Core Web Vitals](https://web.dev/articles/vitals). ## Сколько это стоит 3D добавляет время на моделирование, оптимизацию и тестирование поверх дизайна и разработки, а запасные варианты — часть работы, а не дополнительная опция. В наших сметах это строка «собственная анимация, 3D или интерактивные данные» из факторов стоимости, которые мы описываем в руководстве о том, [сколько стоит сайт в Колумбии](https://dardo.studio/ru/blog/website-cost-colombia/). ## Как Dardo создаёт 3D-сайты Мы проектируем и создаём 3D-проекты в рамках услуги [интерактивных 3D-сайтов](https://dardo.studio/ru/services/interactive-3d-websites/), а более лёгкую анимацию и работу со скроллом — в рамках [креативной разработки](https://dardo.studio/ru/services/creative-development/). Для [Hyper](https://dardo.studio/ru/work/hyper/) мы сделали на React Three Fiber 3D-историю, управляемую прокруткой, которая превращает разрозненные сигналы в единый профиль клиента. Если у вас есть идея, которую можно понять только в пространстве, [расскажите нам о ней](https://dardo.studio/ru/contact/?service=interactive-3d-websites). ## Частые вопросы **Вредят ли 3D-сайты SEO?** Нет, если контент находится в HTML. Поисковые системы читают текст, ссылки и структурированные данные, а не то, что нарисовано внутри canvas, поэтому размещайте названия, описания и данные на странице, а 3D-сцену используйте как дополнение к ним. **Работают ли 3D-сайты на телефонах?** Могут работать — при бюджетах на размер моделей и JavaScript, ограниченном pixel ratio и тестировании на реальных телефонах среднего класса. Всегда предусматривайте версию, которая работает без WebGL. **Что выбрать: WebGL или WebGPU?** WebGL работает во всех современных браузерах. WebGPU новее и может быть быстрее, но его поддержка всё ещё неоднородна, поэтому, если используете его, предусмотрите запасной вариант на WebGL, как это сделано на главной странице dardo.studio. **Может ли 3D-сайт быть доступным?** Может, если доступность закладывается в каждую функцию: управление с клавиатуры, видимый фокус, уменьшенное движение и текстовый эквивалент рядом с каждым canvas. Janus Observatory ориентируется на WCAG 2.2 уровня AA. ## Источники и дополнительные материалы Источники, на которых основана эта страница, с дополнительными подробностями от первоначальных издателей. - [Janus Observatory: доступность (на английском)](https://janus-observatory.nicocerond.workers.dev/accessibility) · janus-observatory.nicocerond.workers.dev - [MDN: WebGL API](https://developer.mozilla.org/en-US/docs/Web/API/WebGL%5FAPI) · developer.mozilla.org - [MDN: WebGPU API](https://developer.mozilla.org/en-US/docs/Web/API/WebGPU%5FAPI) · developer.mozilla.org - [MDN: DecompressionStream](https://developer.mozilla.org/en-US/docs/Web/API/DecompressionStream) · developer.mozilla.org - [MDN: prefers-reduced-motion](https://developer.mozilla.org/en-US/docs/Web/CSS/@media/prefers-reduced-motion) · developer.mozilla.org - [Khronos Group: glTF (на английском)](https://www.khronos.org/gltf/) · khronos.org - [meshoptimizer (на английском)](https://meshoptimizer.org/) · meshoptimizer.org - [W3C: Руководство по доступности веб-контента (WCAG) 2.2](https://www.w3.org/TR/WCAG22/) · w3.org - [web.dev: Web Vitals](https://web.dev/articles/vitals) · web.dev [Nicolás Cerón](https://dardo.studio/ru/studio/) Nicolás Cerón — основатель Dardo, студии брендинга, веб-дизайна и разработки в Боготе, Колумбия. ## Похожие статьи - [**Сколько стоит сайт в Колумбии в 2026 году: реальные цены и что влияет на смету**Сколько стоит сайт в Колумбии: датированные цены студий из Боготы, ежегодные расходы на домен и хостинг и факторы, которые реально влияют на смету.](https://dardo.studio/ru/blog/website-cost-colombia/) - [**Перенос сайта с Framer на Astro: как сменить платформу и не потерять дизайн и позиции**У Framer нет экспорта в HTML, поэтому переход на Astro — это пересборка. Что сохранить заранее, что ломается и как не потерять дизайн, URL и позиции.](https://dardo.studio/ru/blog/framer-to-astro/) - [**Перенос сайта с Webflow на Astro: как сменить платформу и не потерять контент, дизайн и позиции**Перенос с Webflow на Astro: экспорт кода не включает CMS, формы, поиск и языковые версии. Что забрать из Webflow, что пересобрать и как сохранить позиции.](https://dardo.studio/ru/blog/webflow-to-astro/) - [**Перенос сайта с WordPress на Astro: headless или полный переезд и как не потерять позиции в поиске**Перенос с WordPress на Astro: два пути, что экспортировать, как сохранить данные Yoast, постоянные ссылки и загрузки и какие URL WordPress часто забывают.](https://dardo.studio/ru/blog/wordpress-to-astro/) ## Продолжайте знакомство. - [Услуга · **Интерактивные 3D-сайты на Three.js и WebGL**](https://dardo.studio/ru/services/interactive-3d-websites/) - [Ваш проект · **Начать разговор**](https://dardo.studio/ru/contact/)