Virtual Tour (360) Tutorial

Example

Here's the Virtual Tour (360) content we'll create in this tutorial (drag with the mouse or use navigational arrows to explore the scene):

When to use Virtual Tour (360) 

Virtual Tour (360) can be used to enrich your 360 (equirectangular) images with H5P Content. It can be used for creating virtual tours through rooms where each part of the room is explained in detail using text or images and may contain questions for the one exploring.

This tool is not limited to 360 images, you can use it also to navigate through static image scenes as well.

Step 1: Topic

We're going to make a Virtual Tour where we'll guide the viewer through the Roman Theater in Petra. Select the New content option and choose Virtual Tour (360) from the list of Content types:

The Virtual Tour (360) editor should now appear.
Add a title: "Virtual Tour Roman Theater".
The editor should look like this:

Step 2: Add a first 360 scene

We are going to add our first 360 scene now. First, we need to download a background image. This is the image we'll use in our example:

Get this image
When you open the link, click "download" in the bottom right corner and choose "Large".

To add a scene click "New scene" button. Type in the title "Scene 01 Roman Theater in Petra" and upload the background image. The scene popup should look like this:

Don't forget to add licensing info for the background image.
Click "Edit copyright" and fill in:

Title: 360 panorama from top of the Roman Theater in Petra,  Jordan
Author: Sitoo
Source: https://www.flickr.com/photos/sitoo/46957108072/in/photostream/
License: Attribution-NonComercial-NoDerivs
License Version: 2.0 Generic

Edit copyright dialog should look like:

Click "Done". You've added your first scene.
The editor should now look similar to this:

The starting camera angle is set by default. If you want to change the camera angle you can move the scene by dragging it with your mouse. Once you've set the view to the starting angle you like, press the "Set starting position" button in the bottom right corner. Now your scene will always start with this camera angle.

Step 3: Add a second 360 scene 

Same as with our first scene, click the "New scene"  button. 
This is the image we'll use for our second scene:

Get this image

When you open the link, click "download" in the bottom right corner and choose "Large". Don't forget to add licensing info for the background image.
Click "Edit copyright" and fill in:

Title: panorama_tomb_soldier
Author: Sitoo
Source: https://www.flickr.com/photos/sitoo/46284842524/
License: Attribution-NonComercial-NoDerivs
License Version: 2.0 Generic

Click "Done". You've added your second scene. 

Step 4: Add a static scene

Same as when creating 360 scenes, click the "New scene"  button.
Select "Static scene" instead of "360 scene".
Enter the title: "Petra, Jordan" and upload this background image:

Get this image

When you open the link, click "download" in the bottom right corner and choose "Large". Don't forget to add licensing info for the background image.
Click "Edit copyright" and fill in:

Title: Petra Theater
Author: Douglas Perkins
Source: https://www.flickr.com/photos/13595158@N00/286630893/
License: Attribution
License Version: 2.0 Generic

Click "Done". You've added your third scene.

Step 5: Navigate between scenes

Now we have three scenes. To navigate between scenes, click the dropdown in the bottom left corner where it says "Current scene...". The Scene selector will open and you will see all of the scenes you have created so far. Here is how it looks:

We'll explain each part of a scene selector:

		Icons above the image	This icon indicates if the scene is  static or  360.
		Green outline and green background	This is how we mark the currently selected scene (the one we are working on now)
		"Set as starting scene" button	Click here to set this scene as the starting scene for your content. The Starting scene is the first scene end user sees.
		"Go to scene" button	Click this to open the scene
		"Edit" button	Click this to edit the scene ( Background, Title, Description, etc.)
		"Delete" button	Click this to delete the scene

Step 6: Connect scenes 

As an author, you can navigate between scenes by using the scene selector. In order for users to move from scene to scene, you need to add some navigational elements. Navigational elements are created using the "Go to scene" tool, placed in the top menu. 

Let's create some navigation. Click on the scene selector and go to our 1st scene. We want to create navigation from this scene to scene #2. Click on the "Go to scene"  icon in the top menu. A dialog like this will appear:

Pick "Scene 02 Tomb Soldier" and click Done. The new navigational element will appear in the scene:

