What is a 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?

Common Widget Properties, Services, and Events

To view a list of common widget properties, services, and events, see

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.

ThingWorx

, see Style and State Definitions

ThingWorx

Help Center.

For more information about style and state definitions in, seein theHelp Center.

Dependent Field

stateFormatValue

string

Enable State-Based Formatting

checkbox is selected. For more information about style and state definitions in

ThingWorx

, see Style and State Definitions

ThingWorx

Help Center.

This property is visible if thecheckbox is selected. For more information about style and state definitions in, seein theHelp Center.

State Definition

stateFormat

boolean

Enable State-Based Formatting

checkbox is selected. For more information about style and state definitions in

ThingWorx

, see Style and State Definitions

ThingWorx

Help Center.

This property is visible if thecheckbox is selected. For more information about style and state definitions in, seein theHelp 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
}

Application Styles

For more information on implementing CSS classes, see

What makes a good 3D label?

A great label shows the world what you stand for, makes people remember your brand, and helps potential customers understand if your product is right for them. Labels communicate all of that through color, typography and other design elements. Learn how to make your 3D label tell your brand’s story.