RiverBoat simple game

Простая демонстрация управления 3D-картой 2GIS MapGL взглядом. Вместо мыши и клавиатуры вы летите над картой, двигая головой — смотрите в сторону, куда хотите отправиться.

1. Приложение захватывает видеопоток с вашей веб-камеры.
2. С помощью MediaPipe Face Mesh определяются координаты зрачков (точки 468 и 473).
3. Положение взгляда отображается на экране в виде курсора.
4. На основе отклонения курсора от «нейтральной» позиции генерируются события клавиш:
   • A / D — вращение карты влево/вправо (отклонение курсора в сторону).
   • W / S — движение вперёд/назад по карте.
5. Чем дальше вы отводите взгляд от центра, тем быстрее карта движется (скорость делится на зоны).

Нажмите кнопку «Start eye tracking», чтобы начать. Первые 1,5 секунды после запуска приложение калибрует нейтральную позицию взгляда.

Через модальное окно (кнопка ⚙) можно изменить:

• Скорость движения — зоны скорости и мёртвая зона (dead zone), в которой карта не реагирует на небольшие отклонения.
• Настройки карты — минимальный/максимальный zoom, pitch.

Настройки сохраняются в localStorage и применяются при следующем запуске.

• React + Vite
• 2GIS MapGL — карта и геоданные
• @mediapipe/face_mesh + camera_utils — отслеживание зрачков

npm install
npm run dev

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

Примечание: для работы с 2GIS MapGL требуется API-ключ. Замените значение API_KEY в файле src/components/Map2GIS.tsx на ваш ключ с dev.2gis.com.