Hay un tipo de sección que cada vez aparece más en sitios web premium: un modelo 3D que gira solo, que puedes mover con el mouse, y que convierte cualquier hero section en algo que el visitante no olvida. Se ve complejo de implementar pero con las herramientas correctas es más accesible de lo que parece.
En este tutorial aprenderás el flujo completo: dónde conseguir modelos 3D de calidad de forma gratuita, cómo optimizarlos para web, cómo subirlos a WordPress y cómo configurarlos en Divi con el plugin OV GLB Viewer — un módulo nativo que desarrollé específicamente para esto.
¿Qué cubre el tutorial?
Dónde conseguir modelos 3D gratis — exploramos las principales fuentes: Meshy para generar modelos con inteligencia artificial desde texto o imagen, y Sketchfab para descargar modelos profesionales bajo licencia libre. Aprenderás a identificar qué modelos son aptos para proyectos de clientes y cuáles no.
Cómo optimizar el GLB para web — los modelos crudos pueden pesar 30 MB o más. Mostramos cómo usar gltf.report, una herramienta 100% web sin instalar nada, para comprimir el archivo con Draco y dejarlo en 5–10 MB sin perder calidad visual.
Cómo importarlo a WordPress — el plugin incluye soporte nativo para subir archivos GLB al Media Library, algo que WordPress no permite por defecto. Sin configuración extra.
Cómo configurarlo en Divi — el módulo OV GLB Viewer aparece directamente en el panel de módulos de Divi. El tutorial explica cada opción en detalle para que puedas adaptarlo a cualquier modelo y cualquier diseño.
Lo que aprendes a configurar
El módulo tiene cinco secciones que el tutorial explica una por una:
Modelo 3D — cómo pegar la URL del GLB, ajustar la escala, mover el modelo dentro del canvas y definir su rotación inicial.
Cámara — el primer ajuste que debes hacer con cualquier modelo nuevo. Controla cuánto del modelo es visible y evita que se corte en los bordes.
Animación — velocidad de rotación automática, dirección, e interactividad con mouse y touch.
Luces — tres luces configurables con color e intensidad, o modo neutro que muestra el modelo tal como fue diseñado sin alterar sus colores originales.
Responsive — cómo definir valores independientes de escala, cámara y alto del canvas para desktop, tablet y móvil.
¿Qué incluye el plugin?
El OV GLB Viewer es un módulo nativo para Divi 4 y Divi 5 con las siguientes opciones integradas:
- Modelo 3D — URL del archivo GLB, escala, posición horizontal y vertical, rotación inicial y fondo transparente
- Cámara — control de distancia con valores por dispositivo
- Animación — velocidad de rotación del 0 al 100, dirección izquierda/derecha, toggle de interactividad mouse/touch
- Luces — luz ambiente, luz principal y luz de relleno, cada una con color e intensidad independientes, más modo de iluminación neutra
- Responsive nativo — escala, posición, cámara y alto del canvas configurables de forma independiente para desktop, tablet y móvil
Lo que te llevas al final
Al terminar el tutorial tienes acceso en la pestaña de materiales a:
- El plugin OV GLB Viewer listo para instalar — exclusivo para suscriptores
- Un JSON de sección hero lista para importar en Divi, con el modelo 3D configurado y un sistema de partículas flotantes integrado en la sección que puedes reutilizar en cualquier otro proyecto o página
Las partículas son un efecto extra que complementa perfectamente cualquier sección con modelo 3D y que puedes adaptar a tus propios diseños cambiando color, cantidad y velocidad.
0 comentarios