Getting started
Studio Navigation
Design process
Sharing and embedding
Floating UI
The Floating UI allows you to add elements such as images, animations (GIF, Lottie), text, buttons, list of objects or materials.
It can be displayed by default or appear when the viewer interacts with any object or hotspot.
Why floating?
Because it can be positioned wherever you'd like on the scene, relative to the canvas, the hotspot or any other object.
Settings
1 — This is where you add the UI elements. Elements can be moved among themselves and renamed.
2 — Placement location on the canvas. To set the Floating UI to appear relative to any object in the scene, switch to Interact mode and create an interaction with the desired settings.
3 — Set the vertical and horizontal offset.
4 — Add or remove background transparency.
5 — Round the corners.
6 — The paddings at the bottom and top can be hidden.
UI Elements
The UI Elements are blocks that perform different functions. The selection is based on the type of content and information presented.
Each element has its own setting.
Materials
Materials is a Floating UI element that displays all available materials for an object and allows you to switch between them.
Materials works when an object has multiple material options. Click on the plus button displayed in the material window, to see the available variations:
Go to the Floating UI and add a Materials, located under the UI Elements. From the source drop-down menu choose the object that this controller should refer to. Select between swatches and drop-down menu styles. It is possible to have multiple color switchers for different objects or parts in the scene.
The object or material selected by the user can be logged to the URL using a Button or Image element. There is a special option called Append parameters.
Example:
Set up a Materials in Floating UI. Add a Button or an Image element. Specify the URL https://www.vectary.com in the settings and enable the Append parameters option.
Result:
When the user clicks on a button or an image, the selected materials will be logged to the URL. The link will look like this https://www.vectary.com/?Sphere=Marion , where Sphere=Marion means that a material named Marion was selected for the sphere.
Variants
Variants is a Floating UI element that allows the viewer to select objects from a list.
The object can be anything, including lighting or even camera. You can also group objects so that when you switch the group, the view, lighting, and objects all change at the same time.
First step: place all switchable objects in the Variants tool.
Second step: add a Floating UI and add a Variants element to it.
Third step: select Variants tool as resource in the Variants settings.
The object or material selected by the user can be logged to the URL using a Button or Image element. There is a special option called Append parameters.
Example:
Add a Variants in Floating UI. Add a Button or Image element, specify the URL such as https://www.vectary.com in the settings, and enable the Append parameters option.
Result:
When the user clicks on a button or an image, the selected object will be logged to the URL. The link will look like this: https://www.vectary.com/?Variants+Controller=Box , where Variants+Controller=Box means that a Box object was selected in Variants Controller.
Text
With the Text element, it is possible to add descriptions and additional information.
The following text types are available:
- Title
- Subtitle
- Label
- Paragraph
Image
To include an image in the Floating UI, add an image block that can also include a GIF or a Lottie.
The image can be clickable and contain a link.
Possible file types: .gif, .png, .jpg
Settings:
- Borderless image — add side boundaries.
- Go to link — add a link to make the image clickable. Links must be complete and contain
https://. - Append parameters — If this option is enabled, values selected by the user in Variants and Materials will automatically be added to the URL.
Button
The button allows the viewer to click and open a link.
Settings:
- Change the button text
- Add a link
- Choose the button color: Dark or Light
- Go to link — links must be complete and contain
https://. - Append parameters — If this option is enabled, values selected by the user in Variants and Materials will automatically be added to the URL.
