134 lines
5.2 KiB
Markdown
134 lines
5.2 KiB
Markdown
# Галерея моделей - Руководство пользователя
|
||
|
||
## 🎯 Описание
|
||
Галерея моделей - это интерактивная страница для просмотра всех доступных 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 загружен корректно
|
||
|
||
## 📈 Планы развития
|
||
|
||
- [ ] Категоризация моделей
|
||
- [ ] Предварительный просмотр анимаций
|
||
- [ ] Информация о полигонах и размере файла
|
||
- [ ] Избранные модели
|
||
- [ ] Сравнение моделей
|
||
- [ ] Пакетная загрузка моделей
|