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; }
A continuación, en el campo Clase de Imagen 3D, escriba: my-image. Hace referencia al contenido que se ha añadido en > .
|
||
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 Sí, 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
|
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.
|
|
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; } |