Skip to content
Open to work
Case study

LiveIn developmentLast commit Sep 2026

Campus Navigate 3D

An interactive 3D map of a university campus with guided tours.

Open live site(opens in a new tab)Frontend source(opens in a new tab)Backend source(opens in a new tab)

Case study · The brief

A campus is hard to picture from a flat map. The job: a web app where anyone can fly over the real campus in 3D — follow a guided tour of key places with the details alongside, or fly freely — while every tour and the model itself stay editable from an admin panel.

What I built

  • React and Three.js frontend with animated camera routes, bounded free-camera controls and location panels.
  • Optimised for a large 3D model: Draco-compressed glTF and a loading screen with real progress.
  • Django REST API with an admin panel for locations, flight paths and 3D models.
My role
Fullstack developer: frontend and backend
Team
The 3D model of the campus by Maksym Sydorenko, 3D modeler.
Stack
  • React
  • Three.js
  • Vite
  • Django
  • DRF
  • PostgreSQL
  • Docker

How it fits together

Drawn from the public repositories. The outline shows who built each part — credit is part of the fact.

  • 3D mapReact · Three.js — Built by me
  • Campus model.glb · Draco — Built by a teammate
  • REST APIDjango · DRF — Built by me
  • Admin panelDjango admin — Built by me
  • DatabasePostgreSQL — Built by me

The same, step by step

  1. 3D map (React · Three.js) with REST API (Django · DRF), both wayslocations · active model
  2. Campus model (.glb · Draco) to Admin panel (Django admin)versioned upload
  3. REST API (Django · DRF) to Database (PostgreSQL)flight paths
  4. Admin panel (Django admin) to Database (PostgreSQL)edit points and models
Built by meBuilt by a teammate

Key decisions

The calls that shaped the system, and why they were made.

  1. D1

    Tours are data, not code

    Each location stores how the camera behaves there: a still frame, a flight through ordered points, or a panorama around it — with speed, view direction and pitch. A new tour stop is a form in the Django admin, not a release.

  2. D2

    Every flight starts where you are

    Before a tour begins, the camera eases from its current position and direction to the first point over two seconds. Switching locations mid-flight never jumps, so people keep their bearings.

  3. D3

    The model is versioned content

    The campus model is an uploaded .glb with a version; marking one active retires the rest. The frontend asks the API for the active model, so a better model ships without touching the frontend.

  4. D4

    Heavy model, honest progress

    The model travels as Draco-compressed glTF and is decoded in the browser; the loading screen shows the real percentage instead of a spinner. Free flight is bounded to the model, so nobody gets lost in empty space.

Outcome

  • Live at campus.zebaro.dev: tours grouped as Main, Important places and Rooms, plus free flight.
  • Locations, flight points and model versions are edited in the Django admin; the map picks them up on the next load.
  • Frontend and backend run in Docker, each in its own public repository.