Drei — компоненты для R3F

Drei — компоненты для R3F

Drei (@react-three/drei) — набор готовых компонентов и хуков для React Three Fiber. Упрощает работу с камерой, освещением, окружением и эффектами.

Популярные компоненты

OrbitControls

Интерактивная камера: вращение мышью, зум колёсиком.

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

<OrbitControls enableDamping dampingFactor={0.05} />

Stars

Фон из звёзд.

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

<Stars radius={100} depth={50} count={5000} factor={4} />

Environment

HDR-окружение для реалистичного освещения и отражений.

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

<Environment preset="sunset" />

Cloud, Sky, Sparkles

Дополнительные эффекты для атмосферы и «вау»-моментов.

Хуки

• useTexture — загрузка текстур.
• useGLTF — загрузка 3D-моделей (GLTF/GLB).
• useCursor — смена курсора при наведении на объекты.

Связанные статьи

• Интеграция R3F в Next.js — настройка в проекте
• Частые ошибки при работе с 3D — типичные проблемы

Установка

npm install @react-three/drei

Дополнительно

• Drei (хелперы для React Three Fiber)