Navigating Vuforia Studio > Widgets > 3D > 3D Label
  
3D Label
What Does This Widget Do?
The 3D Label widget allows you to display data and information on your 3D models.
When Should I Use This Widget?
Use a 3D Label when you want to include text on the 3D canvas of an AR Experience. The 3D Label can be used for just a simple one or two-word label, or for larger amounts of text as well.
Are There Any Special Properties, Services, Events, or Actions?
To view a list of common widget properties, services, and events, see Common Widget Properties, Services, and Events.
The following table is a list of properties that are specific to this widget.
Property
Description
Height
The height of the label. By default, this is set to 0.05 (or when the field is left empty).
Class
The class assigned to the widget.
The following CSS properties are currently supported:
font-family—sets the font family
color—sets the font/fill color
--text-stroke-color—similar to color, but sets the font stroke color
--text-stroke-width—sets the width of the stroke
font-weight—sets the weight, or thickness, of the font
font-style
—sets the font style of the font (normal, italic, oblique, etc.)
background-color—sets the fill color of the label
text-decoration—supports underline
border-color—sets the color of the border around the label
border-radius—rounds the corners of the border around the image
border-style—sets the style of the border around the label
border-width—sets the stroke width of the border around the label
border—combines border-color, border-style, and border-width
padding—applies padding outside the label text
For example, in the PROJECT pane, under STYLES, click Application and enter the following in the editor:
.my-label {
font-family: Century Gothic;
color: black;
--text-stroke-color: yellow;
--text-stroke-width: 3px;
font-weight: normal;
font-style: italic;
background-color: grey
}
* 
Colors specified must be CSS colors. If you’re unsure about valid CSS colors, you can do an internet search for “CSS colors.”
Then, in the Class field of the 3D Label, enter: my-label. This refers to content added in STYLES > Application.
Enable State-Based Formatting
Allows you to format the widget based on state definitions that have been defined in ThingWorx.
If the checkbox is selected the following properties appear:
Dependent Field
State Definition
For example, if a 3D label has a State Definition value of error, the label turns red.
For more information about style and state definitions in ThingWorx, see Style and State Definitions in the ThingWorx Help Center.
Font Family
Style of the font. Enter a valid font family such as Arial, Times New Roman, Century Gothic, etc. By default, this is set to Arial.
Font Color
Color of the font. Enter a color name, Hex value, or RGBA value. For example, if you want the font color to be red, you can enter any of the following:
red
#FF0000
rgba(255, 0, 0, 1)
By default, this is set to black.
Font Outline Color
Color of the font outline. Enter a color name, Hex value, or RGBA value. For example, if you want the outline of the label to be red, you can enter any of the following:
red
#FF0000
rgba(255, 0, 0, 1)
By default, this is set to white.
Scale
Scale of the label.
X Coordinate
Location of the label on the x-axis.
Y Coordinate
Location of the label on the y-axis.
Z Coordinate
Location of the label on the z-axis.
X Rotation
Rotation of the label about the x-axis.
Y Rotation
Rotation of the label about the y-axis.
Z Rotation
Rotation of the label about the z-axis.
Billboard
Rotates a widget around its center so it is always facing the viewer. It is aligned with the screen.
Occluding
If selected, the geometry of a widget is invisible, but at the same time hides any other augmentations behind it in the 3D scene.
Therefore, the background or camera feed appears where the occluded widget should be. This can be used to emphasize some augmentations by hiding surrounding 3D geometry.
Always on top
Overlays the widgets geometry on any other augmentations in the scene regardless of its depth in the 3D scene. If set to Yes, it is never hidden by other augmentations. Typically this can be used for labels or sensors that must always remain visible.
Opacity (1 Opaque - 0 Transparent)
A number between 0 and 1 that controls the level of transparency of the object. 0=completely transparent and 1=completely opaque.
Pivot
Determines the pivot point of the image:
Top Left
Top Center
Top Right
Middle Left
Middle Center
Middle Right
Bottom Left
Bottom Center
Bottom Right
The Widget in Action
Here’s an example of what your widget might look like!
Minimum Steps Required for Use
What It Looks Like
1. Drag and drop a 3D Label widget onto the canvas.
2. (Optional) Select the checkbox for Billboard in the Details pane.
3. Enter the text you want displayed in the Text field or bind a data property to the Text field of the widget.
Style the Widget with CSS
You can use CSS to style the widget! The following is an example of a CSS class you could create and apply:
* 
Keep in mind that it’s best to give your classes unique names so they do not conflict with other classes or OOTB properties.
CSS Example
What It Looks Like
.ptc-3DLabel {
padding: 10px;
border: 10px solid blue;
border-radius: 30px;
font-weight: bold;
}
For more information on implementing CSS classes, see Application Styles.