Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/mahmud-kandawala/sacred-heart-university-virtual-classroom-tour-repository

This repository showcases a virtual tour of a Sacred Heart University classroom using Matterport technology. It includes an interactive 3D model embedded in a single HTML page, demonstrating responsive web design, smooth navigation, and a professional layout to provide an immersive user experience.
https://github.com/mahmud-kandawala/sacred-heart-university-virtual-classroom-tour-repository

360-degree 3d-models css digital-image-processing html javascript website

Last synced: 5 days ago
JSON representation

This repository showcases a virtual tour of a Sacred Heart University classroom using Matterport technology. It includes an interactive 3D model embedded in a single HTML page, demonstrating responsive web design, smooth navigation, and a professional layout to provide an immersive user experience.

Awesome Lists containing this project

README 

        
# Sacred Heart University Virtual Classroom Tour



## Table of Contents

- [Motivation](#motivation)

- [Project Purpose](#project-purpose)

- [Project Overview](#project-overview)

  - [What It Does](#what-it-does)

  - [Data Flow](#data-flow)

  - [Prioritization](#prioritization)

- [Skills and Methodologies](#skills-and-methodologies)

- [Notable Features](#notable-features)

- [Lessons Learned](#lessons-learned)

- [Problems Faced and Solutions](#problems-faced-and-solutions)

- [Image](#image)

- [Links](#links)

- [Run](#run)

- [Conclusion](#conclusion)



## Motivation



The primary motivation for this project was to prepare for an upcoming task involving Igor Sikorsky's office located at Sikorsky. The goal was to create a virtual tour similar to what would be required for the Sikorsky project, and to test the integration and formatting of a virtual tour on a website. This exercise not only helps in understanding the requirements and potential challenges but also serves to showcase my ability to handle such projects in a professional and efficient manner.



## Project Purpose



This project is designed to create a virtual tour of a classroom at Sacred Heart University using Matterport technology. The purpose is to provide an immersive, interactive experience that allows users to navigate through the classroom space as if they were physically present. This kind of virtual tour can be beneficial for prospective students, faculty members, and other stakeholders to get a feel of the campus facilities remotely.



## Project Overview



### What It Does



- Provides a 3D virtual tour of a classroom at Sacred Heart University.

- Allows users to walk through the classroom, zoom in on details, and explore the space from different angles.

- Presents an immersive experience that mimics a real-life visit to the classroom.



### Data Flow



1) **Capture and Upload**: The classroom was captured using a Matterport camera and uploaded to the Matterport platform.

2) **Processing**: Matterport processes the 3D scan to create a navigable 3D model.

3) **Embedding**: The 3D model is embedded into a single HTML page using an iframe.

4) **User Interaction**: Users interact with the 3D model directly on the webpage, navigating through the classroom using Matterport's built-in controls.



### Prioritization



#### Tackled:

- Creating a high-quality 3D scan of the classroom.

- Embedding the Matterport model into a single HTML page.

- Ensuring the webpage is visually appealing and user-friendly.

- Testing the webpage for responsiveness and performance.



#### Not Tackled:

- Extensive backend integration, as the focus was on frontend presentation.

- Multiple pages or complex file structures, as the project scope was limited to a single-page demonstration.



## Skills and Methodologies



This project showcases various skills and methodologies, including:

- **Web Development**: Creating a responsive and visually appealing HTML, CSS, and Javascript layout.

- **3D Modeling**: Utilizing Matterport technology to capture and process 3D scans.

- **UI/UX Design**: Ensuring a seamless and intuitive user experience for navigating the virtual tour.

- **Project Management**: Prioritizing tasks and managing the project scope effectively.



## Notable Features



- **Interactive 3D Tour**: Users can explore the classroom in 3D, providing an engaging and realistic experience.

- **Responsive Design**: The webpage is fully responsive, ensuring optimal viewing on various devices.

- **Professional Presentation**: The layout and design reflect a high level of professionalism, suitable for academic and corporate environments.

- **Smooth Scroll and Navigation**: Enhanced navigation links with smooth scrolling behavior.

- **Loading Animation**: A loading spinner displays while the content is being loaded.

- **Tooltips for Buttons**: Added tooltips to buttons for additional information on hover.

- **Scroll to Top Button**: A button that allows users to quickly return to the top of the page



## Lessons Learned



- **Integration Challenges**: Embedding a Matterport model into a webpage requires careful consideration of iframe attributes and responsive design techniques.

- **User Experience**: Providing clear instructions and intuitive controls is crucial for enhancing user interaction with the virtual tour.

- **Performance Optimization**: Ensuring the 3D model loads efficiently and the webpage performs well across different devices and browsers.



## Problems Faced and Solutions



### Problem: Initial Embedding Issues

- **Issue**: The Matterport model was not displaying correctly within the iframe.

- **Solution**: Adjusted the iframe settings and ensured the correct model ID was used.



### Problem: Responsiveness

- **Issue**: The webpage was not responsive on smaller devices.

- **Solution**: Implemented responsive design principles using CSS media queries to ensure the layout adapts to different screen sizes.



### Problem: User Interaction

- **Issue**: Users found it challenging to navigate the 3D model initially.

- **Solution**: Added clear instructions and ensured the Matterport controls were easily accessible and intuitive.



## Image



![Welcome Section](img/home.png)

![Virtual Tour Section](img/vt.png)

![Contact Section](img/contact.png)



## Links



- [Matterport 3D Model](https://my.matterport.com/show/?m=PTuY9kvVDUc)



## Run



To run the project:

1) Download the HTML file.

2) Open the HTML file in a web browser.

3) The website will display, allowing you to explore the virtual classroom tour.



## Conclusion



This project, though focused on a single HTML, CSS, and Javascript page, demonstrates the ability to create a professional and immersive virtual tour experience. It highlights the importance of planning, user experience design, and technical skills in web development and 3D modeling. This exercise has been invaluable in preparing for more complex projects, such as the anticipated task for Igor Sikorsky's office, and showcases the capability to handle similar challenges in a professional setting.