El componente Visor de modelos 3D y el editor 3D

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:

1. Abra el panel Componentes y, a continuación, la carpeta Gráficos y efectos.
2. Arrastre el componente Visor de modelos 3D a la escena.
3. 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.
4. 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. Seleccionado: todos los materiales utilizados en el modelo 3D se muestran en este menú desplegable. Seleccione el material que quiera ver o editar.
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. Textura: seleccione una textura para indicar qué partes del material son metálicas. Metálico: valor entre 0 y 1 que indica cómo de metálico es el material. Cuanto más metálico sea el material, más reflejará su entorno. Rugosidad: valor entre 0 y 1 que indica cómo de mate es el material, lo que afecta a la nitidez de los reflejos. El valor 0 hace que el material sea totalmente reflectante y 1 que sea totalmente mate.
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: Dos caras: seleccione esta casilla para hacer que el material tenga dos caras. Mezcla alfa: seleccione cómo deben tratarse los valores alfa (transparencia) de las texturas. Opaco: los valores alfa se ignoran y la textura siempre es totalmente opaca. Mezcla: los valores alfa entre 0 y 1 son translúcidos. Máscara: las partes de la textura son completamente opacas o completamente transparentes, según la relación entre su valor alfa y el valor del ajuste Límite alfa. Los valores alfa superiores al límite alfa se tratan como opacos.

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. Imagen: seleccione una imagen esférica en formato HDR que quiera utilizar. Puede estar vinculado con datos dinámicos. Exposición: el nivel de exposición. Intensidad de sombra: la opacidad de las sombras. Suavidad de sombra: el desenfoque de las sombras.
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. Predeterminada: seleccione una animación para utilizarla como predeterminada. Reproducción automática: marque esta casilla para reproducir la animación predeterminada en cuanto se cargue el componente. Definir el límite de la animación: seleccione esta casilla e introduzca el número de segundos durante el que quiere que se reproduzca la animación antes de que se detenga automáticamente.
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. Guiñada: rotación de la cámara en un eje vertical, expresada en grados. Inclinación: rotación de la cámara en un eje horizontal, expresada en grados. Zoom: cercanía de la cámara al modelo. Utilizar actual como inicial: haga clic en este botón si ha ajustado la vista de la cámara en la vista previa del cuadro de diálogo Editor 3D y quiere usar la vista actual como inicial.
Giro orbital	Punto del espacio 3D sobre el que gira la cámara. De manera predeterminada, está fijado en el centro del modelo 3D. X: posición "x" del giro orbital. Y: posición "y" del giro orbital. Z: posición "z" del giro orbital. Restablecer: restaura las coordenadas predeterminadas del giro orbital.
Campo de visión	Campo de visión vertical de la cámara. Ángulo: ángulo entre 1° y 179°.
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. Guiñada (lateral): rotación máxima de la cámara en un eje vertical. Inclinación (arriba y abajo): rotación máxima de la cámara en un eje horizontal.
Límites de zoom de la cámara	Tipo: seleccione si quiere definir restricciones en la capacidad de los usuarios para hacer zoom: Distancia de cámara ilimitada: sin restricciones. Esta es la selección predeterminada. Distancia de cámara limitada: defina un nivel de zoom mínimo y máximo; el valor Mínimo debe ser menor que el Máximo. Distancia de cámara fijada: el usuario no puede cambiar el nivel de zoom. Los niveles de zoom Mínimo y Máximo deben tener el mismo valor.
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. Añadir hotspot: crea un hotspot. Después de seleccionar este botón, haga clic en el lugar del modelo 3D en el que quiere añadir el hotspot. Puede personalizar el hotspot en los campos que aparecen a continuación. Nombre: nombre del hotspot. Para eliminar un hotspot, haga clic en el icono Eliminar  situado junto a su nombre. Tarjeta de información: determina si se invoca una tarjeta de información cuando el usuario hace clic en el hotspot: Ninguna: no se invoca ninguna tarjeta de información. Tarjeta de información: se invoca una tarjeta de información. Título: título que se muestra en la tarjeta de información. Puede estar vinculado con datos dinámicos. Descripción: texto que se muestra en la tarjeta de información. Puede estar vinculado con datos dinámicos.
Imagen	Puede personalizar el aspecto de los hotspots especificando imágenes para diferentes estados. Todos los hotspots utilizan el mismo conjunto de imágenes. Arriba: imagen predeterminada que se utiliza cuando el usuario no interactúa con el hotspot. Abajo: imagen que se utiliza cuando el usuario hace clic en un hotspot. Sobre: imagen que se utiliza cuando el usuario coloca el cursor sobre un hotspot. Tamaño: anchura y altura de un hotspot.
Estilos de tarjeta de información	Defina los colores de la tarjeta de información para personalizar su apariencia. Color de la fuente: color del título y del texto de la tarjeta de información. Color del fondo: color del fondo de la tarjeta de información. Color del borde: color del borde de la tarjeta de información.

Eventos y acciones

Eventos

El 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.

Acciones

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.	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).

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

Métodos de la API avanzada

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.