Volver al blog BIM e IFC
Herramientas y comparativas · 2026-10-01 · 9 min
Cómo incrustar un visor IFC en una web, un CDE o un informe de Power BI
Un modelo 3D interactivo en una propuesta, una página de proyecto, un panel de CDE o un cuadro de mando de Power BI, con un solo iframe, sin compilar nada y sin subir el modelo al servidor de nadie. Qué hacen los parámetros de URL y cuándo necesitas el SDK.
Cómo incrustar un visor IFC en una web, un CDE o un informe de Power BI — IFC Viewer Online article cover
Las capturas de un modelo BIM son algo raro de meter en una propuesta. La gracia del modelo es que es tridimensional y está lleno de datos, y la captura tira ambas cosas. Un visor incrustado las conserva: el lector puede orbitar, seccionar, hacer clic en un elemento y leer sus propiedades, en cualquier dispositivo y sin instalar nada.
Hacerlo cuesta un iframe. Hacerlo bien exige conocer cuatro parámetros y una regla de seguridad del navegador.
El embed mínimo
<iframe
src="https://www.ifcvieweronline.eu/?model=https://your-host.com/model.ifc&embed=1"
width="100%" height="600"
style="border:0;border-radius:12px;max-width:100%"
loading="lazy" allow="fullscreen"
title="3D IFC model">
</iframe>
El navegador del visitante descarga el IFC directamente desde tu servidor y lo procesa en local. El modelo nunca se sube a nuestros servidores, que suele ser la primera pregunta de cualquiera que haya firmado un NDA, y una diferencia real frente a los embeds que te obligan a subir antes el modelo a la nube de un fabricante.
Crea tu embed
Pega una URL pública de IFC, elige un modo y copia el iframe. La vista previa se actualiza en directo.
Abrir IFC Viewer
Los parámetros que vale la pena conocer
| Parámetro | Qué hace | Úsalo para |
|---|
| model | Carga una o varias URL de IFC (separadas por comas para un conjunto federado) | Todo |
| ui | Modo de interfaz: minimal, full, kiosk o client | Adaptarte al público |
| validate | Ejecuta la validación al cargar y muestra el Health Score | Mostrar calidad, no solo geometría |
| isolate / select | Abre con una clase IFC aislada o un elemento seleccionado | Señalar aquello de lo que estás escribiendo |
| accent | Tiñe el visor con un color hexadecimal | Cuadros de mando y páginas con marca |
| lang | Fuerza el idioma de la interfaz | Webs localizadas |
| map | Coloca el modelo sobre el mapa base a partir de su georreferenciación | Contexto del emplazamiento en propuestas |
La referencia completa, incluidos los estudios solares y las nubes de puntos, está en la documentación de embeds.El modo ui es el que más importa. minimal es el adecuado para artículos de blog y documentación. kiosk lo quita todo para pantallas en un vestíbulo o una oficina de ventas. client está pensado para enviar a la propiedad: una vista limpia y un distintivo de calidad, sin las herramientas que necesita un coordinador y un cliente no.
Dónde funciona
- Webs y blogs: cualquier CMS que acepte HTML, como WordPress, Webflow, Ghost o una web estática.
- Power BI: un objeto visual de contenido web o de visor HTML, con accent ajustado al tema del informe. Un modelo junto a los gráficos de coste y plazo que explica.
- Notion, Confluence, SharePoint: pega la URL como bloque incrustado.
- Paneles de CDE y herramientas internas: un iframe, con eventos de ciclo de vida enviados a la ventana padre para que la plataforma reaccione cuando el modelo esté listo o validado.
- Propuestas y licitaciones: como enlace si el formato no admite embeds. Un enlace a un modelo vivo en una oferta sigue siendo lo bastante raro como para llamar la atención.
Por qué no carga: CORS y otras dos causas
El modelo viaja de tu almacenamiento al navegador del visitante. Sin cabecera CORS en el servidor, el navegador se niega a entregarlo.
- Enlaces compartidos que devuelven una página web, no el archivo. Los enlaces de Dropbox, OneDrive y Google Drive suelen abrir una página de vista previa; necesitas la forma de descarga directa del enlace.
- Enlaces que exigen iniciar sesión. El navegador del visitante no tiene sesión en tu CDE, así que un enlace privado devuelve una página de acceso.
- Archivos muy grandes en servidores lentos. El modelo se descarga entero antes de procesarse; aloja los conjuntos federados grandes en un sitio rápido y plantéate dividirlos.
Si los modelos son demasiado grandes para incrustarlos con comodidad, cómo reducir el tamaño de un archivo IFC explica las reducciones seguras.
Cuando un iframe no basta: el SDK
Un iframe muestra un modelo. En cuanto tu página necesita hablar con él —resaltar un elemento al hacer clic en una fila de tu tabla, llevar el Health Score a tu cuadro de mando, ejecutar una especificación IDS y listar los fallos en tu propia interfaz, lanzar un recorrido guiado—, lo que quieres es el SDK. Envuelve el mismo visor con una API tipada y bidireccional, disponible como script o como web component <ifc-viewer>.
Si prefieres construir tu propio visor a partir de las librerías de base, ver IFC en la web con three.js y Fragments explica lo que implica, y por qué la mayoría de equipos que empiezan por ahí acaban incrustando.
En proyectos confidenciales, la misma arquitectura en el cliente que hace funcionar los embeds es la que mantiene el modelo fuera de servidores de terceros; los detalles están en visores IFC para proyectos confidenciales y con NDA.
Cómo incrustar un visor IFC en una web, un CDE o un informe de Power BI