3D Model Viewer: glTF y GLB online
Visor online de modelos 3D glTF y GLB con controles de órbita, 5 presets de iluminación, exposición, sombras y exportación de capturas.
¿Qué es el visor 3D glTF/GLB?
El visor 3D glTF/GLB te permite abrir e inspeccionar archivos .gltf y .glb directamente en el navegador — sin instalar software, sin cuenta y sin subir archivos a un servidor. Arrastra un modelo y orbita, amplía y desplaza la vista con el ratón. La herramienta usa el componente web model-viewer de Google, el mismo renderizador de calidad de producción que emplean las vistas previas de productos 3D en Google Search y AR Quick Look. Puedes cambiar entre cinco presets de iluminación de entorno, ajustar la exposición e intensidad de sombras, activar o desactivar la rotación automática y exportar una captura de la vista actual.
Funcionalidades principales
- Drag & drop de glTF y GLB — arrastra un archivo
.gltfo.glb; las extensiones no compatibles muestran un error antes de cargar - Controles de órbita, zoom y desplazamiento — clic izquierdo + arrastrar para orbitar, rueda para zoom, clic derecho + arrastrar para desplazar;
camera-controlsestá activado en el elemento<model-viewer> - Rotación automática — un interruptor activa o desactiva el atributo
auto-rotateen el componente<model-viewer>; activado por defecto - Cinco presets de iluminación — Neutral, Warm, Legacy, Commerce, Spruit Sunrise; corresponden directamente al atributo
environment-image - Ajuste de exposición — control deslizante de 0.1 a 3.0 (paso 0.1); valor por defecto 1.0
- Ajuste de intensidad de sombra — control deslizante de 0.0 a 2.0 (paso 0.1); valor por defecto 1.0; corresponde al atributo
shadow-intensity - Exportar captura — llama a
modelViewer.toBlob()y guarda como{nombreModelo}_{relaciónAspecto}_{iluminación}_{resolución}.png - Presets de relación de aspecto — elige entre Libre, 1:1, 4:3, 16:9, 9:16, 3:2 y 21:9 para enmarcar capturas
- Múltiples métodos de carga — sube un solo archivo .gltf/.glb, un archivo ZIP con un bundle glTF o una carpeta completa
- Basado en Google model-viewer — renderizado WebGL de calidad de producción con soporte de materiales PBR (renderizado físicamente basado)
Cómo usar el visor 3D glTF/GLB
Paso 1: Cargar el modelo 3D
Abre el visor 3D glTF/GLB. Arrastra un archivo .gltf o .glb desde tu sistema de archivos a la zona de carga. Alternativamente, haz clic en la zona de carga para abrir el selector de archivos (el atributo accept está fijado en .gltf,.glb). El modelo se carga usando una URL de objeto local — no se envían datos por la red.
Si sueltas un archivo con una extensión no compatible, aparece una notificación indicando "Archivo inválido" y no se carga nada.
Paso 2: Navegar por el modelo
Una vez cargado, el visor muestra el modelo en un viewport de 500 px de alto. Usa el ratón para navegar:
- Clic izquierdo y arrastrar — orbitar alrededor del modelo
- Rueda del ratón — acercar y alejar
- Clic derecho y arrastrar — desplazar la cámara
Los gestos táctiles funcionan de manera equivalente en móviles: arrastrar con un dedo para orbitar, pellizcar para zoom, arrastrar con dos dedos para desplazar.
El nombre del modelo aparece en el panel de controles en fuente monoespaciada. Haz clic en Cargar nuevo modelo en cualquier momento para descargar el modelo actual y volver a la zona de carga.
Paso 3: Ajustar la iluminación
En el panel de controles de la derecha, selecciona uno de los cinco presets de iluminación de entorno haciendo clic en su nombre:
| Preset | Carácter |
|---|---|
| Neutral | Luz blanca equilibrada de estudio |
| Warm | Tonos ámbar cálidos, como el sol de última hora de la tarde |
| Legacy | Renderizado clásico de visores antiguos |
| Commerce | Alto contraste, aspecto limpio para fotografía de producto |
| Spruit Sunrise | Exterior al amanecer con matiz de color natural |
El preset seleccionado se resalta con un fondo relleno. Los cambios se aplican al instante — no se necesita recargar.
Paso 4: Ajustar exposición y sombra
Debajo de los presets de iluminación, dos controles deslizantes te dan control adicional:
- Exposición (0.1–3.0) — aumenta o disminuye el brillo general de la escena. Un valor de 1.0 es la referencia neutra. Prueba 1.5–2.0 para modelos oscuros que necesiten más brillo.
- Intensidad de sombra (0.0–2.0) — controla lo nítida y oscura que aparece la sombra proyectada bajo el modelo. Pon 0.0 para eliminar la sombra por completo.
Ambos valores actualizan los atributos de <model-viewer> en tiempo real.
Paso 5: Activar rotación automática y exportar captura
Usa el interruptor Rotación automática para que el modelo gire lentamente sobre su eje vertical o detener ese giro. La rotación automática está activa por defecto, lo que permite ver el modelo completo sin usar las manos.
Cuando tengas la vista posicionada como quieras, haz clic en Captura. La herramienta captura el render actual y descarga el resultado como archivo PNG nombrado con el nombre del modelo, la relación de aspecto, el preset de iluminación y la resolución. También puedes elegir una resolución de captura específica en el panel — las opciones son Viewport (tamaño actual), 720p, 1080p, 2K y 4K.
Ejemplos prácticos
Revisar un asset de juego antes de integrarlo
Un desarrollador de videojuegos recibe un modelo de personaje como player-character.glb. Lo arrastra al visor para verificar que el asset se ve correctamente: comprueba que las texturas se aplican bien bajo iluminación Neutral y cambia a iluminación Warm para ver cómo queda el personaje en una escena exterior. Exporta una captura para adjuntarla al ticket de revisión.
Comprobar un modelo de producto para un listado de e-commerce
Un equipo de comercio electrónico recibe un modelo 3D de producto de un proveedor en formato .glb. Lo cargan en el visor, seleccionan el preset Commerce (optimizado para fotografía de producto limpia), ajustan la exposición a 1.4 para mayor claridad y reducen la intensidad de sombra a 0.5 para un aspecto más suave. Exportan una captura para usarla como imagen estática de reserva en la página del producto.
Validar una exportación glTF desde Blender
Un artista 3D exporta una escena desde Blender como archivo .gltf y lo abre en el visor para una comprobación rápida: ¿carga el modelo sin errores?, ¿los materiales renderizan con colores correctos?, ¿la escala es razonable? Los controles de órbita permiten examinar todos los lados rápidamente. El preset Spruit Sunrise ayuda a verificar cómo queda el modelo bajo luz exterior natural.
Consejos y buenas prácticas
El parámetro idealAspect: true en la exportación de captura hace que la imagen capturada coincida con la relación de aspecto actual del visor en lugar de forzar un recorte cuadrado. Si tu modelo es más ancho que alto, la captura lo reflejará.
El componente web model-viewer es compatible con materiales PBR (renderizado físicamente basado) definidos en la especificación glTF. Si un modelo aparece plano o sobreexpuesto, verifica que fue exportado con materiales PBR desde tu software 3D. Los modelos sin datos de material se renderizan con la sombra gris por defecto.
Para archivos .gltf con referencias a texturas externas, la carga mediante el selector de archivos puede fallar porque el navegador no puede acceder a otros archivos del directorio. Usa el formato .glb (que incorpora todas las texturas) para una carga fiable en el navegador.
El visor renderiza a 500 px de alto independientemente de las dimensiones del modelo. Usa los controles de órbita para posicionar el modelo y luego toma la captura — captura el render en las dimensiones reales de visualización.
Problemas comunes y solución de errores
Error "Archivo inválido". La herramienta solo acepta archivos que terminen en .gltf o .glb (comprobación sin distinción de mayúsculas usando .match(/\.(gltf|glb)$/i)). Renombra el archivo si es necesario, o comprueba que tu herramienta de exportación produce el formato correcto.
El modelo carga pero faltan las texturas. Si cargas un archivo .gltf (la variante JSON), los archivos de textura e imágenes de búfer binario asociados deben estar en el mismo directorio. El selector de archivos del navegador solo da acceso al archivo seleccionado individualmente, no al directorio. Usa el formato .glb para agrupar todo en un único archivo.
La captura falla con un toast de "Error de captura". El método model-viewer.toBlob() requiere que WebGL esté disponible. Si tu navegador tiene WebGL desactivado o el controlador gráfico lo bloquea, las capturas fallarán. Comprueba chrome://settings/graphics (Chrome) o el equivalente de tu navegador.
La rotación automática no se detiene. El interruptor de rotación automática controla el atributo auto-rotate en tiempo real. Si al desactivarlo no se detiene la rotación, intenta hacer clic en el modelo para recuperar el control de la cámara (esto también pausa la rotación automática según el comportamiento predeterminado de model-viewer).
Privacidad y seguridad
El visor 3D glTF/GLB carga tus archivos de modelo usando URL.createObjectURL() de forma local en el navegador — los datos nunca salen de tu dispositivo. El componente Google model-viewer se carga como biblioteca JavaScript y renderiza completamente en tu GPU mediante WebGL. Ninguna geometría, textura o metadato del modelo se transmite a ningún servidor. Esto hace que la herramienta sea segura para usar con assets 3D propietarios, productos no publicados o diseños industriales confidenciales.
Preguntas frecuentes
¿Es gratuito el visor 3D glTF/GLB?
Sí, completamente gratuito sin cuenta y sin límites de uso. Forma parte del conjunto de herramientas gratuitas de Glyph Widgets.
¿Funciona el visor 3D glTF/GLB sin conexión?
Una vez cargada la página (incluido el componente @google/model-viewer), puedes cargar y ver archivos de modelo locales sin conexión a internet. La carga inicial de la página requiere acceso a la red para descargar la biblioteca del visor.
¿Están seguros mis datos en el visor 3D glTF/GLB?
Tus archivos de modelo se cargan mediante URL.createObjectURL() y se renderizan localmente en WebGL. No se envía ninguna geometría, textura ni metadato a ningún servidor. El componente model-viewer de Google funciona completamente en el navegador.
¿Qué formatos de archivo admite la herramienta?
Solo .gltf (JSON + archivos externos) y .glb (formato binario empaquetado). Otros formatos 3D (.obj, .fbx, .stl, .dae) no son compatibles. Convierte a glTF usando herramientas como Blender o el conversor glTF de Khronos antes de cargar.
¿Cuál es la diferencia entre glTF y GLB?
glTF es un archivo de texto JSON que referencia búferes binarios e imágenes de textura externos. GLB es el formato de contenedor binario que agrupa el JSON, los búferes y las texturas en un único archivo. Para cargar en el navegador, se recomienda GLB porque todos los assets son autónomos.
¿Cuáles son los presets de iluminación disponibles?
Los cinco presets son: Neutral (iluminación de estudio equilibrada), Warm (tonos ámbar/cálidos), Legacy (renderizado clásico), Commerce (iluminación de producto limpia y de alto contraste) y Spruit Sunrise (luz exterior natural). Corresponden al atributo environment-image del componente model-viewer.
¿Qué hace el control deslizante de exposición?
La exposición ajusta el brillo general de la escena renderizada de 0.1 a 3.0. El valor por defecto es 1.0. Los valores superiores a 1.0 aclaran la escena; los inferiores la oscurecen. Es equivalente a la configuración de exposición en fotografía o en un renderer.
¿Puedo ver modelos glTF animados?
El componente model-viewer admite animaciones glTF, pero la interfaz de Glyph Widgets no expone controles de reproducción para animaciones. La rotación automática es la única función de movimiento en la interfaz actual. Si necesitas previsualizar animaciones glTF, usa una herramienta dedicada como el Khronos glTF Sample Viewer.
¿Con qué resolución se exportan las capturas?
Puedes elegir entre cinco opciones de resolución en el panel: Viewport (tamaño de visualización actual), 720p (1280x720), 1080p (1920x1080), 2K (2560x1440) y 4K (3840x2160). A resolución Viewport, la captura coincide con las dimensiones de visualización del visor. Para resoluciones superiores, la herramienta redimensiona temporalmente el elemento del visor para renderizar a la resolución seleccionada y luego lo restaura.
¿Puedo cargar archivos GLB muy grandes?
No hay un límite de tamaño establecido, pero los archivos grandes (50 MB+) pueden tardar unos segundos en crear la URL de objeto local e inicializar el renderer de model-viewer. El rendimiento depende del navegador, la GPU y la RAM disponible.
Herramientas relacionadas
- Próximamente: Image Converter — convierte entre diferentes formatos de imagen las capturas exportadas desde el visor
- Próximamente: SVG to PNG — convierte assets de diseño en SVG que complementan flujos de trabajo 3D
- Próximamente: EXIF Viewer — inspecciona metadatos en fotografías usadas como imágenes de referencia para modelado 3D
Prueba el visor 3D glTF/GLB ahora: Glyph Widgets glTF/GLB 3D Model Viewer