Componente Modelo 3D

Este componente se va a sustituir por el componente Visor de modelos 3D.

El componente Modelo 3D seguirá siendo operativo en los documentos que ya tenga, pero dejará de ser compatible más adelante. En su lugar, le recomendamos que utilice el componente Visor de modelos 3D con el archivo GLB de su recurso 3D y añada hotspots mediante el editor 3D integrado. Puede haber algunas diferencias en la forma en que se renderiza su modelo.

El componente Modelo 3D le permite insertar un modelo 3D de Poly en su anuncio que el usuario puede girar, mover, ampliar o reducir.

Compatibilidad

• Entornos y tipos de anuncios: este componente no es compatible con Google Ads, Google AdMob ni con anuncios AMP HTML.
• Navegadores: Microsoft Edge no es compatible con el componente Modelo 3D.

Para añadir el componente Modelo 3D a su proyecto, siga estos pasos:

1. Abra el panel Componentes y, a continuación, la carpeta Gráficos y efectos.
2. Arrastre el componente Modelo 3D a la escena.
3. En la sección Modelo 3D del panel Propiedades, introduzca la URL generada en la página de visualización del modelo de Poly.

Cuando proporciona un ID o una URL válidos, el componente de la escena muestra una imagen estática basada en el modelo.

Propiedades

Propiedad	Descripción
Nombre	Nombre del componente Modelo 3D.
URL	URL o ID del recurso 3D. Solo se admiten recursos alojados en Poly. El archivo del recurso debe tener un tamaño de 3 MB o inferior (tal como se indica en el panel de información de Poly), ya que es posible que los recursos más grandes no se carguen en Google Web Designer. Consulte la Guía de recursos en 3D para ver más directrices. Las URL deben empezar por https://poly.google.com/view/. El ID se encuentra al final de la URL de la página de visualización de Poly; por ejemplo, https://poly.google.com/view/0CkCZrXqCWW. Ejemplos: https://poly.google.com/view/0CkCZrXqCWW 0CkCZrXqCWW Actualizar el recurso Para actualizar el recurso 3D, haga clic en el botón Actualizar los recursos  en el campo URL. Si no ve ningún cambio, es posible que el recurso siga procesándose. En ese caso, debería esperar un minuto y volver a intentarlo.
Modelo 3D con fondo transparente	Marque esta casilla si quiere que el fondo del componente Modelo 3D sea transparente.

Propiedades avanzadas

Propiedad	Descripción
Icono del indicador del gesto	La imagen que se mostrará sobre el modelo 3D para pedir al usuario que interactúe con él. El indicador del gesto se mueve ligeramente para captar la atención del usuario hasta que se alcanza el límite de animación, y desaparece cuando el usuario empieza a interactuar con el modelo. Puede estar vinculado con datos dinámicos.
Texto del indicador del gesto	El texto que se mostrará debajo del icono del indicador del gesto. Solo está disponible si se ha designado un icono para el indicador del gesto. Puede estar vinculado con datos dinámicos.
Definir el límite de la animación	Marque esta casilla y defina una duración en segundos para limitar el tiempo que dura la animación del indicador gestual. Puede estar vinculado con datos dinámicos.

Eventos y acciones

Eventos

El panel Eventos se puede utilizar para activar otras acciones en el anuncio. El componente Modelo 3D envía los siguientes eventos:

Evento	Descripción
Escena renderizada	Se envía después de renderizar la escena del modelo 3D por primera vez.
La cámara ha cambiado	Se envía cuando cambia alguna de las propiedades de la cámara 3D. El objeto event.detail contiene todas las propiedades actuales de la cámara.
Se ha hecho clic en el hotspot	Se envía cuando se hace clic en un hotspot (definido en el editor de Poly). El objeto event.detail contiene el nombre del hotspot en el que se ha hecho clic, su índice la lista de hotspots de la escena y sus coordenadas "x" e "y".
Se ha iniciado la interacción	Se envía cuando el usuario empieza a interactuar con el modelo 3D.
La interacción ha finalizado	Se envía cuando el usuario deja de interactuar con el modelo 3D.

Para seleccionar uno de estos eventos en el cuadro de diálogo Evento, defina el componente Modelo 3D como objetivo.

Acciones

Las acciones del componente Modelo 3D que se indican a continuación pueden activarse en respuesta a otros eventos:

