WebGL и 3D на сайте

3D на сайте перестало быть «вау-эффектом для лендингов Apple» — стало нормой для конфигураторов мебели, презентации товаров, интерактивных лендингов. Современные браузеры умеют рендерить миллионы полигонов через WebGL и WebGPU, GPU мобильных телефонов 2024-2026 годов выпуска тянут сложные сцены. Разбираем, что и как делать.

Зачем 3D на сайте

Если ваш продукт сложный или его трудно представить по картинке — 3D даёт преимущество. Если простой (пакет молока) — лучше хорошие 2D-фотографии.

Стек

Для большинства проектов на React — R3F (React Three Fiber). Декларативный, типизированный, экосистема drei закрывает 90% типовых задач.

Минимальная сцена

npm install three @react-three/fiber @react-three/drei

"use client";
import { Canvas } from "@react-three/fiber";
import { OrbitControls, Environment } from "@react-three/drei";

export function Scene() {
  return (
    <Canvas camera={{ position: [3, 2, 4], fov: 45 }}>
      <ambientLight intensity={0.4} />
      <directionalLight position={[5, 5, 5]} intensity={1.2} />
      <mesh>
        <boxGeometry args={[1, 1, 1]} />
        <meshStandardMaterial color="#5B8DFF" />
      </mesh>
      <OrbitControls />
      <Environment preset="city" />
    </Canvas>
  );
}

OrbitControls — мышь крутит сцену, колесо зумит. Environment — реалистичное освещение из HDRI-карты. 30 строк — рабочая 3D-сцена.

Загрузка моделей

Стандарт 2026 — glTF/GLB. Бинарный, оптимизированный, поддерживает PBR-материалы, анимации, скелетную иерархию. Все 3D-редакторы (Blender, Cinema 4D, 3ds Max) экспортируют.

import { useGLTF } from "@react-three/drei";

export function Sofa() {
  const { scene } = useGLTF("/models/sofa.glb");
  return <primitive object={scene} />;
}

Размер модели имеет значение:

• Web-friendly: 1-5 МБ для одного объекта.
• 10-20 МБ — для крупного изделия с детализацией.

• 50 МБ — слишком много, оптимизируйте (меш, текстуры, draco-compression).

Оптимизация

Draco compression

Сжимает геометрию в 5-10 раз без потери качества:

npx gltf-transform draco model.glb model-draco.glb

В R3F:

useGLTF.preload("/models/sofa.glb"); // фоновая загрузка
const gltf = useGLTF("/models/sofa.glb", "/draco/"); // путь к декодеру

KTX2 текстуры

Вместо PNG/JPG — KTX2 (Basis Universal): сжимаются на лету в нативный формат GPU. Размер в 4-10 раз меньше.

LOD (Level of Detail)

Близко к камере — детальная модель, далеко — упрощённая.

import { Detailed } from "@react-three/drei";

<Detailed distances={[0, 5, 15]}>
  <mesh geometry={highPoly} />
  <mesh geometry={midPoly} />
  <mesh geometry={lowPoly} />
</Detailed>

Instancing

Если рисуете 1000 одинаковых деревьев — не 1000 объектов, а один с instance-данными:

import { Instances, Instance } from "@react-three/drei";

<Instances limit={1000}>
  <boxGeometry />
  <meshStandardMaterial />
  {positions.map((pos, i) => <Instance key={i} position={pos} />)}
</Instances>

Один draw call вместо тысячи — мобильные GPU не перегреваются.

Мобильные устройства

Главная боль. Что работает на ноутбуке, на iPhone SE может тормозить или вообще не запуститься.

Чек-лист:

• Полигонаж сцены: < 200 тыс. треугольников.
• Текстуры: < 1024×1024 на каждую (для интерактивных), KTX2.
• Не более 1-2 source света + environment.
• Тени отключаем или размываем (shadow.mapSize 512, не 2048).
• dpr (device pixel ratio) — ограничиваем до 1.5-2 на мобильных.

<Canvas dpr={Math.min(window.devicePixelRatio, 2)}>

Тестировать обязательно на реальных средне-бюджетных Android (Redmi, Honor) — не только на iPhone последнего поколения.

Продуктовые конфигураторы

Самый частый бизнес-кейс. Пользователь крутит модель, меняет цвет/материал/размер, видит результат сразу.

function Sofa({ color, fabric }) {
  const { nodes, materials } = useGLTF("/models/sofa.glb");
  const mat = useMemo(() => {
    const m = materials.fabric.clone();
    m.color.set(color);
    m.map = textures[fabric];
    return m;
  }, [color, fabric]);

  return <mesh geometry={nodes.sofa.geometry} material={mat} />;
}

