rltn/MODEL_GALLERY_GUIDE.md

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

🎯 Описание

Галерея моделей - это интерактивная страница для просмотра всех доступных 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

Возвращает список всех доступных моделей.

Ответ:

[
  "building-hotel.glb",
  "vehicle-car.glb",
  "furniture-chair.glb"
]

🎨 Стилизация

Карточка модели:

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

Модальное окно:

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

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

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

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

Модель не загружается:

• Проверьте, что файл существует в /public/models/copied/
• Убедитесь, что формат файла поддерживается (.glb, .gltf)

Медленная загрузка:

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

Проблемы с отображением:

• Проверьте консоль браузера на ошибки
• Убедитесь, что Three.js загружен корректно

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

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