Input

Overview

The Input element adds an editable field to Floating UI that allows end users to enter text, numeric, or color values. The value entered into the Input field updates the variable specified in the Input settings.

By binding the Input element to a variable, it becomes possible to build interactive user interfaces where scene properties can be modified directly through user-defined values.

How the Input element works

• Input element is configured to target a specific variable

• Any value entered by the end user updates that variable in real time

• All Studio properties that reference the same variable respond immediately to the change

This approach enables flexible configurators where scene behavior and appearance are driven by user input.

Settings

The primary configuration of the Input element consists of selecting an existing variable (variable is type-agnostic) and defining the mode in which the Input operates.

Available Input modes:

• Text - allows entering a text value

• Number - allows entering a numeric value

• Color - allows entering a color value in HEX or RGB format

All remaining settings of the Input element are purely visual and affect only its appearance in the Floating UI.

Number-specific settings

When Number mode is selected, additional configuration options become available:

• Use range - enables restricting input values to a defined range

• Range - defines the minimum and maximum allowed values

• Step - sets the increment for value changes (manual input values are automatically rounded according to the defined step)

Text input example

This example demonstrates how to control a 3D text object using a text Input.

Steps:

• Create a 3D Text object

• Create a variable in the Variables Manager

• In the 3D text content field, insert the variable using the following syntax: ${variable} This syntax replaces the displayed text with the value of the variable The variable can also be embedded within text, for example: Text ${variable} Text

• Add Floating UI and create an Input element

• In the Input settings, select Text mode and assign the created variable

Result: in Preview mode, entering text into the Input field updates the text displayed by the 3D Text object.

---

Number input example

This example demonstrates how to control a numeric property, such as object scale.

Steps:

• Create a 3D object, such as a Box

• Create a variable in the Variables Manager

• Assign the variable to a numeric property, for example the Scale X value of the object

• Add Floating UI and create an Input element

• In the Input settings, enable Number mode and select the created variable

Result: in Preview mode, entering a numeric value into the Input field updates the object scale according to the entered value.

---

Color input example

For interactive material color control, Floating UI provides a dedicated Color element with a color palette. The Input element can be used alongside the Color element or as an alternative method for color adjustment.

The mechanism follows the same principle as Text and Number modes:

• A variable is selected in the Input settings

• The end user enters a color value in the Input field

• Supported formats, such as RGB or HEX, are defined in the Input settings

When the same variable is used by both the Color element and the Input element, color changes can be made either visually through the palette or precisely through numeric color values.