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
Slider
Input

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.

<aside> ✅ 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

</aside>

<aside> 👀 Switch to Preview mode to see all the Floating UIs at once, and test their functionality.

</aside>

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

Floating UI

What is it

Floating UI settings

Layout

Fill

Stroke