Werkzeuge & Vergleiche · 2026-06-03 · 9 Min.

IFC im Browser anzeigen mit three.js, web-ifc und Fragments

Eine IFC-Datei in eine three.js-Szene zu laden klingt einfach – bis das erste 200-MB-Modell den Tab für zwei Minuten einfrieren lässt. Der Trick, den die Bibliotheken lehren: IFC nicht zur Laufzeit parsen. So greifen web-ifc, Fragments und eine Convert-once-Pipeline tatsächlich ineinander.

IFC im Browser anzeigen mit three.js, web-ifc und Fragments — IFC Viewer Online article cover

IFC im Web darzustellen ist ein gelöstes Problem – aber nur, wenn man dem Muster folgt, um das herum die Bibliotheken gebaut sind. Entwickler, die den naiven Ansatz versuchen (die .ifc laden, parsen, Meshes bauen, und das jedes Mal), stoßen beim ersten echten Modell an eine Wand: Der Tab friert für eine Minute oder länger ein, während WebAssembly sich durch die Datei arbeitet. Die Lösung ist kein schnellerer Parser – sie besteht darin, nur einmal zu parsen und nie wieder.

Der Stack

web-ifc

Der WebAssembly-Kern (von That Open), der IFC-Dateien im Browser oder in Node nahezu mit nativer Geschwindigkeit liest und schreibt. Das Fundament, auf dem alles andere aufbaut.

Fragments

Das optimierte Geometrieformat von That Open. Sie konvertieren IFC einmal zu Fragments; das anschließende Laden der .frag-Datei ist dramatisch schneller als das erneute Parsen der IFC-Datei.

three.js

Der WebGL-Renderer, der die Szene zeichnet. Fragments erzeugt three.js-kompatible Geometrie, die Sie wie jedes andere Mesh zu einer Szene, Kamera und Steuerung hinzufügen.

Der naive Ansatz (und warum er wehtut)

import * as WebIFC from "web-ifc";

const api = new WebIFC.IfcAPI();
await api.Init();

// Parsing the raw IFC at runtime — fine for tiny files, painful for real ones
const data = new Uint8Array(await file.arrayBuffer());
const modelID = api.OpenModel(data);
// ...extract geometry, build meshes... (slow, blocks the main thread)

Das Produktionsmuster: einmal konvertieren, mehrfach laden

Konvertieren Sie die IFC-Datei einmalig zu Fragments (beim Upload, in einem Worker oder in einem Build-Schritt).
Speichern Sie die .frag-Ausgabe dauerhaft – im Cache, in OPFS oder in einem Object Storage.
Bei jedem weiteren Laden holen Sie die Fragments und rendern sie – ohne IFC-Parsing.
Führen Sie die aufwendige Arbeit in einem Web Worker aus, damit der Hauptthread reaktionsfähig bleibt.

import * as OBC from "@thatopen/components";

const components = new OBC.Components();
const fragments = components.get(OBC.FragmentsManager);
const ifcLoader = components.get(OBC.IfcLoader);
await ifcLoader.setup();

// First time only: IFC → Fragments
const model = await ifcLoader.load(ifcBytes);

// Serialize once, reuse forever
const frag = fragments.export(model.group);
await saveToCache(frag);          // OPFS / IndexedDB / server

// Subsequent loads: skip IFC entirely
const cached = await loadFromCache();
fragments.load(cached);            // fast

Häufige Stolperfallen

„memory access out of bounds“: Das web-ifc-WASM ging bei einer großen Datei der Speicher aus – konvertieren Sie in einem Worker, erhöhen Sie den verfügbaren Speicher, oder verarbeiten Sie in Blöcken.
Geometrie fernab des Ursprungs zittert: Modelle, die mit echten geografischen Koordinaten erstellt wurden, verlieren Fließkommagenauigkeit; auf einen lokalen Ursprung umbasieren. (Siehe „IFC-Koordinaten sind falsch“.)
Kein serverseitiges Rendering: web-ifc läuft im Browser/in Node, nicht als JS-freier SSR-Schritt – planen Sie mit clientseitiger oder Build-Zeit-Konvertierung, nicht mit SSR zur Anfragezeit.
Ladeoptimierung: Kacheln und Ausblenden großer Modelle, sodass nur gezeichnet wird, was nahe der Kamera liegt. (Siehe „Warum große IFC-Dateien Ihren Browser abstürzen lassen“.)

Oder bauen Sie es gar nicht erst

Genau diese Pipeline nutzt dieser Viewer: web-ifc zum Parsen, einen Convert-once-Schritt im Stil von Fragments, OPFS-Caching, damit wiederholtes Laden ca. 10-mal schneller ist, und Validierung obendrauf. Wenn Ihr Ziel darin besteht, IFC-Dateien zu betrachten und zu prüfen statt einen Viewer zu bauen, können Sie sich die Entwicklungsarbeit sparen und einfach die Datei öffnen.

Die Pipeline in Aktion sehen

Ein produktionsgroßes IFC4-Modell, geladen mit genau dieser Convert-once-Pipeline samt Caching. Öffnen Sie es und laden Sie neu – das zweite Laden erfolgt nahezu sofort.

IFC4 · 14 MB

Interaktiven IFC-Viewer öffnen

In Ihre eigene Seite einbetten

Wenn Sie Ihre IFC-Datei öffentlich hosten (ein CORS-fähiger Bucket, ein Raw-Repo-Link oder Ihre CDE), können Sie genau diesen Viewer mit einem einzigen iframe in einen Blogbeitrag, eine Doku-Seite oder ein CDE-Panel einbetten – ohne Build-Schritt. Fügen Sie unten eine URL ein, passen Sie das Layout an und kopieren Sie den Codeausschnitt. Das Modell wird im Browser des Besuchers abgerufen, sodass nichts zu uns hochgeladen wird.

Ihr IFC-Embed erstellen

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

IFC Viewer öffnen

IFC im Browser anzeigen mit three.js, web-ifc und Fragments