Floating UI

Floating UI

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.

🔥
There are a wide variety of ways that Floating UI can be used together with Interactions. Interactions bring your scene to life and turn the Floating UI from a simple design into an interactive one that you can use to make 3D scenes with interesting mechanics. Here are some of the things you can do with FUI and Interactions: - Start and stop animations - Hide and show any objects, including Floating UI - Switch objects, lights, camera views, materials - Transform objects - and more Learn more about
Interactions
Interactions

👉
Switch to Preview mode to see all the Floating UIs at once, and test their functionality.

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

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.

💡
Change the elements’ order by dragging and dropping them in the right panel.
💡
Each element can be renamed and duplicated.

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.

image

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

‣
Layout

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

‣
Fill

Default color — Container background color (if disabled, the Floating UI will be transparent)

Hover color — Container background color on hover

‣
Stroke

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.

Materials works the best when an object has multiple material options:

image

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

‣
Layout

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).

‣
Stroke

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

‣
Font

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.

🔥
Material switching can be implemented via Interactions (e.g., by clicking or hovering any object in the scene). Read more:
Interactions
Interactions

💡
If you specify Variants as the source of Materials, the materials of the object that is currently selected will be displayed.

ℹ️  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.

💡
Groups containing different types of objects can also be switchable. This means being able to set up a simultaneous change of view, objects and lighting.

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.

‣
Layout

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

‣
Stroke

Thickness — field stroke thickness

Default color — field stroke color (if disabled, the stroke will be transparent)

Hover color — field stroke color on hover

‣
Font

Choose a font for object names, specify size, font-weight, alignment, default color and hover color.

🔥
Object switching can be set up using interactions (e.g., by clicking or hovering any object in the scene). Read more:
Interactions
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.

💡
If you turn off the Default color (that is, make it transparent) and turn on Hover color, the text will appear only when you hover the cursor in the text area.

image

‣
Layout

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.

🔥
Image can also be used as a trigger for interactions. Read more:
Interactions
Interactions

Upload image — possible file types: .gif, .png, .jpg, .svg

‣
Layout

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

‣
Stroke

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

‣
Layout

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

‣
Fill

Default color — button color (if disabled, the Button will be transparent)

Hover color — button color on hover

‣
Stroke

Thickness — button stroke thickness

Default color — button stroke color (if disabled, the stroke will be transparent)

Hover color — button stroke color on hover

‣
Font

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.

  1. Switch to Interact mode
  2. Create a new interaction
  3. Set a Trigger (e.g., click on Hotspot)
  4. Set Action (Visibility type only)
  5. In the Object field select the desired FloatingUI
  6. 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

👉
Offset is adjusted in the Floating UI settings in Design mode
image

InstagramYouTubeDiscordTwitterLinkedIn

Vectary Studio