Trabajar con widgets > 3D > Imagen 3D
  
Imagen 3D
¿Qué hace este widget?
El widget de Imagen 3D permite insertar una imagen 3D en el lienzo 3D de una experiencia de RA. Formatos de fichero soportados:
.png
.jpg, .jpeg
.svg
.gif
.bmp
¿Cuándo se aconseja utilizar este widget?
Utilice una imagen para mostrar imágenes o contenido gráfico 3D a un usuario. Por ejemplo, si desea describir a un técnico de reparación el aspecto de un filtro de aire sucio, lo más práctico quizá sea incluir una imagen de dicho filtro.
¿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
Recurso
src
string
Recurso que se utiliza para la imagen 3D.
Para incluir una imagen, se puede realizar una de las acciones siguientes:
Pulse en junto al campo para añadir un nuevo fichero de imagen.
Escriba o copie y pegue el URL de la imagen en el campo.
Seleccione una imagen del menú desplegable.
Altura
height
number
Altura de la imagen 3D en metros. El valor mínimo es de 0,04 metros.
Anchura
width
number
Anchura de la imagen 3D en metros. El valor mínimo es de 0,04 metros.
Clase
class
string
Clase asignada al widget.
Se soportan las propiedades siguientes de CSS:
background-color: define el color de relleno de la imagen
border-color: define el color del borde alrededor de la imagen
border-style: define el estilo del borde alrededor de la imagen
border-radius: redondea las esquinas del borde alrededor de la imagen
border-width: define la anchura de pasada del borde alrededor de la imagen
border: combina border-color, border-style y border-width
padding: aplica caracteres de relleno fuera de la imagen
Por ejemplo, en el panel PROYECTO, bajo ESTILOS, pulse en Aplicación e indique lo siguiente en el editor:
.my-image {
border-color: black;
border-style: solid;
border-radius: 5px;
border-width: 3px;
background-color: white
padding: 25px 15px 25px 40px;
}
* 
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 Imagen 3D, escriba: my-image. Hace referencia al contenido que se ha añadido en ESTILOS > Aplicación.
Escala
scale
string
Escala de la imagen 3D.
Coordenada X
x
number
Ubicación de la imagen en el eje X.
Coordenada Y
y
number
Ubicación de la imagen en el eje Y.
Coordenada Z
z
number
Ubicación de la imagen en el eje Z.
Rotación X
rz
number
Rotación de la imagen en torno al eje X.
Rotación Y
ry
number
Rotación de la imagen en torno al eje Y.
Rotación Z
rz
number
Rotación de la imagen 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 , no lo ocultarán otros aumentos.
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
boolean
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 Imagen 3D y suéltelo en el lienzo.
2. (Opcional) Seleccione la casilla Cartel en el panel DETALLES.
3. En el campo Recurso, seleccione una imagen, añada una imagen nueva o especifique el URL de la imagen que desea mostrar.
4. Coloque la imagen en el lienzo según corresponda.
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-3DImage {
padding: 10px;
border: 10px solid black;
border-radius: 50px;
background: green;
}
Para obtener más información sobre cómo implementar clases de CSS, consulte Estilos de aplicación.