Torna al blog BIM e IFC
Strumenti e confronti · 2026-10-01 · 9 min
Come incorporare un visualizzatore IFC in un sito web, in un CDE o in un report Power BI
Un modello 3D interattivo in una proposta, in una pagina di progetto, in un pannello CDE o in una dashboard Power BI, con un solo iframe, senza build e senza caricare il modello sul server di nessuno. Cosa fanno i parametri URL e quando serve l'SDK.
Come incorporare un visualizzatore IFC in un sito web, in un CDE o in un report Power BI — IFC Viewer Online article cover
Gli screenshot di un modello BIM sono una cosa strana da mettere in una proposta. Il senso del modello è che è tridimensionale e pieno di dati, e lo screenshot butta via entrambe le cose. Un visualizzatore incorporato le conserva: il lettore può orbitare, sezionare, cliccare su un elemento e leggerne le proprietà, su qualsiasi dispositivo, senza installare nulla.
Farlo costa un iframe. Farlo bene richiede di conoscere quattro parametri e una regola di sicurezza del browser.
L'embed minimo
<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>
Il browser del visitatore scarica l'IFC direttamente dal tuo server e lo elabora in locale. Il modello non viene mai caricato da noi, che di solito è la prima domanda di chi ha firmato un NDA, ed è una differenza concreta rispetto agli embed che ti obbligano prima a caricare il modello nel cloud di un fornitore.
Crea il tuo embed
Incolla un URL IFC pubblico, scegli una modalità e copia l'iframe. L'anteprima si aggiorna dal vivo.
Apri IFC Viewer
I parametri che vale la pena conoscere
| Parametro | Cosa fa | Usalo per |
|---|
| model | Carica uno o più URL IFC (separati da virgole per un set federato) | Tutto |
| ui | Modalità dell'interfaccia: minimal, full, kiosk o client | Adattarsi al pubblico |
| validate | Esegue la validazione al caricamento e mostra l'Health Score | Mostrare la qualità, non solo la geometria |
| isolate / select | Si apre con una classe IFC isolata o un elemento selezionato | Indicare ciò di cui stai scrivendo |
| accent | Tinge il visualizzatore con un colore esadecimale | Dashboard e pagine con il proprio brand |
| lang | Forza la lingua dell'interfaccia | Siti localizzati |
| map | Posiziona il modello sulla mappa di base in base alla sua georeferenziazione | Contesto del sito nelle proposte |
Il riferimento completo, compresi studi solari e nuvole di punti, è nella documentazione degli embed.La modalità ui è quella che conta di più. minimal è adatta ad articoli di blog e documentazione. kiosk toglie tutto per schermi in una hall o in un ufficio vendite. client è pensata per l'invio alla committenza: una vista pulita e un badge di qualità, senza gli strumenti che servono a un coordinatore e non a un cliente.
Dove funziona
- Siti e blog: qualsiasi CMS che accetti HTML, come WordPress, Webflow, Ghost o un sito statico.
- Power BI: un oggetto visivo di contenuto web o di visualizzatore HTML, con accent impostato sul tema del report. Un modello accanto ai grafici di costi e tempi che spiega.
- Notion, Confluence, SharePoint: incolla l'URL come blocco incorporato.
- Pannelli CDE e strumenti interni: un iframe, con eventi di ciclo di vita inviati alla finestra padre perché la piattaforma possa reagire quando il modello è pronto o validato.
- Proposte e gare: come link se il formato non ammette embed. Un link a un modello vivo in un'offerta è ancora abbastanza raro da farsi notare.
Perché non si carica: CORS e altre due cause
Il modello va dal tuo storage al browser del visitatore. Senza intestazione CORS sul server, il browser si rifiuta di consegnarlo.
- Link di condivisione che restituiscono una pagina web, non il file. I link di Dropbox, OneDrive e Google Drive di solito aprono una pagina di anteprima; ti serve la forma di download diretto del link.
- Link che richiedono l'accesso. Il browser del visitatore non ha una sessione nel tuo CDE, quindi un link privato restituisce una pagina di login.
- File molto grandi su server lenti. Il modello viene scaricato per intero prima dell'elaborazione; ospita i set federati grandi in un posto veloce e valuta di suddividerli.
Se i modelli sono troppo grandi da incorporare comodamente, come ridurre le dimensioni di un file IFC spiega le riduzioni sicure.
Quando un iframe non basta: l'SDK
Un iframe mostra un modello. Appena la tua pagina deve dialogare con esso —evidenziare un elemento quando si clicca una riga della tua tabella, portare l'Health Score nella tua dashboard, eseguire una specifica IDS ed elencare gli errori nella tua interfaccia, avviare un tour guidato—, ti serve l'SDK. Avvolge lo stesso visualizzatore con un'API tipizzata e bidirezionale, disponibile come script o come web component <ifc-viewer>.
Se invece vuoi costruire il tuo visualizzatore partendo dalle librerie di base, visualizzare IFC sul web con three.js e Fragments spiega cosa comporta, e perché la maggior parte dei team che parte da lì finisce per incorporare.
Nei progetti riservati, la stessa architettura lato client che fa funzionare gli embed è quella che tiene il modello lontano dai server di terzi; i dettagli sono in visualizzatori IFC per progetti riservati e con NDA.
Come incorporare un visualizzatore IFC in un sito web, in un CDE o in un report Power BI