Wie bette ich ein IFC-Modell in eine Website ein?

Legen Sie die .ifc-Datei unter einer öffentlichen URL ab, die Cross-Origin-Anfragen erlaubt, und fügen Sie einen iframe ein, der mit ?model= &embed=1 auf den Viewer zeigt. Der Browser des Besuchers lädt und verarbeitet das Modell. Der kostenlose Embed-Generator erstellt den Code mit Live-Vorschau für Sie.

Kann ich ein IFC-Modell in Power BI anzeigen?

Ja. Fügen Sie ein Webinhalts- oder HTML-Viewer-Visual hinzu und fügen Sie den iframe-Code ein. Der Parameter accent passt den Viewer an die Farben des Berichts an.

Warum lädt mein eingebettetes IFC nicht?

In neun von zehn Fällen ist es CORS: Der Server mit der Datei sendet keinen Access-Control-Allow-Origin-Header, also verweigert der Browser die Übergabe der Datei an den Viewer. Private Links mit Login-Pflicht und Freigabelinks, die eine HTML-Seite statt der Datei liefern, sind die anderen häufigen Ursachen.

Wann sollte ich das SDK statt eines iframe verwenden?

Wenn Ihre Seite mit dem Modell kommunizieren muss – Elemente aus Ihrer eigenen Oberfläche auswählen, den Health Score oder die Issue-Liste auslesen, eine IDS-Prüfung starten oder auf Klicks reagieren. Der iframe zeigt ein Modell; mit dem SDK kann Ihre Anwendung es steuern und abfragen.

Zurück zum BIM- & IFC-Blog

Werkzeuge & Vergleiche · 2026-10-01 · 9 Min.

Einen IFC-Viewer in eine Website, eine CDE oder einen Power-BI-Bericht einbetten

Ein interaktives 3D-Modell in einem Angebot, auf einer Projektseite, in einem CDE-Panel oder einem Power-BI-Dashboard – mit einem iframe, ohne Build-Schritt und ohne das Modell auf irgendjemandes Server hochzuladen. Was die URL-Parameter tun und wann Sie das SDK brauchen.

Einen IFC-Viewer in eine Website, eine CDE oder einen Power-BI-Bericht einbetten — IFC Viewer Online article cover

Screenshots eines BIM-Modells sind eine seltsame Sache in einem Angebot. Der ganze Sinn des Modells ist, dass es dreidimensional und voller Daten ist, und der Screenshot wirft beides weg. Ein eingebetteter Viewer behält beides: Der Leser kann drehen, schneiden, ein Element anklicken und seine Eigenschaften lesen – auf jedem Gerät, ohne Installation.

Dafür genügt ein iframe. Es gut zu machen, erfordert vier Parameter und eine Sicherheitsregel des Browsers.

Das minimale Embed

<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>

Der Browser des Besuchers lädt das IFC direkt von Ihrem Host und verarbeitet es lokal. Das Modell wird nie zu uns hochgeladen – meist die erste Frage von allen, die ein NDA unterschrieben haben, und ein echter Unterschied zu Embeds, bei denen Sie das Modell zuerst in die Cloud eines Herstellers laden müssen.

Ihr Embed erstellen

Fügen Sie eine öffentliche IFC-URL ein, wählen Sie einen Modus und kopieren Sie den iframe. Die Vorschau aktualisiert sich live.

IFC Viewer öffnen

Die Parameter, die man kennen sollte

Parameter	Funktion	Einsatz
model	Lädt eine oder mehrere IFC-URLs (kommagetrennt für einen föderierten Satz)	Immer
ui	Oberflächenmodus: minimal, full, kiosk oder client	Passend zum Publikum
validate	Validiert beim Laden und zeigt den Health Score	Qualität zeigen, nicht nur Geometrie
isolate / select	Öffnet mit einer isolierten IFC-Klasse oder einem ausgewählten Element	Auf das zeigen, worüber Sie schreiben
accent	Färbt den Viewer in einer Hex-Farbe	Dashboards und Seiten im eigenen Branding
lang	Erzwingt die Sprache der Oberfläche	Lokalisierte Websites
map	Platziert das Modell anhand seiner Georeferenzierung auf der Basiskarte	Standortkontext in Angeboten

