使用小组件 > 3D > 3D 标签
  
3D 标签
这个小组件有什么功能?
“3D 标签”小部件允许您在 3D 模型上显示相应的数据和信息。
何时会用到这个小组件?
如果要在 AR 体验的 3D 工作区加入文字,请使用 3D 标签。3D 标签不仅可用于简单的一字或两字标签,也可用于文字较多的标签。
这个小组件中是否有专用的属性、服务、事件或操作?
若要查看小组件常用的属性、服务和事件的列表,请参阅小组件的通用属性、服务和事件
下表列出了该小组件的专用属性。
属性
JavaScript
类型
说明
文本
text
string
小组件上显示的文本。
高度
height
number
标签的高度。默认设置为 0.05(或当字段留空白时)。
宽度
width
number
标签宽度。
class
string
分配给小组件的类。
目前支持以下 CSS 属性:
font-family—设置字体系列
color—设置字体/填充颜色
--text-stroke-color—与 color 类似,但用于设置字体笔划颜色
--text-stroke-width—设置笔划宽度
font-weight—设置字体的磅数或宽度
font-style
—设置字体样式(常规、斜体等)
background-color—设置标签的填充颜色
text-decoration—支持下划线
border-color—设置标签的边框颜色
border-radius—设置图像的边框圆角
border-style—设置标签的边框样式
border-width—设置标签的边框宽度
border—将 border-colorborder-styleborder-width 结合在一起
padding—在标签文字外部填充
例如,在“项目”窗格中的“样式”下面,单击“应用程序”,然后在编辑器中输入以下内容:
.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
}
* 
指定的颜色必须是 CSS 颜色。如果不清楚有效的 CSS 颜色,可在互联网上搜索“CSS 颜色”相关信息。
然后,在 3D 标签的“类”字段中,输入 my-label。这是指“样式” > “应用程序”中添加的内容。
启用基于状态的格式
enableStateFormatting
boolean
允许您根据 ThingWorx 中定义的状态定义设置小组件的格式。
选中此复选框,则会显示以下属性:
从属字段
状态定义
例如,如果 3D 标签的状态定义值为 error,则标签将变成红色。
有关 ThingWorx 中的样式和状态定义的更多信息,请参阅 ThingWorx 帮助中心中的“样式和状态定义”
从属字段
stateFormatValue
string
如果选中“启用基于状态的格式”复选框,则此属性可见。有关 ThingWorx 中的样式和状态定义的更多信息,请参阅 ThingWorx 帮助中心中的“样式和状态定义”
状态定义
stateFormat
boolean
如果选中“启用基于状态的格式”复选框,则此属性可见。有关 ThingWorx 中的样式和状态定义的更多信息,请参阅 ThingWorx 帮助中心中的“样式和状态定义”
字体系列
fontFamily
string
字体的样式。输入有效的字体系列,例如 Arial、Times New Roman、Century Gothic 等。默认设置为 Arial。
字体颜色
fontColor
string
字体的颜色。输入颜色名称、十六进制值或 RGBA 值。例如,如果希望字体为红色,则可以输入以下任意一项内容:
red
#FF0000
rgba(255, 0, 0, 1)
默认设置为“黑色”。
字体轮廓颜色
fontOutlineColor
string
字体轮廓的颜色。输入颜色名称、十六进制值或 RGBA 值。例如,如果希望标签轮廓为红色,则可以输入以下任意一项内容:
red
#FF0000
rgba(255, 0, 0, 1)
默认设置为“白色”。
比例
scale
string
标签的比例。
X 坐标
x
number
标签在 X 轴上的位置。
Y 坐标
y
number
标签在 Y 轴上的位置。
Z 坐标
z
number
标签在 Z 轴上的位置。
X 旋转
rx
number
标签绕着 X 轴旋转的角度。
Y 旋转
ry
number
标签绕着 Y 轴旋转的角度。
Z 旋转
rz
number
标签围绕 Z 轴旋转的角度。
Billboard
billboard
boolean
使小组件围绕其中心旋转,以便其始终面向观看者。它与屏幕对齐。
遮蔽
occlude
boolean
如果选中此项,则小组件的几何体会消失,但同时在 3D 场景中也会遮蔽任何其他增强。
因此,背景或照相机的数据反馈会出现被遮蔽的小组件应该显示的位置上。此功能可用于隐藏周围的 3D 几何体来强调某些增强。
始终置顶
decal
boolean
无论 3D 场景的深度如何,小组件几何体均会叠加在场景中的任何其他增强上。如果设置为“是”,则永远不会被其他增强遮蔽。通常,可用于必须始终显示的标签或传感器。
不透明度 (1 不透明 - 0 透明)
opacity
number
介于 0 和 1 之间的数字,用于控制对象的透明度级别。0 = 完全透明,1 = 完全不透明。
枢轴
pivot
number
确定图像的枢轴点:
左上方
正上
右上方
左中
正中
右中
左下方
正下
右下方
小组件的显示效果
以下是小组件的显示效果示例!
使用时的必要步骤
显示效果
1. “3D 标签”小组件拖放到工作区。
2. (可选)在“详细信息”窗格中选中“Billboard”的复选框。
3. “文本”字段中输入想要显示的文字,或将数据属性绑定到小组件的“文本”字段。
使用 CSS 设置小组件样式
您可以使用 CSS 设置小组件样式!下面是您可以创建和应用的 CSS 类的示例:
* 
请注意,最好为您的类指定唯一名称,以避免与其他类或预装属性发生冲突。
CSS 示例
显示效果
.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
}
有关实现 CSS 类的详细信息,请参阅应用程序样式