Eines i comparatives · 2026-06-03 · 9 min

Com veure IFC al navegador amb three.js, web-ifc i Fragments

Carregar un IFC en una escena three.js sembla senzill fins que el primer model de 200 MB congela la pestanya durant dos minuts. El truc que ensenyen les biblioteques és: no analitzis l'IFC en temps d'execució. Aquí tens com encaixen realment web-ifc, Fragments i un pipeline de conversió única.

Com veure IFC al navegador amb three.js, web-ifc i Fragments — IFC Viewer Online article cover

Renderitzar IFC al web és un problema resolt, però només si segueixes el patró al voltant del qual estan construïdes les biblioteques. Els desenvolupadors que proven l'enfocament ingenu (carregar el .ifc, analitzar-lo, construir malles, cada vegada) topen amb un mur en el primer model real: la pestanya es congela durant un minut o més mentre WebAssembly processa el fitxer. La solució no és un analitzador més ràpid; és analitzar-lo un cop i no tornar-ho a fer mai més.

L'stack

web-ifc

El nucli en WebAssembly (de That Open) que llegeix i escriu IFC a velocitat gairebé nativa al navegador o a Node. La base sobre la qual se sustenta tota la resta.

Fragments

El format de geometria optimitzat de That Open. Converteixes IFC a Fragments un sol cop; carregar el .frag després és molt més ràpid que tornar a analitzar l'IFC.

three.js

El motor de renderització WebGL que dibuixa l'escena. Fragments produeix geometria compatible amb three.js que afegeixes a una escena, una càmera i controls com qualsevol altra malla.

L'enfocament ingenu (i per què fa mal)

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)

El patró de producció: converteix un cop, carrega moltes vegades

Converteix l'IFC a Fragments una única vegada (en pujar-lo, en un worker o en un pas de compilació).
Desa el resultat .frag: en memòria cau, a OPFS o en emmagatzematge d'objectes.
A cada càrrega posterior, obtén els Fragments i renderitza'ls: sense cap anàlisi d'IFC de per mig.
Executa la feina pesada en un Web Worker perquè el fil principal es mantingui receptiu.

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

Trampes habituals

"memory access out of bounds": el WASM de web-ifc s'ha quedat sense memòria amb un fitxer gran: converteix en un worker, augmenta la memòria disponible o processa per blocs.
La geometria lluny de l'origen tremola: els models creats amb coordenades geogràfiques reals perden precisió de coma flotant; recol·loca'ls respecte a un origen local. (Vegeu "Les coordenades IFC estan malament".)
Sense renderització al servidor: web-ifc funciona al navegador/Node, no com un pas SSR sense JS; planifica-ho per al costat client o com a conversió en temps de compilació, no en temps de petició.
Optimització de càrrega: divideix en tessel·les i retalla els models grans perquè només es dibuixi el que hi ha a prop de la càmera. (Vegeu "Per què els fitxers IFC grans fan petar el teu navegador".)

O no ho construeixis

Aquest és exactament el pipeline que fa servir aquest visor: web-ifc per a l'anàlisi, un pas de conversió única a l'estil Fragments, memòria cau OPFS perquè les càrregues repetides siguin ~10 vegades més ràpides, i validació per sobre de tot això. Si el teu objectiu és veure i comprovar IFC en lloc de construir un visor, et pots estalviar l'enginyeria i simplement obrir el fitxer.

Veu el pipeline en acció

Un model IFC4 de mida de producció carregat amb exactament aquest pipeline de conversió única en memòria cau. Obre'l i després torna-hi a carregar: la segona càrrega és gairebé instantània.

IFC4 · 14 MB

Obre el visor IFC interactiu

Incrusta'l a la teva pròpia pàgina

Si allotges el teu IFC en algun lloc públic (un bucket amb CORS habilitat, un enllaç de repositori en cru o el teu CDE), pots incrustar exactament aquest visor en una entrada de blog, una pàgina de documentació o un panell de CDE amb un sol iframe, sense cap pas de compilació. Enganxa una URL a sota, ajusta el disseny i copia el fragment de codi. El model es descarrega al navegador de qui el visita, així que no es puja res als nostres servidors.

Construeix el teu embed d'IFC

Enganxa una URL pública d'IFC, tria un disseny i copia l'iframe. La vista prèvia en directe s'actualitza a mesura que ho fas.

Obre IFC Viewer

Com veure IFC al navegador amb three.js, web-ifc i Fragments