3D · r3f

React Three Fiber

Three.js декларативно в React

Tier 3СреднеОсторожно на мобилеfree (MIT)React, Next.js

Design DNA

«3D как компоненты React — ближе к привычному вайбкодингу на Next.»

Use with AI

Скопируй промпт и отдай агенту. Он реализует решение в твоём стеке — не копирует чужой код.

Добавь React Three Fiber сцену (client component) в Next.js проект.
Используй @react-three/drei по минимуму.
SSR-safe. Mobile fallback. Не ломай существующий layout.

Что умеет

·Declarative Canvas
·Экосистема drei
·Связка с React state

Чего не умеет

·Магия без понимания перформанса
·SSR осторожно (client only)

Когда брать

·Уже на React/Next и нужен 3D

Когда не брать

·Один раз показать модель → Spline / model-viewer

С чем сочетается

dreiGSAPLenisTheatre.js

Альтернативы

Three.js vanillaSpline

Типичные ошибки

·Canvas на всём сайте без нужды
·Hydration ошибки
·Не проверил производительность на iPhone SE. WebGL и AI-модели могут убить батарею или вызвать краш. Всегда делай фоллбэк на статику через matchMedia или детект мощности устройства.

Демо и ссылки

docs.pmnd.rs/react-three-fiber