/w=32,quality=90,fit=scale-down){kind=logo}
Getting started
System Requirements
Rendering
Vectary Dashboard
Account Settings
Roles
User Interface
Scene Orientation
How To Get HelpImporting
/w=3840,quality=90,fit=scale-down)
Import formats
Figma frames import /w=3840,quality=90,fit=scale-down)
CAD filesDesign process
Design mode
Materials and Textures
Animated Materials/w=3840,quality=90,fit=scale-down)
Decals
UV mapping
Camera
Lighting and Environment
Effects
Background
Ground plane
Control Bar/w=3840,quality=90,fit=scale-down)
Libraries
Edit mode3D Configurator
Floating UI
Hotspots/w=3840,quality=90,fit=scale-down)
Interactions/w=3840,quality=90,fit=scale-down)
Animations
VariantsScene and project settings
Version History/w=3840,quality=90,fit=scale-down)
Augmented Reality (WebAR)
WebXR (beta)
Loading screen
Mouse controls
Interaction prompt
Menu - SettingsSharing, exporting, embedding
Sharing/w=3840,quality=90,fit=scale-down)
Performance analyzer
Optimizing a shared project/w=3840,quality=90,fit=scale-down)
Project cloning
Embedding to other software
Export optionsOther
Figma Plugin - Vectary 3D Studio Lite
2D to 3D
Adding comments
Object Editing
Left bar 
ShortcutsModel API
/w=3840,quality=90,fit=scale-down)
Introduction/w=3840,quality=90,fit=scale-down)
Quick Start
Events & Listeners/w=3840,quality=90,fit=scale-down)
Floating UI Configurators/w=3840,quality=90,fit=scale-down)
EcommerceFloating UI
What is it
Floating UI (sometimes referred to as FUI) is a tool that allows you to create an interactive 2D design to control your 3D scene. Transform your scenes into functioning 3D applications with customizable elements:
- Container
- Materials
- Variants
- Text
- Image
- Button
Floating UI can be displayed by default or shown when you interact with any objects or hotspots. Its content, size, design, and behaviors are determined entirely by you.
Interactions Floating UI settings
First, determine the type of UI: Floated or Docked. There is a fundamental difference between the two:
- Floating ā the primary feature of this type of interface is that it is overlaid on the 3D canvas.
- Docked ā change the type to Docked to allocate a distinct, independent space for the UI. This adjustment places the UI adjacent to the 3D canvas instead of overlapping it, as happens with Floating UI. Consequently, interactions with 3D objects are enhanced, as they will no longer intersect with the UI when the camera view changes.
Position ā select the Floating UI position relative to the canvas
Offset ā set the horizontal and vertical offset of the Floating UI
Stacking ā set the stacking direction for the contents inside the Floating UI
Align elements ā element alignment inside the Floating UI
Spacing ā the distance between elements inside the Floating UI
Layout
W ā width of the Floating UI
H ā height of the Floating UI
Fixed ā fixed size, is set in pixels
Fill ā set the size according to the size of the parent element (for Floating UI the parent element is Canvas)
Hug ā set the size according to the size of the largest element inside it (only for Floating UI and Container)
Padding ā vertical and horizontal Floating UI padding
Corner radius ā rounding radius of the Floating UI
Fill
Default color ā background color of the Floating UI (if disabled, the FUI will be transparent)
Hover color ā background color of the Floating UI on hover
Stroke
Thickness ā stroke thickness of the Floating UI
Default color ā stroke color of the Floating UI (if disabled, the stroke will be transparent)
Hover color ā stroke color of the Floating UI on hover
Effects
Shadow ā shadow for the Floating UI
Background Blur ā creates a blur effect. The effect will be noticeable if the Floating UI background has transparency (Fill ā Default color < 100%).
Elements
Elements are building blocks within a Floating UI that perform different functions. Elements allow you to create a UI to manage your scene (such as switching materials, objects or creating buttons), as well as include various types of information and visuals. (images, animations, and text).
Each element has its own settings.
Container
Container is an essential element. It provides greater flexibility in positioning and fitting other elements within the Floating UI.
The container is just a wrapper that can display not only elements but also other containers inside of it. This capability gives almost unlimited flexibility in creating a fully customized Floating UI layout.
Stacking ā set the stacking direction for the contents inside the Container
Align elements ā elements alignment inside the Container
Spacing ā the distance between elements inside the Container
Materials
Materials is an element that displays all available materials options for an object and allows you to switch between them.
The object should have multiple materials to have something to switch between:
Source ā specify the object for which the material switcher is to be created.
Style ā select switcher style: Swatch or Dropdown
Additional settings for the Swatch style:
Display name ā display the selected material name, as well as when hovering the thumbnail
Alignment ā thumbnail alignment
Spacing ā distance between thumbnails
Swatch size ā thumbnail size
Auto hide ā allows hiding an element from the Floating UI if the object is hidden
Include hidden objects ā If enabled, material switching will also occur for hidden objects
Interactions 
ā¹ļøĀ The viewer's selection can be logged in the URL, an important benefit for e-Commerce usage. Read about it here: Open Link - Append parameters
Variants
Variants is an element that allows to switch objects in the scene by selecting them from a list.
An object can be anything in the scene, including lighting or even camera.
Step 1: place all switchable objects in the Variants tool.
Step 2: add a Floating UI and add a Variants element to it.
Step 3: select Variants tool as resource in the Variants settings.
Settings:
Source ā choose the Variants tool that will be used for switching objects
Source ā select switcher style: Swatch or Dropdown
Additional settings for the Swatch style:
Display name ā display the selected material name, as well as when hovering the thumbnail
Auto hide ā allows hiding an element from the Floating UI if the object is hidden
Alignment ā thumbnail alignment
Spacing ā distance between thumbnails
Swatch size ā thumbnail size
Interactions ā¹ļøĀ The viewer's selection can be logged in the URL, an important benefit for e-Commerce usage. Read about it here: Open Link - Append parameters
Text
Text element allows adding custom text to the Floating UI.
The settings allow you to change the font, its size, font-weight, alignment, line spacing, letter spacing, letter case, default color and hover color.
Image
Image element enables displaying static images, animations, and video content in the Floating UI
Interactions Supported formats:
- lottie, gif
- png, jpg, svg
- mp4
- Figma frame (learn more about importing a frame from FigmaĀ
Button
The Button element enables controlling the scene and serves as a trigger for any Action available in the interactions settings.
Read more:
Button text ā specify the text for the button
Tips
How to make a responsive UI
Adaptive UI is achieved by creating several different versions of the UI (desktop, mobile, tablet, etc.). Then, interactions need to be established that display the appropriate UI based on screen size while hiding the others. This is accomplished using Breakpoints condition.
Below, you can see an example of such interactions:
This interaction displays the Mobile UI and hides the Desktop UI when the screen size is 767px or smaller. This interaction is triggered upon project load, as specified in the trigger settings:
This interaction displays the Desktop UI and hides the Mobile UI when the screen size exceeds 767px. This interaction is triggered upon project load, as specified in the trigger settings:
Additionally, Docked UI can be used to separate the 3D canvas from the UI. For more details, refer to this video:
How to link Floating UI with a Hotspot or any other object
Floating UI can be displayed in relation to a canvas, Hotspot or any object in the scene.
This is configured in Interact mode.
- Switch to Interact mode
- Create a new interaction
- Set a Trigger (e.g., click on Hotspot)
- Set Action (Visibility type only)
- In the Object field select the desired FloatingUI
- After that two new parameters will become available:
ā¢ Relative to:
Self,Canvas,Hotspot,Any objectā select the object relative to which the FloatingUI will be shown ā¢ Auto-hide ā if enabled, FloatingUI hides after clicking anywhere
How to switch Floating UI using Variants
There may be a need to display a single Floating UI from multiple ones and have the ability to switch between them. You cannot directly add the Floating UI to Variants, but you can add the Floating UI to a group beforehand and then place the groups in Variants.
Tutorials
Learn how to create a floating logo, a camera switcher, and the ability to download images
Learn how to create a Floating UI in multiple languages
Learn how to add text, images and links in your interactive 3D designs