360° Campus Tour

by kampeeli28 in Design > Websites

17 Views, 0 Favorites, 0 Comments

360° Campus Tour

The_Seven_Hills_School_logo_2017.svg.png
Screenshot 2026-05-12 140151.png
Screenshot 2026-05-12 141710.png
Screenshot 2026-05-12 135518.png

As the final capstone project of the 2025-2026 Upper School Human Tech Interactions class, students were charged with finding a meaningful means to improve the Seven Hills community using technology. Having identified the previous issues facing our community, I set out to create a 360° self-guided campus tour that would allow various demographics to virtually visit and familiarize themselves with the Hillsdale campus.

Supplies

Screenshot 2026-05-12 140151.png

YI 360° Camera, iPhone, Computer with Internet Access

Capture 360° Images

Screenshot 2026-05-12 135518.png
Screenshot 2026-05-12 140151.png

The first step of the project was to capture the raw 360° images. We utilized a YI 360 VR camera (model: YVR.1017).

We were able to easily link the camera to our iPhones using the YI 360 app. To do so, open the app and follow the on screen prompts to pair your camera.

Then, capture images by clicking the main circle button. It is important to consider the following when taking images:

  1. Consider the weather (and lighting). – Especially for outdoor images, it is important to choose a day with good weather so that your images are visually pleasing and favorably represent your spaces.
  2. Battery life. – Our camera specifically had struggles with maintaining its battery. Plan ahead and charge all of your batteries. It is a good idea to be prepared with multiple batteries.
  3. Image location. – Use a tripod to take the images. Keep in mind that the photographer should most likely get out of view of the camera to preserve the image. Or, be intentional with being in the frame of the image and make it interesting!

Choose a Software

Screenshot 2026-05-12 143151.png

We evaluated many software programs for the technological “backend” of the tour. Ultimately, we settled on the CloudPano software because it combines several important factors. It allows for the 1st person navigable perspective while maintaining the ability to click through to any location via a scroll bar at the bottom of the screen. It is also financially competitive with other software products and has a user-friendly user interface. Additionally, the software allows for the integration of a hideable floorplan onto the main tour interface.

Upload & Stitch Photos

Screenshot 2026-05-12 141710.png

Once entering the software (and upgrading to the Pro Version), click “New Project”. Once you enter your new project, you will see a blue button prompting you to add scenes. Click this button then upload your images, which you can simply download straight from the YI 360 camera app.

Once you insert images, you can link between them by clicking the “Link Hotspot” button and selecting the image you would like to link to. If you have the Pro Version of the software, you can also set an initial view spending on where the viewer was linked from (allowing for logical complex webs of images that preserve logical lines of sight). Repeat this process for all of your images.

View my tour at the following link: https://app.cloudpano.com/tours/YwQ5ef9qi

Link to Nico’s HTML Site

Screenshot 2026-05-12 143456.png

The last step was to link the CloudPano tour to an HTML site with a hot mapped image and additional information to provide a home page for users. Follow Nico’s instructable for details on this process that involves simple HTML linking.

View our final HTML site at the following link: https://mayornic26.github.io/HumanTechPresent/