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