3D-сайт — это веб-страница, на которой часть визуала рендерится в браузере как полноценная 3D-сцена через технологию WebGL и библиотеку Three.js. Это не плоские картинки и не видео, а настоящие трёхмерные объекты с глубиной, материалами, светом и тенями: их можно вращать движением мыши, они реагируют на скролл, превращаются друг в друга, взрываются на тысячи частиц. В браузере при этом подключается видеокарта пользователя — те же шейдеры и логика рендеринга, что в современных играх и кинематографических роликах, только запускается на сайте без установки чего-либо.
Технически стек 3D-сайта состоит из нескольких слоёв. Three.js — библиотека-ядро, индустриальный стандарт работы с WebGL. React Three Fiber (R3F) — надстройка, которая позволяет описывать 3D-сцену в декларативном JSX, как обычные React-компоненты. drei — коллекция готовых хелперов (управление камерой, плавающие объекты, типографика в 3D). Postprocessing — цепочка эффектов поверх рендера: Bloom (свечение), DOF (глубина резкости), ChromaticAberration (хроматические аберрации как в кино), Noise (зернистость плёнки), Vignette (затемнение по краям). GLSL — язык шейдеров для уникальных эффектов, которые не собрать из готовых блоков.
Ключевой вопрос для бизнеса — производительность. Бандл Three.js + R3F + drei + postprocessing весит около 1.2 МБ (примерно 350 КБ по сети с Gzip), и при неправильной реализации это влияет на LCP. Решается архитектурно: компонент 3D-сцены подключается через ленивый импорт Next.js (dynamic(() => import(...), { ssr: false })) и грузится фоном после рендера первого экрана. На слабых устройствах через библиотеку detect-gpu детектируем профиль производительности и выдаём меньше частиц или CSS-фолбек — никто не видит чёрный экран. На pet-industrial.ru с 10 000 GLSL-частицами Lighthouse Performance 95+, LCP меньше полутора секунд — проверяется в PageSpeed.
Для бизнеса 3D даёт три вещи. Уникальный визуал — конкуренты с шаблонными плоскими лендингами выглядят на этом фоне как Excel-таблицы; для премиум-брендов, где впечатление от сайта формирует впечатление о продукте, это работает напрямую на LTV. Эмоция и запоминаемость — 3D-сайт обсуждают в LinkedIn, на Awwwards, в профессиональных Telegram-каналах, что даёт реферальный трафик и PR-эффект, недостижимый через Tilda. Технологический сигнал для HR и инвесторов — сайт уровня Apple показывает, что у компании есть бюджет, вкус и инженерная культура. 3D НЕ нужен в транзакционных сайтах под холодный контекст, корпоративных порталах с большой CMS, MVP с горизонтом полгода — честно говорим об этом в разделе ниже.
ПЭТ-ПРОИЗВОДСТВО · 10 000 GLSL PARTICLES + GPU-TIER