Este componente no puede utilizarse para crear anuncios de Google Ads ni de Google AdMob, ni tampoco anuncios AMP HTML, anuncios de vídeo o anuncios de imagen.
El componente Visor de modelos 3D le permite insertar en sus anuncios un modelo 3D con formato GLB que los usuarios pueden girar, mover, ampliar o reducir. También puede configurar el modelo en el editor 3D de Google Web Designer.
3D Model Editor - Car configurator and hyper-casual game tutorial in Google Web Designer
Compatibilidad del navegador
Microsoft Edge no es compatible con el componente Visor de modelos 3D.
Para añadir el componente Visor de modelos 3D a su proyecto, haga lo siguiente:
- Abra el panel Componentes y, a continuación, la carpeta Gráficos y efectos.
- Arrastre el componente Visor de modelos 3D a la escena.
- En la sección Visor de modelos 3D del panel Propiedades, introduzca el archivo GLB que quiera utilizar como Ruta. Haga clic en el botón Explorar para seleccionar un archivo de su sistema de archivos.
- En la escena, haga doble clic en el componente para abrir el cuadro de diálogo Editor 3D y configurar el modelo. Cuando haya terminado, haga clic en Guardar.
Puede configurar las preferencias de Google Web Designer (Editar > Preferencias) > Componentes) para crear automáticamente un componente Visor de modelos 3D al arrastrar un archivo GLB a la escena.
Propiedades
Las propiedades del componente están en el panel Propiedades. Debe salir del editor 3D.
Propiedad | Descripción |
---|---|
Nombre |
Nombre del componente Visor de modelos 3D. |
Ruta |
Archivo GLB de origen del recurso 3D. El archivo del recurso debe tener un tamaño de 3 MB o inferior. Consulte la Guía de recursos en 3D para ver más directrices y utilice Khronos glTF Validator para comprobar que el archivo GLB sea válido. |
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. |
Editor 3D
Para abrir el cuadro de diálogo del editor 3D, siga estos pasos:
- En la escena, haga doble clic en el componente Visor de modelos 3D.
Se mostrará una vista previa del modelo 3D que puede girar y ampliar o reducir. También puede interactuar con cualquier hotspot.
Puede configurar el modelo en el panel de la derecha. Las opciones de configuración se organizan en dos pestañas principales: GLB y Componente.
Pestaña GLB
Los cambios realizados en la pestaña GLB se guardan en el archivo de origen del modelo, situado en su carpeta de recursos. También se guardan en el archivo GLB todos los archivos de imagen utilizados como texturas. Puede configurar las preferencias de Google Web Designer para que se eliminen automáticamente las texturas que no se utilicen.
Información sobre GLB |
|
---|---|
Ruta |
Archivo GLB de origen del modelo 3D. Este campo es de solo lectura. Para cambiar el archivo de origen, salga del cuadro de diálogo Editor 3D y edite la propiedad Ruta del componente, que se encuentra en el panel Propiedades. |
Detalles |
Tamaño: tamaño del archivo de origen. |
Materiales |
|
Materiales |
Puede configurar los materiales de uno en uno.
|
Color básico |
Color y textura iniciales que se van a usar en el material actual. |
Metálico/Rugosidad |
Las propiedades Metálico y Rugosidad determinan el modo en que la luz se refleja en el material.
|
Mapa normal |
Seleccione una textura para añadir irregularidades y detalles a la superficie del material. |
Emisivo |
Seleccione un color y una textura para representar el brillo del material. |
Oclusión |
Seleccione una textura para representar sombras creadas por la iluminación ambiental. |
Otros |
Configure otras opciones que afectan al material:
|
Pestaña Componente
Los cambios realizados en la pestaña Componente se reflejan en el componente Visor de modelos 3D, no en el archivo GLB de origen subyacente.
Archivos HDR
Los archivos de imagen HDR (alto rango dinámico) se pueden utilizar para el fondo y la iluminación ambiental en el componente Visor de modelos 3D. Cada archivo HDR debe tener un tamaño inferior a 150 kB. Le recomendamos que modifique el tamaño de los archivos HDR grandes a 256x128 para que se ajusten a este límite.
Presentación |
|
---|---|
Fondo |
Imagen: seleccione una imagen o un entorno (un archivo HDR) para el fondo. Puede estar vinculado con datos dinámicos. |
Iluminación ambiental (HDR) |
Puede utilizar una iluminación basada en imágenes para conseguir un efecto de luz detallado a partir de un entorno real.
|
Animaciones |
Si el archivo GLB de origen contiene animaciones, puede configurar una animación para que se reproduzca automáticamente. Por el momento, no se pueden crear animaciones en el editor 3D.
|
Cámara |
|
Vista inicial de la cámara |
Determina la configuración de la cámara cuando se carga el componente. Se aplica cualquiera de los siguientes límites de rotación y de zoom de la cámara que se defina.
|
Giro orbital |
Punto del espacio 3D sobre el que gira la cámara. De manera predeterminada, está fijado en el centro del modelo 3D.
|
Campo de visión |
Campo de visión vertical de la cámara.
|
Límites de rotación de la cámara |
Si quiere restringir el grado hasta el que los usuarios pueden rotar el modelo, seleccione las casillas Guiñada o Inclinación y defina los ángulos mínimo y máximo.
|
Límites de zoom de la cámara |
|
Hotspots |
|
Hotspots |
Los hotspots son puntos del modelo 3D con los que los usuarios pueden interactuar. Puede mostrar tarjetas de información o configurar eventos que se activen como respuesta a clics en hotspots.
|
Imagen |
Puede personalizar el aspecto de los hotspots especificando imágenes para diferentes estados. Todos los hotspots utilizan el mismo conjunto de imágenes.
|
Estilos de tarjeta de información |
Defina los colores de la tarjeta de información para personalizar su apariencia.
|
Eventos y acciones
EventosEl panel Eventos se puede utilizar para activar otras acciones en un anuncio. El componente Visor de modelos 3D envía los siguientes eventos:
Evento | Descripción |
---|---|
Escena 3D 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. Si el usuario ajusta la cámara, el objeto event.detail contiene la propiedad source: user-interaction . |
Se ha hecho clic en el hotspot | Se envía cuando se hace clic en un hotspot (se definen en el editor 3D). El objeto event.detail contiene el nombre del hotspot en el que se ha hecho clic, su índice en 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 Visor de modelos 3D como objetivo.
Las acciones del componente Visor de modelos 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. |
|
Cuando seleccione una de estas acciones en el cuadro de diálogo Evento, defina el componente Visor de modelos 3D como receptor.
Puede utilizar un método adicional mediante código personalizado.
getCameraDetails()
Devuelve un objeto con detalles sobre la configuración actual de la cámara.
Propiedades del objeto devuelto:
- yaw: rotación en el eje vertical, expresada en grados.
- pitch: rotación en el eje horizontal, expresada en grados.
- zoom: nivel de zoom, expresado en metros.
- x: posición "x" sobre la que gira la cámara, expresada en metros.
- y: posición "y" sobre la que gira la cámara, expresada en metros.
- z: posición "z" sobre la que gira la cámara, expresada en metros.
Los usuarios avanzados también pueden consultar la documentación en https://modelviewer.dev.
Vista previa
Solo se puede obtener una vista previa del componente Visor de modelos 3D en el editor 3D o en el navegador. Para ello, haga clic en el botón Vista previa, situado en la esquina superior derecha.