# Домашнее Задание 3D Gallery (GLB)

Интерактивная веб-галерея для предпросмотра 3D-моделей (формат GLB) с возможностью загрузки своих моделей, просмотра предпросмотра и ручного вращения.

---

## 🚀 Как это работает

* На главной странице отображается сетка карточек (4 в ряд) с 3D-превью моделей (используется Three.js + GLTFLoader).
* Есть предустановленные модели, а также можно загружать свои `.glb` файлы через интерфейс (файлы хранятся в IndexedDB браузера, не на сервере).
* Для пользовательских моделей создаётся отдельная карточка с превью.
* По клику на карточку открывается страница детального просмотра — можно вращать, приближать, отдалять модель и быстро менять стандартные ракурсы.
* Все предпросмотры рендерятся в режиме “single frame”, то есть мини-канвас не грузит систему.
* Для парных моделей (например, «Машина + Дерево») — оба объекта отображаются в одной карточке с отступом.

---

## 🛠️ Структура проекта

```
project-root/
├── index.html           // Главная страница (галерея)
├── detail.html          // Страница просмотра одной модели
├── app.js               // Основная логика галереи (модули!)
├── detail.js            // Просмотр и управление камерой
├── idb.js               // Работа с IndexedDB (user-модели)
├── styles.css           // Вёрстка
├── models/              // Папка для glb моделей (car.glb, tree.glb и т.д.)
│     ├── car.glb
│     ├── tree.glb
│     ├── tree1.glb
│     └── tree2.glb
└── ...
```

---

## 📦 Установка и запуск

1. **Склонируйте репозиторий** и поместите свои `.glb` файлы в папку `models/`.
2. Откройте проект через локальный сервер (например, через [Live Server](https://marketplace.visualstudio.com/items?itemName=ritwickdey.LiveServer) для VS Code или `python3 -m http.server`).
3. Перейдите на [http://localhost:5500/](http://localhost:5500/) (или другой порт вашего сервера).

---

## 💡 Технологии

* **Three.js** (модули через importmap)
* **GLTFLoader** для загрузки glb
* **IndexedDB** (через idb.js) — хранение пользовательских моделей
* Вёрстка на CSS, без фреймворков

---

## 🖱️ Функции интерфейса

* **Список моделей:**
    каждая карточка — интерактивное 3D-превью.
* **Загрузка файлов:**
  Можно добавить свой `.glb` (через форму в хедере).
* **Детальный просмотр:**

  * Ручное вращение мышью (OrbitControls)
  * Кнопки “+” и “–” для зума
  * Кнопки “Вид спереди / Сзади / Слева / Справа” для быстрой смены ракурса
* **Корректное центрирование:**
  Модели автоматически поднимаются так, чтобы их основание совпадало с виртуальным полом.
* **Поддержка парных моделей:**
  На одной карточке могут быть сразу две модели (например, “Машина + Дерево”).

---

## ⚠️ Важно

* **Все импорты Three.js идут через importmap в head index.html и detail.html**:

  ```html
  <script type="importmap">
    {
      "imports": {
        "three": "https://unpkg.com/three@0.160.0/build/three.module.js",
        "three/examples/jsm/": "https://unpkg.com/three@0.160.0/examples/jsm/"
      }
    }
  </script>
  ```
* Все основные js-файлы подключаются с `type="module"`.
* **Файлы .glb должны лежать в папке models/**, иначе предпросмотр не появится (и будет иконка пазла).
* **Для стабильной работы открывайте через локальный сервер, не просто двойным кликом по index.html.**

---

## ✍️ Как добавить свою модель?

1. Нажмите кнопку “Выбрать файл” и загрузите свой `.glb` файл.
2. Модель появится в галерее с предпросмотром и будет храниться только в вашем браузере (IndexedDB).
3. Для просмотра просто кликните на карточку.

---

## 📝 Быстрые ответы на типовые вопросы

* **Почему модель снизу или обрезана в предпросмотре?**
  Вся геометрия центрируется по основанию, но если в самой модели mesh выше/ниже низа bounding box — поправьте экспорт в редакторе.

* **Почему не грузится предпросмотр у предустановленных моделей?**
  Убедитесь, что `.glb` действительно лежит в папке `/models/` с правильным именем.

* **Где взять больше моделей?**
  Используйте [PolyPizza (GLB Only)](https://poly.pizza/search/tree?format=glb).

---