UMS Virtual Tour

An interactive AR/VR web experience showcasing the UMS Pink Mosque at Universiti Malaysia Sabah. Built as part of the "UMS Tourism Web System" Final Year Project.

Features

• Augmented Reality (AR): View a 3D model of the UMS Pink Mosque overlaid onto the real world using a Hiro marker and your device's camera.
• Virtual Reality (VR): Explore a 360-degree panoramic tour of the mosque across 6 scenes with gaze-based navigation, infographic overlays, and background audio.
• Responsive Landing Page: Introduction to AR/VR with navigation to both experiences.

Tech Stack

Technology	Purpose
A-Frame 1.2.0 / 1.5.0	WebXR framework for AR and VR scenes
AR.js	Marker-based AR tracking (Hiro marker)
AOS 2.3.4	Scroll animations on the landing page
HTML5 / CSS3 / Vanilla JS

Project Structure

umsvirtualtour/
├── index.html                  Landing page
├── pages/
│   ├── ar-mosque.html          AR experience (marker-based 3D model)
│   ├── vr-tour.html            VR 360-degree panoramic tour
│   └── ar-guide.html           Instructions for using the AR feature
├── css/
│   └── main.css                Global stylesheet
├── js/
│   ├── ar-gesture-handler.js   Mouse/touch rotation for the AR model
│   └── vr-scene-manager.js     Scene transitions, gaze nav, infographics
├── assets/
│   ├── images/                 Hero image, Hiro marker, profile photo
│   ├── panoramas/              360-degree panorama images (6 scenes)
│   ├── infographics/           Informational overlays for VR scenes
│   ├── videos/                 Demo video and 360-degree mosque video
│   ├── audio/                  Background music for VR tour
│   └── models/                 3D GLB model of the mosque
├── .gitattributes              Git LFS tracking rules
├── .gitignore
└── README.md

Getting Started

Prerequisites

• A modern web browser with WebGL support (Chrome, Firefox, Edge, Safari)
• For the AR experience: a device with a camera
• A local HTTP server (required for A-Frame assets to load correctly)

Running Locally

1. Clone the repository:

   git clone https://github.com/<your-username>/umsvirtualtour.git
   cd umsvirtualtour

2. Install Git LFS and pull large files:

   git lfs install
   git lfs pull

3. Start a local server:

   # Using Python 3
   python3 -m http.server 8000
   
   # Or using Node.js
   npx serve .

4. Open http://localhost:8000 in your browser.

How to Use

AR Experience

1. Go to the AR Guide page from the landing page.
2. Display the Hiro marker on a second device (or print it).
3. Point your camera at the marker to see the 3D mosque model.
4. Drag to rotate the model.

VR Tour

1. Click "VR Mosque" from the landing page.
2. Look around by dragging or moving your device.
3. Gaze at the Next/Back buttons for 3 seconds to navigate between scenes.
4. Infographic panels appear automatically at each scene.

Author

Syafiq Ahmad Final Year Project -- Universiti Malaysia Sabah