/w=640,quality=80,fit=scale-down){kind=logo}
Getting started
/w=640,quality=80,fit=scale-down)
Studio Navigation
Design process
/w=640,quality=80,fit=scale-down)
/w=640,quality=80,fit=scale-down)
/w=640,quality=80,fit=scale-down)
/w=640,quality=80,fit=scale-down)
Sharing and embedding
/w=640,quality=80,fit=scale-down)
/w=640,quality=80,fit=scale-down)
/w=640,quality=80,fit=scale-down)
Model API
/w=640,quality=80,fit=scale-down)
/w=640,quality=80,fit=scale-down)
/w=640,quality=80,fit=scale-down)
/w=640,quality=80,fit=scale-down)
Floating 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.
Floating UI settings
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
W ā width of the Container
H ā height of the Container
Fixed ā fixed size, is set in pixels
Fill ā set the size according to the size of the parent element (for Container the parent element is Floating UI)
Hug ā set the size according to the size of the largest element inside it (only for Floating UI and Container)
Padding ā vertical and horizontal Container padding
Corner radius ā rounding radius of the Container
Default color ā Container background color (if disabled, the Floating UI will be transparent)
Hover color ā Container background color on hover
Thickness ā Container stroke thickness
Default color ā Container stroke color (if disabled, the stroke will be transparent)
Hover color ā Container stroke color on hover
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
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
W ā width of the Materials element
H ā height of the Materials element
Fixed ā fixed size, is set in pixels
Fill ā set the size according to the size of the parent element (for Materials the parent element is Floating UI or Container)
Padding ā vertical and horizontal element padding
Corner radius ā rounding radius of the thumbnail (swatch style) or field (dropdown style).
Thickness ā stroke thickness for the field or thumbnails
Default color ā default stroke color (if disabled, the stroke will be transparent)
Hover color ā stroke color on hover
Active color ā stroke color of the selected thumbnail
The font setting is available in two cases: if Dropdown style is chosen or if displaying material names for Switch style is enabled.
The font settings are standard: choose font, size, font-weight, alignment, color.
ā¹ļøĀ 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
W ā width of the Variants element
H ā height of the Variants element
Fixed ā fixed size, is set in pixels
Fill ā set the size according to the size of the parent element (for Variants the parent element is Floating UI or Container)
Padding ā vertical and horizontal element padding
Corner radius ā rounding radius of the field and the drop-down list
Thickness ā field stroke thickness
Default color ā field stroke color (if disabled, the stroke will be transparent)
Hover color ā field stroke color on hover
Choose a font for object names, specify size, font-weight, alignment, default color and hover color.
ā¹ļøĀ 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.
W ā width of the Text element
Fixed ā fixed size, is set in pixels
Fill ā set the size according to the size of the parent element (for Text the parent element is Floating UI or Container)
Padding ā vertical and horizontal element padding
Image
Image element allows for adding an image or an animation to the Floating UI.
Upload image ā possible file types: Lottie .json, Figma frameš„Ā , .gif, .png, .jpg, .svg
.gif or Lottie uploaded to the Floating UI can also be managed via interactions
W ā width of the Image
H ā height of the Image
Fixed ā fixed size, is set in pixels
Fill ā set the size according to the size of the parent element (for Image the parent element is Floating UI or Container)
Padding ā vertical and horizontal Image padding
Corner radius ā Image rounding radius
Thickness ā image stroke thickness
Default color ā image stroke color (if disabled, the stroke will be transparent)
Hover color ā image stroke color on hover
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
W ā width of the Button element
H ā height of the Button element
Fixed ā fixed size, is set in pixels
Fill ā set the size according to the size of the parent element (for Button the parent element is Floating UI or Container)
Padding ā vertical and horizontal Button padding
Corner radius ā Button rounding radius
Default color ā button color (if disabled, the Button will be transparent)
Hover color ā button color on hover
Thickness ā button stroke thickness
Default color ā button stroke color (if disabled, the stroke will be transparent)
Hover color ā button stroke color on hover
Choose a font for button, specify size, font-weight, alignment, default color and hover color.
Tips
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
