Creating a 360° Virtual Tour in H5P

Follow these steps to create a 360° Virtual Site Visit. Capturing 360° imagery will require the use of specialised cameras, which are available to all ABP staff and students via the ABP Loans Desk.

H5P allows you to create rich interactive content easily and quickly. With this method, you will be able to overlay key information onto your 360° images via the use of hotspots. Staff can create a H5P account within the UoM domain and synchronise it to Canvas. For instructions on how to do this see Learning Environment's H5P guides.

You can test a live example of this method within the ABP BEL+T Canvas Community. Click here to access. If you have not yet enrolled into the ABP BEL+T Canvas Community click here first.

When is it best to use 360° Virtual Tours in H5P?

  • When you have captured your site in image format using 360° photographic equipment.
  • When you would like to overlay information on your 360° images (i.e. detailed images, links, videos, text).

Considerations to keep in mind:

1. In order to capture a site yourself, you will need specialised 360° equipment. The ABP Loans desk has a range of 360° equipment available for ABP staff and students to borrow. BEL+T recommends using the InstaPro2 Camera, as it captures the highest-quality 360º images and videos. BEL+T has produced a video guide on how to use the InstaPro2 camera (see below).

InstaPro2 Video Guide

2. Navigation can be difficult to customize in H5P and can be disorienting for the user. To avoid this problem, we recommend creating a virtual tour for each individual space within your site.

Creating Virtual Tour (360°) content in H5P

  1. Login to your Unimelb H5P account using the following instructions.
  2. To create new content, click the Add Content button.
  3. Select Virtual Tour (360°) from the displayed list, or type "Virtual" in the search bar.
  4. Click and read the details, then click Use once you are ready to implement.

Creating scenes and images

  1. To create a new scene, click the 'New Scene' button found below the display window.
  2. Select the appropriate image type (static or 360°) and fill in the details.
  3. Click on the Add button under 'Scene Background'. Locate the image from the file directory of your local desktop.

Adding 360°Images

360° images can allow for complete 360° views of individual scenes.360° images can allow for full-perspective views of individual scenes.

Adding Static Images

Static images can work well when you need to show maps, aerial images, or close-up details of images.

Editing a scene

Once uploaded, images can be cropped or rotated to suit the content. Only static images should be cropped, as cropping could affect the stitching of 360° images.

  1. Choose a scene to edit from the drop-down menu found below the display window. Hover over the scene and click the 'Edit' icon
  2. Click the 'Edit image' button below the image thumbnail
  3. Crop or rotate the image by clicking the icons in the Edit Image toolbar > Click ‘Save’ when you are happy with the edits.
  4. Click 'Done' to apply the edits.

Adding hotspots

Hotspots are clickable icons or elements that you can integrate into a scene to make it interactive.

Location hotspots allow users to portal to other scenes within the workspace.

 

Text hotspots display important information and details as text strings.

 

Image hotspots display images from your local computer and can be useful for exposing key visual details.

 

Sound allows you to embed audio recordings.

 

Video hotspots enable video playback through either uploaded media files or external links.

 

Summary questionnaires assess user comprehension.

 

Single-choice questionnaires are a multiple-choice selection that responds to an overarching question.

  1. To add a hotspot to a scene, click the desired icon from the toolbar (see image above).
  2. Follow the prompts and fill out any necessary information, then click 'Done'.
  3. A hotspot icon will appear on the image. Click and drag the icon to place it where you would like it to appear within the interactive scene.
  4. Click 'Save'.


Location hotspots enable quick access to different scenes within a workspace. This tool is useful in creating gateways to and from scenes, thereby acting as an exploration tool. This can be used in various ways to improve navigation and user experience.

Combine Static and 360° Images

Combining static images, such as aerial shots from Google Maps, and 360° images creates a 'site map' feel in which important information can be overlayed. The use of aerial images also provides spatial orientation across the site, revealing how 360° images relate to one another.

1. Import a static aerial image from Google Maps.
2. Create a new scene and import a 360° image (see above for how to import 360° images) 
3. Go to the aerial image scene and click on the location hotspot.
4. Select the 360° image scene and click ‘Done’.

Site walkthrough

The location tool can also be used to weave together multiple 360° images to create a 'walking' experience.

1. Upload a 360° image scene.
2. Click on the location hotspot and import a new 360° scene. 
3. Locate the newly added hotspot in the scene by clicking and dragging the icon. 
4. Click on the hotspot icon and 'Go to scene'.
5. Create a new hotspot in the new scene to link back to the previous scene (repeat 2-4).

Wayfinding

The look of the location hotspot icon cannot be customised. This can create an issue when you want to differentiate certain wayfinding elements, such as a 'return to aerial view' icon. Workarounds include adding a label to some hotspots; or using photo-editing software, e.g. Photoshop, to add additional elements, such as a map or label. To edit your image;

1. Insert the 360° image into photo-editing software, e.g. Photoshop.
2. Create the identifying element that will help explain your location hotspot, such as a text label. 
3. Export the image as a .png
4. Upload the new 360° image with the detailed icons as a new scene. 
5. Add location markers where applicable to the scene.


Embedding H5P to Canvas

Once you have created a 360° Virtual Tour using H5P, it is possible to embed it into Canvas pages.

  1. Navigate to your subject's Canvas site.
  2. Create a new page or find the page on which you would like to embed the interactive H5P scene. Click ‘edit’ to edit the page.
  3. Within the Rich Text Editor toolbar, click the 'apps' icon.

4. Select the H5P app, then select the content you would like to embed.
5. Save your page edits. You can now interact with the H5P content within the Canvas page.

360° images can allow for full-perspective views of individual scenes.