Интерактивная 3D Система Частиц с Управлением Жестами

Этот проект представляет собой визуализатор частиц в реальном времени, управляемый движениями вашей руки через веб-камеру.

🚀 Как запустить

1. Убедитесь, что сервер запущен: Вы уже запустили npm run dev. Если нет, выполните эту команду в терминале.

2. Откройте в браузере: Перейдите по адресу http://localhost:5173.

3. Разрешите доступ к камере: При первом запуске браузер запросит разрешение на использование веб-камеры. Нажмите "Разрешить" (Allow), чтобы включить управление жестами.

🎮 Как управлять

Жесты

Система распознает вашу руку через веб-камеру (вы увидите маленькое окно предпросмотра в углу):

• Раскрытая ладонь (Open Palm): Частицы расширяются и разлетаются, создавая объемный эффект взрыва или облака.
• Сжатый кулак (Closed Fist): Частицы сжимаются в плотную, концентрированную форму.
• Движение руки: Перемещая руку перед камерой, вы можете немного влиять на направление движения частиц (в зависимости от режима).

Интерфейс (Панель управления)

В левом нижнем углу находится панель настроек (стеклянный дизайн):

• Pattern Generator (Узоры): Выбирайте форму облака частиц:
  • Sphere (Сфера)
  • Cube (Куб)
  • Galaxy (Галактика / Спираль)
  • Twist (ДНК / Спираль)
• Visuals & Tone (Цвет): Нажмите на цветной кружок, чтобы открыть палитру и изменить цвет частиц в реальном времени.

Полноэкранный режим

В правом верхнем углу есть кнопка для переключения в полноэкранный режим для полного погружения.

🛠 Технологии

• React + Vite: База приложения.
• Three.js (@react-three/fiber): 3D-графика.
• MediaPipe: Распознавание жестов с помощью ИИ.
• Post-processing: Эффекты свечения (Bloom).

---

Создано с помощью Antigravity AI