Get webXR.tools
Updated on February 22, 2023

Docy Child

Multi-Scene Experiences

Estimated reading: 5 minutes

Summary: In this guide, use the WebXR.tools 360 Studio to build a multi-scene virtual space and use navigational hotspots to enable users to move through the experience.

WebXR.tools 360 studio allows you to create immersive, branded, discovery-driven multi-scene virtual experiences. The term scene originally comes from 3D technology and is defined as:

“A grouping of objects placed in an interior or exterior environment that forms a meaningful unit, such as an architectural block, an office interior, or a city setting.”

When building 360 experiences a scene is a combination of a rendered 3D image  and a collection of interactive elements. A multi-scene 360 experience adds navigational elements to allow users to move between 360 scenes.

In this guide, we’ll use the WebXR.tools 360 Studio to build a multi-scene virtual space and use navigational hotspots to enable users to move through the experience.

Prerequisites

Project Setup

In the WebXR.tools dashboard, click the Create New Project button, fill in the Project Name and select the 360 Project Type.

Create 360 project

When the 360 editor loads, you will notice three distinct sections, The left panel containing the list of scenes, the center panel containing a preview of the current scene, and a right panel with the various interactive hotspots that we can add into the scene.

webXR.tools 360 Studio default scene.

Add New Scenes

To customize the scenes within your virtual experience, click the + button in the left side panel. This will launch the Add new scene panel. Name the scene, select Image as your resource type, and click the 📁 icon to upload your image. Repeat these steps for each additional Scene.

Navigating between Scenes

Now that we have our scenes defined, there are two ways we can allow users to navigate between scenes: using the navigation icon in the lower right corner of the screen, or using navigational hotspots.

Navigation Menu

The navigation icon and menu are automatically generated. To customize or disable the navigation icon, click the icon to display the Project Icon Settings.

Navigation Menu Icon

The order of the scenes in the menu is based on the order of the scenes in the left panel.

Multi-scene - Navigational Menu

Navigational Hotspots

Navigational Hotspots allow you to define how users navigate by tapping icons overlaid on the 360 render. There are three types of navigational hotspots:

  • Got To Scene statically links to a specific scene
  • Next Scene dynamically links to whichever scene is next in the scene order
    (last scene links to first scene)
  • Previous Scene dynamically links to whichever scene is previous in the scene order
    (first scene links to last scene).

To add the first hotspot, click the Go To Scene hotspot button in the right panel, click on the scene to add your hotspot, and in the right panel set the Target Scene to Exterior.

Entry Scene - Go To Scene Hotspot

Next, add a Next Scene hotspot to link the Entry with the Dining Room which is next scene in the list.

Entry Scene oriented towards next scene hotspot

The Next Scene hotspot has an animation applied to act as a visual cue for users to move along a specific path. This enables you to create virtual spaces that give users the freedom to explore but also give visual cues to the recommended path.

We’ll repeat this process for the other scenes in the project. In the Dining Room scene, use a Previous Scene hotspot to to link to the Entry, and Next Scene to link to the Bedroom.

Kitchen Scene - Previous Scene Hotspot
Kitchen Scene - Next Scene Hotspot

Then in the Bedroom, use the Previous Scene hotspot to link back to the Dining Room. Lastly, in the Exterior scene add a Go To Scene hotspot and set the Target Scene to the Entry scene.

Bedroom Scene
Outdoor Scene

Save, Publish & Preview

Now we are ready to publish our experience and preview it. Click the “Save & Publish” button in the upper right corner. A small grey icon will appear while the project is saving, once it has finished saving a green dot will appear.

Save and Publish

Click the View Live Project button to view your 360 virtual experience. When the experience loads in a new tab, click the Start Experience button to begin exploring the virtual space.

Entry Scene
Bedroom Scene
Kitchen Scene
Outdoor Scene

Set the initial View

During the preview of the experience you may notice that the Entry and Dining Room scenes load with an initial viewpoint facing away from the hotspots. We can adjust this using the editor. Adjust the scene to frame the preview with the initial viewpoint. Click the Set as initial scene view button, a green banner will appear when the new viewpoint setting is updated.

Entry Scene
Entry Scene with New Initial View

Click Save & Publish to update the project with your latest changes, then click View live project to view the updated project. You’ll notice when the project loads that the initial view in the Entry scene is now facing the navigational hotspots.

Publish and View Multi-scene Demo

Related Guides

Share this Doc
CONTENTS

Powered By EazyDocs