Advanced

2D UI Elements

Create rich user interfaces

Text Labels

Add text annotations to enhance your 3D scene.

Text Element

Type | Text           | X  | Y   | FontSize | Color
text | Total: $500    | 20 | 30  | 18       | #333333

type Element type text

text Label content "Width: 100mm"

x, y 2D position in pixels 50, 100

fontSize Text size 16

color Text color #333333

Dimension Lines

Display measurements directly on your 3D model.

Dimension Element

type Element type dimension

start Start point coordinates 0,0,0

end End point coordinates 100,0,0

offset Line offset from model 20

GUI Elements

Create interactive controls for user input.

Buttons

Type   | Label
button | Calculate

Sliders

Type   | Min | Max
slider | 10  | 500

Dropdowns

Type     | Options
dropdown | A,B,C

Input Fields

Type  | Value
input | 250

Info Panels

Display summary information in styled panels.

Panel Element

Type  | Title   | Content              | X  | Y
panel | Summary | Width: {Width}mm     | 10 | 10

Dynamic Content

Use formulas to create live-updating displays.

Formula-Driven Text

Type | Text                                        | X  | Y
text | ="Price: $" & Total                        | 20 | 30
text | =IF(InStock,"In Stock","Out of Stock")     | 20 | 60

Positioning

Place elements precisely on screen.

X Position

Pixels from left edge

Y Position

Pixels from top edge

Responsive

Use percentages: x: 50%

Styling Options

Customize the appearance of your UI elements.

backgroundColor Background color #FFFFFF

borderColor Border color #CCCCCC

borderRadius Corner rounding 8

padding Inner spacing 10

opacity Transparency (0-1) 0.9

Group Controls

Place related inputs together

Test Mobile

Check different screen sizes

Leave Space

Don't crowd the 3D view

← Back to Documentation