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:
- Abra el panel Componentes y, a continuación, la carpeta Gráficos y efectos.
- Arrastre el componente Modelo 3D a la escena.
- 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:
Actualizar el recursoPara 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
EventosEl 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.
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. |
|
Definir la guiñada objetivo | Gira suavemente el modelo hasta la guiñada especificada. |
|
Definir el tono objetivo | Gira suavemente el modelo hasta el tono especificado (rotación alrededor del eje longitudinal). |
|
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. |
|
Definir el zoom objetivo | Amplía suavemente hasta el nivel de zoom especificado. |
|
Incrementar el zoom objetivo | Incrementa el zoom objetivo (en metros). |
|
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. |
|
Definir el desplazamiento local objetivo | Cambia suavemente la cámara a una nueva posición. |
|
Definir el color del material | Define el color del material. |
|
Reproducir la animación | Reproduce la animación especificada. |
|
Pausar la animación | Pausa la animación especificada. |
|
Definir el tiempo de la animación | Busca el tiempo especificado durante una animación. |
|
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. |
|
Cuando seleccione una de estas acciones en el cuadro de diálogo Evento, defina el componente Modelo 3D como receptor.
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.