Get webXR.tools
Updated on February 22, 2023

Docy Child

Add Interactive Hotspots

Estimated reading: 3 minutes

WebXR.tools VTO Studio  allows you to create custom 3D experiences for exploring and visualizing 3D models in browser along with the ability to add interactivity using hotspots.

A hotspot is a UX/UI pattern that aims to draw a website/app user’s attention to a specific area or spot on the screen is commonly referred to as a hotspot. Within webXR.tools editors, hotspots allow you to add interactive elements to your virtual experience.

In this guide, we’ll walk through how to add interactive hotspots to a 3D model using the WebXR.tools Virtual Preview Studio.

Prerequisites

Open Project

To get started, login to the webXR.tools dashboard and open your existing VTO project.
Open VTO Project

Once the project loads, select the Model scene from the list in the left side panel.

Select Model Scene

Add a hotspot

Click the  + Add Hotspot button and choose Image from the menu and then click on the model to place the hotspot. Once added you will see a dot with an outer glow, and the right side panel will show a form with inputs to add a Label, Title, Description, Image, and custom CSS.

Click to add Hotspot

To display text next to the dot, add a label. Labels serve two purposes — give the user more context as to what they will see when they interact, and labels are clickable giving users a larger area to interact with.

When a user interacts with a hotspot it will open a modal overlay with fields to add a media asset (image/ video), a title, and a description. The Tile and description will appear below the media asset and you can use standard HTML tags in both inputs.

Add an image, title, and description

Repeat this process to add as many hotspots as needed for your project. Use Preview mode to test your hotspots before saving and publishing your project.

Preview Hotspot

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  View Live Project button to view your 3D virtual preview experience in a new tab.
View VTO Experience
Note: Hotspots are not visible within an experience’s augmented reality mode
Share this Doc
CONTENTS

Powered By EazyDocs