Цена/наличие — рядом, обновляются по выбранным параметрам. Кнопка «добавить в корзину» — со всеми выбранными опциями в payload.

Анимация

framer-motion-3d или useFrame:

import { useFrame } from "@react-three/fiber";
import { useRef } from "react";

function SpinningBox() {
  const ref = useRef();
  useFrame((_, delta) => {
    ref.current.rotation.y += delta;
  });
  return <mesh ref={ref}><boxGeometry /><meshStandardMaterial /></mesh>;
}

Для сложных анимаций — Theatre.js (timeline-редактор) или GSAP с tween значений.

SEO и accessibility

3D-сцена — это <canvas>, поисковики её не видят. Что делать:

1. SSR-фолбэк: <noscript> с описанием и фото товара.
2. Текстовые описания рядом с конфигуратором.
3. aria-label на canvas.
4. Альтернативный 2D-вид кнопкой «классический просмотр».

Не делайте сайт, где весь контент — 3D без текста. Для SEO это пустая страница.

WebGPU

Будущее (уже работает в Chrome, Edge, Safari 18+). Производительность в 2-5 раз выше WebGL для тяжёлых сцен. Three.js поддерживает через отдельный renderer:

import { WebGPURenderer } from "three/webgpu";

В 2026 ещё не везде, поэтому делайте fallback на WebGL.

Готовые embed-сервисы

Если не хочется писать код:

• Sketchfab — embed виджета с моделью, бесплатно. Минус — реклама и брендинг Sketchfab.
• Vectary — конструктор + embed, $19-199/мес.
• p3d.in — простой просмотр моделей.

Для маркетингового сайта с одной моделью — нормально. Для сложного конфигуратора — пишите своё.

Итого

3D на сайте — реальный инструмент 2026 года, не баловство. R3F + Three.js — стандартный стек для React-проектов. Главное — оптимизация: модели в 1-5 МБ, тестирование на средних мобильных, фолбэк для совсем слабых устройств. Тогда конверсия растёт, а пользователи не закрывают вкладку из-за тормозов.

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

Three.js или Babylon.js?+

Three.js — стандарт сообщества, больше туториалов, больше готовых компонентов (drei для React). Babylon.js — мощнее «из коробки» (физика, инспектор, подходит для игр), сложнее порог. Для веб-сайта и продуктового 3D — Three.js + R3F. Для серьёзной WebGL-игры — Babylon.

Сколько весит модель для веба?+

Цельтесь в 1-5 МБ для одной модели после Draco-сжатия и KTX2-текстур. До 10-15 МБ — приемлемо для крупного конфигуратора. Свыше 30 МБ — пользователь будет ждать долго, особенно на мобильном интернете. Если модель тяжелее — рассматривайте streaming meshes или показ упрощённой версии до загрузки полной.

Сколько времени занимает разработка конфигуратора мебели?+

MVP с одной моделью и сменой цвета — 2-3 недели. Полноценный конфигуратор с 10-20 моделями, сменой материалов и обивки, интеграцией с корзиной и расчётом цены — 2-4 месяца. Большая часть времени уходит не на код, а на подготовку 3D-моделей дизайнером (или импорт из существующих CAD-файлов).

Что делать с моделями для разных размеров (например, диван 2-3-4-местный)?+

Два подхода. 1) Несколько отдельных моделей — проще, размер сцены растёт. 2) Параметрическая модель — одна геометрия с морф-таргетами или процедурной перестройкой по параметру. Сложнее в реализации, но один файл и плавная анимация изменения размера. Для мебели обычно второй подход — выглядит «магически».

Как 3D влияет на скорость загрузки сайта?+

Сильно: только Three.js — это 600-800 КБ JS gzipped, плюс модель и текстуры. На главной странице ставить такое — самоубийство для Core Web Vitals. Решение: lazy-load — 3D подгружается только по клику или скроллу до секции, страница изначально показывает превью-картинку с placeholder. Тогда LCP не страдает, а пользователь сам решает, грузить ли тяжёлую сцену.

WebGPU стоит использовать в 2026?+

Только с fallback. В Chrome и Edge поддержка с 2023, в Safari — с 2024-2025, в Firefox — частично. Если ваша аудитория преимущественно Chrome — можно тестировать. Для production — пока WebGL как основной, WebGPU как опциональный режим для тяжёлых сцен. Через 1-2 года ситуация поменяется.

Где взять 3D-модели, если нет своих?+

Для прототипа: Sketchfab (есть бесплатные с CC-лицензией), Quaternius, Poly Pizza. Для продукта: заказывать у 3D-моделлера ($100-500 за модель) или импортировать из CAD-файлов (если они уже есть в производстве). Бесплатные модели для коммерции часто нужно проверять на лицензии — не все CC-модели разрешают коммерческое использование.