# Галерея моделей - Руководство пользователя

## 🎯 Описание
Галерея моделей - это интерактивная страница для просмотра всех доступных 3D моделей с правильными мешами и текстурами.

## 🚀 Доступ к галерее
- **URL:** `/model-gallery`
- **Из редактора карт:** Кнопка "Галерея моделей" (открывается в новой вкладке)

## ✨ Возможности

### **3D Превью моделей**
- ✅ Полноценное 3D отображение с правильными мешами
- ✅ Автоматическое центрирование и масштабирование
- ✅ Интерактивное управление (поворот, масштабирование)
- ✅ Правильное освещение и тени
- ✅ Загрузка текстур и материалов

### **Навигация и поиск**
- 🔍 Поиск по названию модели
- 📊 Счетчик найденных моделей
- 🎯 Фильтрация в реальном времени

### **Интерактивность**
- 🖱️ Клик по модели для детального просмотра
- 🔄 Модальное окно с увеличенным превью
- 📥 Кнопки "Использовать" и "Скачать"
- ⌨️ Управление мышью и клавиатурой

## 🎮 Управление

### **В 3D превью:**
- **ЛКМ + перетаскивание** - поворот камеры
- **Колесо мыши** - масштабирование
- **ПКМ + перетаскивание** - панорамирование

### **В интерфейсе:**
- **Поиск** - введите название модели
- **Клик по карточке** - детальный просмотр
- **Кнопка "Использовать"** - выбор для редактора
- **Кнопка "Скачать"** - скачивание файла

## 🏗️ Технические детали

### **Компоненты:**
- `ModelPreview.jsx` - 3D превью одной модели
- `ModelGallery.jsx` - основная страница галереи
- API endpoint: `GET /api/models`

### **Поддерживаемые форматы:**
- `.glb` (GLTF Binary)
- `.gltf` (GLTF)

### **Оптимизации:**
- Автоматическое масштабирование под размер контейнера
- Центрирование модели в сцене
- Оптимизация материалов и текстур
- Тени и освещение для лучшего восприятия

## 📁 Структура файлов

```
src/
├── components/
│   └── ModelPreview.jsx      # 3D превью компонент
├── pages/
│   └── ModelGallery.jsx      # Основная страница галереи
└── App.js                    # Маршрутизация

public/
└── models/
    └── copied/               # Папка с моделями
        ├── building-*.glb
        ├── vehicle-*.glb
        └── ...
```

## 🔧 API Endpoints

### **GET /api/models**
Возвращает список всех доступных моделей.

**Ответ:**
```json
[
  "building-hotel.glb",
  "vehicle-car.glb",
  "furniture-chair.glb"
]
```

## 🎨 Стилизация

### **Карточка модели:**
- Размер: 300px минимальная ширина
- Тень и скругленные углы
- Hover эффекты
- Выделение выбранной модели

### **Модальное окно:**
- Полноэкранный просмотр
- Кнопка закрытия
- Действия с моделью

## 🚀 Использование в редакторе

1. Откройте галерею моделей
2. Найдите нужную модель
3. Нажмите "Использовать в редакторе"
4. Модель будет добавлена в редактор карт

## 🐛 Возможные проблемы

### **Модель не загружается:**
- Проверьте, что файл существует в `/public/models/copied/`
- Убедитесь, что формат файла поддерживается (.glb, .gltf)

### **Медленная загрузка:**
- Модели загружаются по требованию
- Большие файлы могут загружаться дольше

### **Проблемы с отображением:**
- Проверьте консоль браузера на ошибки
- Убедитесь, что Three.js загружен корректно

## 📈 Планы развития

- [ ] Категоризация моделей
- [ ] Предварительный просмотр анимаций
- [ ] Информация о полигонах и размере файла
- [ ] Избранные модели
- [ ] Сравнение моделей
- [ ] Пакетная загрузка моделей