Evento	Descripción	Opciones de configuración
Definir la guiñada	Cambia el modelo a la guiñada especificada (rotación alrededor del eje vertical) y detiene la animación predeterminada.	Guiñada: ángulo de guiñada expresado en grados.
Definir la guiñada objetivo	Gira suavemente el modelo hasta la guiñada especificada.	Guiñada objetivo: ángulo de guiñada expresado en grados (entre -360 y 360).
Definir el tono objetivo	Gira suavemente el modelo hasta el tono especificado (rotación alrededor del eje longitudinal).	Tono objetivo: ángulo de tono expresado en grados.
Aumentar el tono objetivo	Gira el modelo suavemente hacia el tono objetivo en la cantidad especificada. Si el modelo ya ha alcanzado el tono objetivo, esta acción no tendrá ningún efecto.	Tono delta: número de grados que se deben añadir al tono actual.
Definir el zoom objetivo	Amplía suavemente hasta el nivel de zoom especificado.	Zoom objetivo: nivel de zoom (en metros).
Incrementar el zoom objetivo	Incrementa el zoom objetivo (en metros).	Zoom delta: utiliza un valor negativo para ampliar.
Definir el punto pivote objetivo	Cambia el punto en torno al cual se produce la rotación y mueve la cámara suavemente hasta donde pueda orbitar alrededor de ese punto.	Punto pivote objetivo "x": posición "x" (en metros). Punto pivote objetivo "y": posición "y" (en metros). Punto pivote objetivo "z": posición "z" (en metros).
Definir el desplazamiento local objetivo	Cambia suavemente la cámara a una nueva posición.	Desplazamiento local objetivo "x" (en metros). Desplazamiento local objetivo "y" (en metros).
Definir el color del material	Define el color del material.	Nombre del material. Rojo: valor rojo del nuevo color (entre 0 y 1). Verde: valor verde del nuevo color (entre 0 y 1). Azul: valor azul del nuevo color (entre 0 y 1).
Reproducir la animación	Reproduce la animación especificada.	Nombre de la animación.
Pausar la animación	Pausa la animación especificada.	Nombre de la animación.
Definir el tiempo de la animación	Busca el tiempo especificado durante una animación.	Nombre de la animación. Tiempo de la animación: tiempo de búsqueda (en segundos).
Mirar al hotspot	Mueva y gire la cámara para centrarse en el hotspot especificado (definido en el editor de Poly). Esta acción es experimental y puede que no siempre funcione según lo previsto.	Nombre del hotspot

Cuando seleccione una de estas acciones en el cuadro de diálogo Evento, defina el componente Modelo 3D como receptor.

Métodos avanzados (mediante API)

Hay métodos adicionales disponibles mediante la API 3D Model Viewer. Defina una acción personalizada que utilice handleMessage() mediante la transferencia de un objeto que contenga el nombre y los parámetros del método.

Ejemplo:

document.querySelector("gwd-3d-model").handleMessage({
name: 'animateCamera',
cameraPosition: {x: 1, y: 1, z: 1},
pivotPosition: {x: 0, y: 0, z: 0},
duration: 1
});

addHotspot()

Permite crear un hotspot en la posición especificada.

Parámetros:

• hotspotName: nombre del hotspot como una cadena
• x: posición "x" como un número flotante
• y: posición "y" como un número flotante
• z: posición "z" como un número flotante

animateCamera()

Permite mover la cámara a la posición especificada y la dirige hacia un punto específico.

Parámetros:

• cameraPosition: objeto que contiene las coordenadas "x", "y" y "z" de la posición del espacio mundial a las que se debe mover la cámara
• pivotPosition: objeto que contiene las coordenadas "x", "y" y "z" de la posición del espacio mundial hacia las que debe apuntar la cámara
• duration: tiempo que debe durar la animación en milisegundos (0 cambia la cámara al instante)

incrementAnimationTime()

Permite avanzar la animación el número de segundos especificado.

Parámetros:

• animationName: nombre de la animación como una cadena
• time: cantidad de tiempo que se debe incrementar, en segundos

setBgColor()

Permite definir el color de fondo del visor.

Parámetros:

• r: valor rojo como un número flotante entre 0 y 1
• g: valor verde como un número flotante entre 0 y 1
• b: valor azul como un número flotante entre 0 y 1

setHotspotVisible()

Permite definir si un hotspot es visible o invisible.

Parámetros:

• hotspotName: nombre del hotspot como una cadena
• isVisible: indica si el hotspot debe ser visible, como un valor booleano

setIblAtlas()

Permite definir la iluminación del entorno.

Parámetros:

• iblUrl: URL de la imagen que debe usarse en la iluminación basada en imágenes, como una cadena
• intensity: intensidad de la luz como un número flotante entre 0 y 1
• roughness: aspereza como un número flotante entre 0 y 1
• setBackground: indica si se debe aplicar la iluminación al fondo como un valor booleano

setLight()

Permite ajustar la intensidad de la iluminación al valor especificado.

Parámetros:

• intensity: intensidad de la luz como un número flotante entre 0 y 1
• lightType: tipo de luz como una cadena (utiliza hemi para la iluminación del hemisferio)

setMaterialClearCoat()

Permite definir la capa transparente de material.

Parámetros:

• material: nombre del material como una cadena
• value: cantidad de capa transparente como un número flotante entre 0 y 1
• roughness: aspereza como un número flotante entre 0 y 1

setMaterialEmissive()

Permite definir el color de un material emisor de luz.

Parámetros:

• material: nombre del material como una cadena
• r: valor rojo como un número flotante entre 0 y 1
• g: valor verde como un número flotante entre 0 y 1
• b: valor azul como un número flotante entre 0 y 1

Vista previa

No se puede obtener una vista previa de este componente dentro de la interfaz de Google Web Designer. Para ver cómo funciona, obtenga una vista previa del documento en su navegador haciendo clic en el botón Vista previa , situado en la esquina superior derecha.