Die vollständige Referenz, inklusive Sonnenstandsstudien und Punktwolken, steht in der Embed-Dokumentation.

Der ui-Modus ist am wichtigsten. minimal passt zu Blogartikeln und Dokumentation. kiosk entfernt alles für Bildschirme in einer Lobby oder einem Verkaufsbüro. client ist für den Versand an Bauherren gedacht: eine saubere Ansicht und ein Qualitätssiegel, ohne die Werkzeuge, die ein Koordinator braucht und ein Kunde nicht.

Wo es funktioniert

Websites und Blogs – jedes CMS, das HTML akzeptiert: WordPress, Webflow, Ghost, eine statische Seite.
Power BI – ein Webinhalts- oder HTML-Viewer-Visual, mit accent passend zum Berichtsthema. Ein Modell neben den Kosten- und Terminplan-Diagrammen, die es erklärt.
Notion, Confluence, SharePoint – die URL als Embed-Block einfügen.
CDE-Panels und interne Werkzeuge – ein iframe, mit Lebenszyklus-Ereignissen an das Elternfenster, damit der Host reagieren kann, wenn das Modell bereit oder validiert ist.
Angebote und Ausschreibungen – als Link, wenn das Format keine Embeds erlaubt. Ein Link zu einem lebendigen Modell in einem Angebot ist noch selten genug, um aufzufallen.

Warum es nicht lädt: CORS und zwei weitere Ursachen

Ablaufdiagramm eines eingebetteten IFC-Viewers: Die Seite lädt den iframe, der Viewer holt das IFC aus Ihrem Speicher, der den Header Access-Control-Allow-Origin senden muss — Das Modell reist von Ihrem Speicher in den Browser des Besuchers. Ohne CORS-Header am Host gibt der Browser es nicht heraus.

Freigabelinks, die eine Webseite statt der Datei liefern. Links von Dropbox, OneDrive und Google Drive öffnen meist eine Vorschauseite; Sie brauchen die Direkt-Download-Form des Links.
Links mit Login-Pflicht. Der Browser des Besuchers hat keine Sitzung in Ihrer CDE, also liefert ein privater Link eine Anmeldeseite.
Sehr große Dateien auf langsamen Hosts. Das Modell wird vollständig geladen, bevor es verarbeitet wird; legen Sie große föderierte Sätze auf schnelle Hosts und erwägen Sie, sie aufzuteilen.

Sind die Modelle zu groß zum bequemen Einbetten, zeigt IFC-Dateigröße reduzieren die sicheren Verkleinerungen.

Wenn ein iframe nicht reicht: das SDK

Ein iframe zeigt ein Modell. Sobald Ihre Seite mit ihm kommunizieren muss – ein Element hervorheben, wenn eine Zeile in Ihrer Tabelle angeklickt wird, den Health Score in Ihr Dashboard holen, eine IDS-Spezifikation ausführen und die Fehler in Ihrer eigenen Oberfläche auflisten, eine geführte Tour starten –, brauchen Sie das SDK. Es umhüllt denselben Viewer mit einer typisierten, bidirektionalen API, verfügbar als Skript oder als Web Component <ifc-viewer>.

Wenn Sie stattdessen einen eigenen Viewer aus den zugrunde liegenden Bibliotheken bauen möchten, erklärt IFC im Web mit three.js und Fragments anzeigen, was das bedeutet – und warum die meisten Teams, die dort anfangen, am Ende einbetten.

Bei vertraulichen Projekten ist dieselbe clientseitige Architektur, die Embeds möglich macht, auch das, was das Modell von fremden Servern fernhält; Details in IFC-Viewer für vertrauliche und NDA-Projekte.

Einen IFC-Viewer in eine Website, eine CDE oder einen Power-BI-Bericht einbetten