Перейти до змісту
Шукаю роботу
Кейс

ПрацюєУ розробціОстанній коміт вер. 2026

Campus Navigate 3D

Інтерактивна 3D-мапа університетського кампусу з екскурсіями.

Відкрити сайт(відкривається в новій вкладці)Код: фронтенд(відкривається в новій вкладці)Код: бекенд(відкривається в новій вкладці)

Кейс · Завдання

Кампус складно уявити за пласкою мапою. Завдання — вебзастосунок, де будь-хто може облетіти справжній кампус у 3D: пройти екскурсію ключовими місцями з описом поруч або літати вільно, — а кожна екскурсія і сама модель редагуються з адмін-панелі.

Що я зробив

  • Фронтенд на React і Three.js: анімовані маршрути камери, вільна камера в межах моделі та панелі локацій.
  • Оптимізовано під велику 3D-модель: glTF зі стисненням Draco та екран завантаження зі справжнім прогресом.
  • Django REST API з адмін-панеллю для локацій, маршрутів польоту та 3D-моделей.
Моя роль
Fullstack-розробник: фронтенд і бекенд
Команда
3D-модель кампусу — Максим Сидоренко, 3D-моделер.
Стек
  • React
  • Three.js
  • Vite
  • Django
  • DRF
  • PostgreSQL
  • Docker

Як усе поєднано

Намальовано за публічними репозиторіями. Контур показує, хто створив кожну частину: авторство — теж частина факту.

  • 3D-мапаReact · Three.js — Зробив я
  • Модель кампусу.glb · Draco — Зробив учасник команди
  • REST APIDjango · DRF — Зробив я
  • Адмін-панельDjango admin — Зробив я
  • База данихPostgreSQL — Зробив я

Те саме, крок за кроком

  1. 3D-мапа (React · Three.js) передає REST API (Django · DRF), в обидва бокилокації · активна модель
  2. Модель кампусу (.glb · Draco) до Адмін-панель (Django admin)завантаження версії
  3. REST API (Django · DRF) до База даних (PostgreSQL)маршрути польоту
  4. Адмін-панель (Django admin) до База даних (PostgreSQL)точки та моделі
Зробив яЗробив учасник команди

Ключові рішення

Рішення, що сформували систему, і чому їх ухвалено саме так.

  1. D1

    Екскурсії — це дані, а не код

    Кожна локація зберігає, як поводиться камера: статичний кадр, політ через упорядковані точки або панорама навколо — зі швидкістю, напрямком погляду й нахилом. Нова зупинка екскурсії — це форма в Django admin, а не реліз.

  2. D2

    Кожен політ починається там, де ви зараз

    Перед початком екскурсії камера за дві секунди плавно переходить із поточного положення й напрямку до першої точки. Перемикання локацій посеред польоту ніколи не стрибає, тож людина не втрачає орієнтацію.

  3. D3

    Модель — це контент із версіями

    Модель кампусу — завантажений .glb із версією; коли одну позначають активною, решта вимикаються. Фронтенд запитує активну модель в API, тож краща модель виходить без змін у фронтенді.

  4. D4

    Важка модель, чесний прогрес

    Модель передається як glTF зі стисненням Draco і розпаковується в браузері; екран завантаження показує справжній відсоток замість спінера. Вільний політ обмежено межами моделі, тож ніхто не загубиться в порожнечі.

Результат

  • Працює на campus.zebaro.dev: екскурсії згруповано в розділи «Головна», «Важливі місця» та «Кабінети», плюс вільний політ.
  • Локації, точки польоту й версії моделі редагуються в Django admin; мапа підхоплює їх під час наступного завантаження.
  • Фронтенд і бекенд працюють у Docker, кожен у власному публічному репозиторії.