Trabajar con widgets > 3D > Etiqueta 3D
  
Etiqueta 3D
¿Qué hace este widget?
El widget de Etiqueta 3D permite mostrar información sobre modelos 3D.
¿Cuándo se aconseja utilizar este widget?
Es conveniente utilizar una etiqueta 3D para incluir texto en el lienzo 3D de una experiencia de RA. La etiqueta 3D es válida para incluir una o dos palabras, o para textos más largos.
¿Hay propiedades, servicios, eventos o acciones especiales?
Para ver una lista de propiedades, servicios y eventos comunes de widgets, consulte Propiedades, servicios y eventos comunes de widgets.
La tabla siguiente es una lista de propiedades específicas de este widget.
Propiedad
JavaScript
Tipo
Descripción
Texto
text
string
Texto que aparece en el widget.
Altura
height
number
Altura de la etiqueta. Por defecto, se define en 0,05 o cuando el campo se deja vacío.
Anchura
width
number
Ancho de la etiqueta.
Clase
class
string
Clase asignada al widget.
Se soportan las propiedades siguientes de CSS:
font-family: define la familia de fuentes
color: define el color de relleno/fuente
--text-stroke-color: similar a color, pero define el color de pasada de la fuente
--text-stroke-width: define la anchura de la pasada
font-weight: define el ancho o el grosor de la fuente
font-style
: define el estilo de la fuente (normal, cursiva, oblicua, etc.)
background-color: define el color de relleno de la etiqueta
text-decoration: soporta el subrayado
border-color: define el color del borde alrededor de la etiqueta
border-radius: redondea las esquinas del borde alrededor de la imagen
border-style: define el estilo del borde alrededor de la etiqueta
border-width: define la anchura de pasada del borde alrededor de la etiqueta
border: combina border-color, border-style y border-width
padding: aplica caracteres de relleno fuera del texto de la etiqueta
Por ejemplo, en el panel PROYECTO, bajo ESTILOS, pulse en Aplicación e indique lo siguiente en el 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
}
* 
Los colores que se especifican deben ser CSS. En caso de duda sobre colores CSS válidos, busque "colores CSS" en Internet.
A continuación, en el campo Clase de la etiqueta 3D, escriba: my-label. Hace referencia al contenido que se ha añadido en ESTILOS > Aplicación.
Activar formato basado en estado
enableStateFormatting
boolean
Permite aplicar formato al widget según las definiciones de estado que se hayan establecido en ThingWorx.
Si la casilla está seleccionada, aparecen las propiedades siguientes:
Campo dependiente
Definición de estado
Por ejemplo, si una etiqueta 3D tiene un valor de Definición de estado de error, la etiqueta cambia a color rojo.
Para obtener más información sobre las definiciones de estado y de estilo en ThingWorx, consulte Definiciones de estado y de estilo en el ThingWorx Centro de ayuda.
Campo dependiente
stateFormatValue
string
Esta propiedad está visible si se selecciona la casilla de verificación Activar formato según estado. Para obtener más información sobre las definiciones de estado y de estilo en ThingWorx, consulte Definiciones de estado y de estilo en el ThingWorx Centro de ayuda.
Definición de estado
stateFormat
boolean
Esta propiedad está visible si se selecciona la casilla de verificación Activar formato según estado. Para obtener más información sobre las definiciones de estado y de estilo en ThingWorx, consulte Definiciones de estado y de estilo en el ThingWorx Centro de ayuda.
Familia de fuentes
fontFamily
string
Estilo de la fuente. Indique una familia de fuentes válida como Arial, Times New Roman, Century Gothic, etc. Por defecto, este valor se define en Arial.
Color de fuente
fontColor
string
Color de la fuente. Indique un nombre de color, valor hexadecimal o de RGBA. Por ejemplo, para que el color de la fuente sea rojo, se puede indicar cualquiera de las opciones siguientes:
red
#FF0000
rgba(255, 0, 0, 1)
Por defecto, se define en negro.
Color de contorno de fuente
fontOutlineColor
string
Color del contorno de la fuente. Indique un nombre de color, valor hexadecimal o de RGBA. Por ejemplo, para que el color del contorno de la etiqueta sea rojo, se puede indicar cualquiera de las opciones siguientes:
red
#FF0000
rgba(255, 0, 0, 1)
Por defecto, se define en blanco.
Escala
scale
string
Escala de la etiqueta.
Coordenada X
x
number
Ubicación de la etiqueta en el eje X.
Coordenada Y
y
number
Ubicación de la etiqueta en el eje Y.
Coordenada Z
z
number
Ubicación de la etiqueta en el eje Z.
Rotación X
rx
number
Rotación de la etiqueta en torno al eje X.
Rotación Y
ry
number
Rotación de la etiqueta en torno al eje Y.
Rotación Z
rz
number
Rotación de la etiqueta en torno al eje Z.
Cartel
billboard
boolean
Hace girar un widget alrededor de su centro de forma que siempre esté encarado al visualizador. Se alinea con la pantalla.
Oclusión
occlude
boolean
Si se selecciona esta opción, la geometría de un widget es invisible, pero al mismo tiempo oculta cualquier otro aumento detrás de la escena 3D.
Así pues, en lugar del widget obstruido aparecen el fondo o el avance de la cámara. Esta opción puede utilizarse para realzar aumentos ocultando la geometría 3D circundante.
Siempre arriba
decal
boolean
Superpone la geometría de los widgets en cualquier otro aumento de la escena sea cual sea su profundidad en la escena 3D. Si se define en , nunca lo ocultan otros aumentos. Suele utilizarse en etiquetas o sensores que siempre deben estar visibles.
Opacidad (1 opaco - 0 transparente)
opacity
number
Número entre 0 y 1 que controla el nivel de transparencia del objeto. 0 = completamente transparente; 1 = completamente opaco.
Giro
pivot
number
Determina el punto de giro de la imagen:
Arriba a la izquierda
Arriba en el centro
Arriba a la derecha
En medio a la izquierda
En medio en el centro
En medio a la derecha
Abajo a la izquierda
Abajo en el centro
Abajo a la derecha
Widget en acción
A continuación se ofrece un ejemplo del aspecto que puede tener el widget.
Pasos mínimos para utilizarlo
Aspecto
1. Arrastre un widget de Etiqueta 3D y suéltelo en el lienzo.
2. (Opcional) Seleccione la casilla Cartel en el panel DETALLES.
3. Escriba el texto que se debe mostrar en el campo Texto; también se puede enlazar una propiedad de datos al campo Texto del widget.
Aplicar estilos al widget con CSS
CSS puede utilizarse para aplicar estilos al widget. A continuación se muestra un ejemplo de una clase de CSS que se puede crear y aplicar:
* 
Es aconsejable asignar nombres exclusivos a las clases; de este modo, no entrarán en conflicto con otras clases ni con propiedades de OOTB.
Ejemplo de CSS
Aspecto
.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
}
Para obtener más información sobre cómo implementar clases de CSS, consulte Estilos de aplicación.