SMVITM Virtual Campus Tour

Overview

SMVITM Virtual Campus Tour is an immersive, interactive 360-degree panoramic web application that enables prospective students, parents, and visitors to explore the Sharnbasva Manjunath Vaidya Institute of Technology and Management campus from anywhere in the world. Built with cutting-edge web technologies, this tour offers a seamless navigation experience across 29 meticulously captured campus locations.

Features

Interactive Panoramic Viewing

• 360-Degree Spherical Navigation - Drag, swipe, or use arrow keys to explore every angle
• 29 Campus Locations - Comprehensive coverage of academic buildings, facilities, and outdoor spaces
• Smooth Scene Transitions - Context-aware camera positioning for natural navigation flow
• Responsive Design - Adaptive UI that works seamlessly on desktop, tablet, and mobile (breakpoint: 500px)

Navigation Features

• Interactive Hotspots - Click to move between locations or view information
• Auto-Rotate Mode - Automatic panorama spinning for passive viewing
• Fullscreen Support - Immersive full-window viewing experience
• Scene List Panel - Quick access to all 29 locations

Installation

Quick Start

1. Clone the Repository

git clone https://github.com/qfoxagency/smvitm-campus-003VMAP25.git
cd smvitm-campus-003VMAP25

2. Choose Your Launch Method

Option A: Direct Browser Access (Simplest)

# Simply double-click index.html or drag it into your browser
# Note: Some features may require a web server due to CORS policies

Option B: Local Web Server (Recommended)

# Using Python 3
python -m http.server 8000

# Using Node.js (http-server)
npx http-server -p 8000

# Using PHP
php -S localhost:8000

# Using Live Server (VS Code Extension)
# Right-click index.html → "Open with Live Server"

3. Access the Application

http://localhost:8000

Project Structure

map/
│
├── index.html                   # Main entry point & application shell
├── index.js                     # Core application logic (595 lines)
├── data.js                      # Scene configuration & hotspot 
├── style.css                    # Global styles & responsive 
│
├── tiles/                       # Panoramic image tiles (37 MB)
│   ├── 0-inside1/                  # Scene: Flag Stand (Inside)
│   │   ├── preview.jpg                # Thumbnail preview
│   │   ├── 1/                         # 256px resolution level
│   │   │   ├── {z}/{f}/{y}/{x}.jpg   # Tiled cube faces
│   │   │   └── [faces: b,d,f,l,r,u]  # Back, Down, Front, Left, Right, Up
│   │   └── 2/                         # 512-1024px resolution level
│   ├── 1-inside2/                  # Scene: Admin Block (Inside)
│   ├── 2-left1/                    # Scene: Electronics Dept
│   ├── ... (26 more scenes)
│   └── 28-outside20/               # Scene: Outdoor viewpoint
│
├── vendor/                      # Third-party libraries
│   ├── marzipano.js                # Panoramic viewer engine
│   ├── screenfull.min.js           # Fullscreen API wrapper
│   ├── bowser.min.js               # Browser detection
│   └── reset.min.css               # CSS reset
│
├── img/                         # UI assets (14 PNG files)
│   ├── play.png, pause.png         # Auto-rotate controls
│   ├── fullscreen.png, windowed.png
│   ├── expand.png, collapse.png
│   ├── up.png, down.png, left.png, right.png
│   ├── link.png, info.png, close.png
│   └── plus.png, minus.png
│
├── favicon/                     # PWA and social sharing assets
│   ├── favicon.ico                 # Standard favicon
│   ├── favicon.svg                 # SVG favicon
│   ├── favicon-96x96.png           # PNG favicon
│   ├── apple-touch-icon.png        # iOS home screen icon
│   ├── web-app-manifest-192x192.png
│   ├── web-app-manifest-512x512.png
│   ├── site.webmanifest            # PWA manifest
│   └── college.jpg                 # Social share image 
│
└── Configuration Files
    ├── .git/                       # Git version control
    ├── .claude/                    # Claude Code settings
    └── tiles.zip                   # Compressed tiles archive 

---

Technology Stack

Core Libraries

Library	Purpose	Version
Marzipano.js	360° panoramic viewer engine with cubemap support	Latest
Screenfull.js	Cross-browser fullscreen API wrapper	Latest
Bowser	Browser detection for compatibility handling	Latest
Font Awesome	Icon library (CDN)	6.5.1

Web Technologies

• HTML5 - Semantic markup with Open Graph and Twitter Card meta tags
• CSS3 - Advanced styling with flexbox, backdrop filters, CSS transforms (1,209 lines)
• Vanilla JavaScript (ES5+) - No framework dependencies, pure JavaScript (595 lines)
• Progressive Web App Features - Manifest file and favicons for PWA support