[TUTORIAL] CREATE YOUR FIRST VR EXPERIENCE WITH SPEEDERNET SPHERE – STEP BY STEP GUIDE

This tutorial will guide you to create your first VR experience with Speedernet Sphere: a virtual tour, which consists in going from one scene(panorama) to another.

To create your first VR experience you will need

The ingredients:

  • 2 panoramas (360° images)
  • 1 icon

The recipe:

  • Create 2 scenes
  • Add some elements to the scenes
  • Define the properties and implications of the elements
  • Enjoy

It all takes place in 2 screens: Home(Project View) and Scene(Composition View).

Home(Project View)

Import your media

To save time, start by importing all your media to the “Media Manager”. Add your media by type.

Speedernet Sphere VR media manager
Speedernet Sphere VR media manager

For this experience:

  • Display the “Media Manager”
  • Click “Panoramas” and import them
  • Click “Images” and import the icon

 

Add a Scene

In 2 steps:

  • Click “Add a Scene”(1)
  • Click “Add media” (2)
    • Browse the panoramas accordingly (3)
Speedernet Sphere VR Scene
Speedernet Sphere VR Scene

For this experience:

  • Create 2 scenes using the imported panoramas.
  • Name the scenes to identify them(4).
  • Enter the first scene by clicking this button(5).

 

Scene(Composition View)

Use the “Composition View” to enrich the panorama and add interactivity. For this tutorial a click on the icon takes the user to the other scene. To do so:

  • Add an element
  • Define the element’s properties
  • Adjust its position
  • Add interactivity

 

Add an element

An element is a container for a specific type of media.

In 3 steps:

  • Click to display the list of elements (1)
  • Drag and drop the element to the scene(2)
    An image representing the type of element is added to the scene (3). The elements panel adds a line having quick access icons to the element’s properties(4).
  • Rename the element by double clicking on its default name(5)
Speedernet Sphere VR insert element
Speedernet Sphere VR insert element

For this experience:

  • Add an image element
  • Rename it as “POI”

 

Define an element’s properties

Now that the element(container) is set, define its properties: the associated media(the content) and whether or not it is visible and interactive.

In 3 steps:

  • Open the properties window(1)
  • Define aspect
    • Add the media (2)
  • Define state
    • Visible (3)
    • Interactive (4)
Speedernet Sphere VR element properties
Speedernet Sphere VR element properties

For this experience:

  • Open the properties window
  • Click “Add an image”
  • Browse the icon in “Existing Media”
  • Set “Visibility” and “Interactive” to “Yes”

 

The element is replaced on the scene with the selected aspect.

 

 

Position an element

With the real aspect on the scene, the element can be positioned precisely.

In 3 steps:

  • Enable the “spherical movement” mode (1)
  • Move the scene background with your mouse to take the element close to the desired location
  • Adjust “Position”(2), “Rotation”(3), and “Scale”(4) of your element using the dedicated buttons and the XYZ lines on the element(5)
Speedernet Sphere VR 360 position
Speedernet Sphere VR 360 position

For this experience:

  • Enable the “spherical movement” mode
  • Move the panorama to take the element close to the spot to go to the other scene
  • Adjust the element’s position, rotation and/or scale to make it blend into the background

 

Define an element’s implications

Use the implications to add interactivity.

In 4 steps:

  • Open the implications window(1)
  • Add an implication(2)
  • Select the condition (3)
  • Select the consequence (4)

 

Speedernet Sphere VR 360 add interactivity: implications
Speedernet Sphere VR 360 add interactivity: implications

For this experience:

  • Open the implications window
  • Complete the “If” condition with “click”
  • Complete the “Then” consequence with “Go to scene” and select the name of the other scene

Try the experience

Let’s give it a try!

In 2 steps:

  • Click “File”→ “Test the experience”
  • Click this icon 

 

It’s your turn

The challenge, should you decide to accept it, is to add an element to the second scene, allowing the user to come back to the first one.

 

Let us know how did your first experience go, we’ll be happy to hear from you.

If you have any questions or comments, feel free to reach out!

 

Team Sphere

Leave a comment

This site uses Akismet to reduce spam. Learn how your comment data is processed.