🎙️ MIC_LAB.v7 // High-Fidelity 3D Configurator

---

🌟 Обзор проекта (Overview)

MIC_LAB — это интерактивная 3D-лаборатория для визуализации и кастомизации профессионального аудио-оборудования. Проект объединяет современный веб-интерфейс с мощностями графического движка Three.js, позволяя пользователям взаимодействовать с высокополигональными моделями в реальном времени.

Key Goal: Продемонстрировать навыки работы с библиотеками экосистемы React Three Fiber, оптимизацию рендеринга тяжелых мешей и создание отзывчивого UI, интегрированного в 3D-пространство.

---

⚡ Особенности (Key Features)

• PBR Rendering: Реалистичное отображение материалов микрофонов с использованием карт окружения (Environment Maps) и мягких теней (ContactShadows).
• Zero-Clipping Camera: Прецизионная настройка OrbitControls с жесткими лимитами на приближение, исключающая "проваливание" камеры внутрь моделей.
• Hybrid UI Overlay: Интеллектуальное сочетание HTML/Tailwind элементов управления и 3D-текста внутри сцены.
• Smart Asset Logic: Динамическая система заглушек (Placeholders). Если модель находится в разработке, система автоматически рендерит абстрактный меш с визуальным уведомлением.
• Glassmorphism Design: Интерфейс в стиле "Hardware Lab" с использованием эффектов матового стекла и сетчатого бэкграунда.

---

🛠 Технологический стек (Tech Stack)

Слой	Технологии
Framework	Next.js 14+ (App Router)
3D Engine	Three.js / @react-three/fiber
Helpers	@react-three/drei (Environment, Float, ContactShadows)
Styling	Tailwind CSS (Grid Layout, Custom Utilities)
Animation	Framer Motion (Transitions & UI States)

---

🚀 Быстрый старт (Local Setup)

1. Клонируйте репозиторий:

   git clone [https://github.com/vash-nick/mic-lab.git](https://github.com/vash-nick/mic-lab.git)

2. Установите зависимости:

   npm install

3. Добавьте 3D модели: Поместите ваши .glb файлы в директорию public/models/. (В текущей сборке используется condensator.glb).

4. Запустите сервер разработки:

   npm run dev

---

📂 Структура проекта

├── app/
│   ├── layout.tsx     # Глобальные метаданные и настройки шрифтов
│   ├── page.tsx       # Ядро приложения: Canvas, 3D логика и UI-слои
│   └── globals.css    # Кастомные стили (Grid, Glass-panels)
├── public/
│   └── models/        # Локальное хранилище 3D ассетов (GLB/GLTF)
└── next.config.mjs    # Конфигурация сборки