Torna al blog BIM i IFC
Eines i comparatives · 2026-10-01 · 9 min
Com incrustar un visor IFC en un web, un CDE o un informe de Power BI
Un model 3D interactiu en una proposta, una pàgina de projecte, un tauler de CDE o un quadre de comandament de Power BI, amb un sol iframe, sense compilar res i sense pujar el model al servidor de ningú. Què fan els paràmetres d'URL i quan necessites l'SDK.
Com incrustar un visor IFC en un web, un CDE o un informe de Power BI — IFC Viewer Online article cover
Les captures d'un model BIM són una cosa estranya de posar en una proposta. La gràcia del model és que és tridimensional i ple de dades, i la captura llença totes dues coses. Un visor incrustat les conserva: el lector pot orbitar, seccionar, clicar un element i llegir-ne les propietats, en qualsevol dispositiu i sense instal·lar res.
Fer-ho costa un iframe. Fer-ho bé exigeix conèixer quatre paràmetres i una regla de seguretat del navegador.
L'embed mínim
<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 visitant descarrega l'IFC directament des del teu servidor i el processa en local. El model no es puja mai als nostres servidors, que sol ser la primera pregunta de qualsevol que hagi signat un NDA, i una diferència real davant dels embeds que t'obliguen a pujar abans el model al núvol d'un fabricant.
Crea el teu embed
Enganxa una URL pública d'IFC, tria un mode i copia l'iframe. La previsualització s'actualitza en directe.
Obre IFC Viewer
Els paràmetres que val la pena conèixer
| Paràmetre | Què fa | Fes-lo servir per a |
|---|
| model | Carrega una o diverses URL d'IFC (separades per comes per a un conjunt federat) | Tot |
| ui | Mode d'interfície: minimal, full, kiosk o client | Adaptar-te al públic |
| validate | Executa la validació en carregar i mostra el Health Score | Mostrar qualitat, no només geometria |
| isolate / select | Obre amb una classe IFC aïllada o un element seleccionat | Assenyalar allò de què estàs escrivint |
| accent | Tenyeix el visor amb un color hexadecimal | Quadres de comandament i pàgines amb marca |
| lang | Força l'idioma de la interfície | Webs localitzats |
| map | Col·loca el model sobre el mapa base a partir de la seva georeferenciació | Context de l'emplaçament en propostes |
La referència completa, inclosos els estudis solars i els núvols de punts, és a la documentació d'embeds.El mode ui és el que més importa. minimal és l'adequat per a articles de blog i documentació. kiosk ho treu tot per a pantalles en un vestíbul o una oficina de vendes. client està pensat per enviar a la propietat: una vista neta i un distintiu de qualitat, sense les eines que necessita un coordinador i un client no.
On funciona
- Webs i blogs: qualsevol CMS que accepti HTML, com WordPress, Webflow, Ghost o un web estàtic.
- Power BI: un objecte visual de contingut web o de visor HTML, amb accent ajustat al tema de l'informe. Un model al costat dels gràfics de cost i termini que explica.
- Notion, Confluence, SharePoint: enganxa l'URL com a bloc incrustat.
- Taulers de CDE i eines internes: un iframe, amb esdeveniments de cicle de vida enviats a la finestra pare perquè la plataforma reaccioni quan el model estigui llest o validat.
- Propostes i licitacions: com a enllaç si el format no admet embeds. Un enllaç a un model viu en una oferta continua sent prou rar per cridar l'atenció.
Per què no carrega: CORS i dues causes més
El model viatja del teu emmagatzematge al navegador del visitant. Sense capçalera CORS al servidor, el navegador es nega a lliurar-lo.
- Enllaços compartits que retornen una pàgina web, no el fitxer. Els enllaços de Dropbox, OneDrive i Google Drive solen obrir una pàgina de previsualització; necessites la forma de descàrrega directa de l'enllaç.
- Enllaços que exigeixen iniciar sessió. El navegador del visitant no té sessió al teu CDE, així que un enllaç privat retorna una pàgina d'accés.
- Fitxers molt grans en servidors lents. El model es descarrega sencer abans de processar-se; allotja els conjunts federats grans en un lloc ràpid i planteja't dividir-los.
Si els models són massa grans per incrustar-los amb comoditat, com reduir la mida d'un fitxer IFC explica les reduccions segures.
Quan un iframe no n'hi ha prou: l'SDK
Un iframe mostra un model. Tan bon punt la teva pàgina necessita parlar-hi —ressaltar un element en clicar una fila de la teva taula, portar el Health Score al teu quadre de comandament, executar una especificació IDS i llistar els errors a la teva pròpia interfície, llançar un recorregut guiat—, el que vols és l'SDK. Embolcalla el mateix visor amb una API tipada i bidireccional, disponible com a script o com a web component <ifc-viewer>.
Si prefereixes construir el teu propi visor a partir de les biblioteques de base, veure IFC al web amb three.js i Fragments explica què implica, i per què la majoria d'equips que comencen per aquí acaben incrustant.
En projectes confidencials, la mateixa arquitectura al client que fa funcionar els embeds és la que manté el model fora de servidors de tercers; els detalls són a visors IFC per a projectes confidencials i amb NDA.
Com incrustar un visor IFC en un web, un CDE o un informe de Power BI