3D / хелперы · drei

drei (@react-three/drei)

Готовые хелперы для R3F: Environment, OrbitControls, Text, Float…

Tier 3СреднеОсторожно на мобилеfree (MIT)React Three Fiber

Design DNA

«3D-сцена собирается из знакомых кубиков, а не с нуля каждый раз.»

Use with AI

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

В R3F-сцене используй @react-three/drei точечно:
Environment или Stage, OrbitControls, useGLTF для модели.
Не импортируй лишнее. Dispose/unload. Mobile: упростить тени и HDR.
SSR: только client component.

Что умеет

·OrbitControls, Environment, ContactShadows
·Html overlay, Text, useGLTF
·Float, Sparkles, Stage — быстрый polish

Чего не умеет

·Не работает без R3F/Three
·Не no-code редактор

Когда брать

·Уже на R3F и нужно ускорить сцену
·Загрузка GLTF + окружение

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

·Нет React → чистый Three / Spline
·Простой product viewer → model-viewer

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

R3FThree.jsGSAP

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

Писать хелперы вручную на ThreeSpline

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

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

Демо и ссылки

drei docs