Working with 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
JavaScript
Type
Description
Text
text
string
Text displayed on the widget.
Height
height
number
The height of the label. By default, this is set to 0.05 (or when the field is left empty).
Width
width
number
The width of the label.
Class
class
string
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
enableStateFormatting
boolean
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.
Dependent Field
stateFormatValue
string
This property is visible if the Enable State-Based Formatting checkbox is selected. For more information about style and state definitions in ThingWorx, see Style and State Definitions in the ThingWorx Help Center.
State Definition
stateFormat
boolean
This property is visible if the Enable State-Based Formatting checkbox is selected. For more information about style and state definitions in ThingWorx, see Style and State Definitions in the ThingWorx Help Center.
Font Family
fontFamily
string
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
fontColor
string
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
fontOutlineColor
string
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
string
Scale of the label.
X Coordinate
x
number
Location of the label on the x-axis.
Y Coordinate
y
number
Location of the label on the y-axis.
Z Coordinate
z
number
Location of the label on the z-axis.
X Rotation
rx
number
Rotation of the label about the x-axis.
Y Rotation
ry
number
Rotation of the label about the y-axis.
Z Rotation
rz
number
Rotation of the label about the z-axis.
Billboard
billboard
boolean
Rotates a widget around its center so it is always facing the viewer. It is aligned with the screen.
Occluding
occlude
boolean
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
decal
boolean
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)
opacity
number
A number between 0 and 1 that controls the level of transparency of the object. 0=completely transparent and 1=completely opaque.
Pivot
pivot
number
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 {
font-family: Century Gothic;
color: black;
--text-stroke-color: yellow;
--text-stroke-width: 3px; /*csslint ignore*/
font-weight: normal;
font-style: italic;
background-color: grey
}
For more information on implementing CSS classes, see Application Styles.