Интерактивная веб-галерея для предпросмотра 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 для VS Code или python3 -m http.server).
3. Перейдите на http://localhost:5500/ (или другой порт вашего сервера).

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

• Список моделей: каждая карточка — интерактивное 3D-превью.

• Загрузка файлов: Можно добавить свой .glb (через форму в хедере).

• Детальный просмотр:

  • Ручное вращение мышью (OrbitControls)
  • Кнопки “+” и “–” для зума
  • Кнопки “Вид спереди / Сзади / Слева / Справа” для быстрой смены ракурса

• Корректное центрирование: Модели автоматически поднимаются так, чтобы их основание совпадало с виртуальным полом.

• Поддержка парных моделей: На одной карточке могут быть сразу две модели (например, “Машина + Дерево”).

• Все импорты Three.js идут через importmap в head index.html и detail.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).