The user will use this button to go from scene #1 to scene #2. You can reposition this element by dragging it around the scene. When you click on it you'll get a context menu (like shown in the image above).

• 1st option "Go to scene" will navigate (open) the scene that the "Go to" object leads to
• 2nd option will edit the "Go to" object itself
• 3rd option will delete the "Go to" object itself

Now we want to create navigation from scene #2 to scene #1. Click on the scene selector and go to the 2nd scene.
Click on the "Go to scene"  icon in the top menu, select "Scene 01 Roman Theater in Petra" and click Done.
Now we have navigation both from scene #1 to scene #2 and vice versa. 

Tip: When you have created a "Go to" object you can double click on it and it will open the scene that it points to. This can save you some time!

 
The last navigation element we want to add is from scene #1 to scene #3 (static scene). Click on the Scene selector and pick scene #1. Click on the "Go to scene"  icon in the top menu, select "Petra-Jordan" and click Done. We've got one additional "Go to scene" element in our scene #1. It should look like this: 

Double click on the second "Go to interaction". You will navigate to the static scene. Notice that this scene has a "Back" button in the top left corner:

A static scene has an optional "Back" button and it is checked by default when you create a static scene. This is what the option looks like:

Of course, you can turn this "Back button" off and create a "Go to scene" element yourself instead.

Step 7: Add interactions 

We are going to add some interactions to our scenes now. First, we will add one image interaction to scene #2.
This is the image we will add:

Get this image

Navigate to scene #2. Click on the  icon in the top menu. A dialog will appear. Upload the image and add alternative text as shown here:

Don't forget to add licensing info for the image.
Click the "Metadata" button  and fill in:

Title: Façade of the Roman Soldier Tomb in Petra
Author: Michael Gunther
Source: https://commons.wikimedia.org/wiki/File:Roman_Soldier_Tomb_Facade_Petra_Jordan1410.jpg
License: Attribution ShareAlike (CC-BY-SA)
License Version: 3.0 Unported

Click "Done". You've added your first interaction. Drag it around and position it as shown here:



Now, we will add three interactions to our static scene (scene #3):

• text about the theatre
• video 
• image of the entrance.

Click on the scene selector and pick scene #3.

First, we will add the text interaction (Source: https://en.wikipedia.org/wiki/Petra_Theater):

The theater was built in the cultural and political apex of the Nabataean kingdom under Aretas IV (9 BC-40 AD) where large scale civic construction projects in Petra and other important Nabataean trading cities in Hijaz and the Negev took place. It is said that the theater-building activities of Herod the Great may have urged the Nabataean king to follow lead. The massive theater with its large capacity was positioned to bring the greatest number of tombs within view.

Although Roman in design, being carved out opposed to being built is characteristically distinctive Nabataean style and not a Roman manner. The floral capitals of the theater are also distinctively Nabataean artistic element. Minor alterations of the theater were made by Aretas son Malichus II and later on the Romans who re-built the exterior wall.

Click on the  icon in the top menu. A dialog will appear. Copy the text above and paste it into the dialog, it should look like this: 



Click Done. The text interaction  should show in the middle of the scene. Drag it to reposition it.

Second, we will add some video. Click on the  icon in the top menu. A dialog will appear. Add the title: "Petra, Jordan - an unusual observation on the Roman theater and Nabatean tombs around it" and the source: https://www.youtube.com/watch?v=Jlexhg-9Vf8

Click Done. The video interaction  should show on the scene. Drag it to reposition it.

Finally, we will add this image:

Get this image

Click on the  icon in the top menu and add the image as usual. Don't forget to add licensing info for the image. Click the "Metadata" button  and fill in:

Title: Façade of the Roman Soldier Tomb in Petra
Author: David Bjorgen
Source: https://en.wikipedia.org/wiki/File:Theater_Stage.jpg
License: Attribution ShareAlike (CC-BY-SA)
License Version: 2.5 Generic

Click "Done". You've added your third interaction to this scene. Drag interactions around to reposition them. You should get something like this:

Step 8: Finishing up

Save the node/article to view your finished Virtual Tour (360).
You should now have the same result as the example on top of the page.  
Feel free to leave any comments or suggestions on how to improve this tutorial.