Strumenti e confronti · 2026-06-03 · 9 min

Come visualizzare IFC nel browser con three.js, web-ifc e Fragments

Caricare un IFC in una scena three.js sembra semplice finché il primo modello da 200 MB non blocca la scheda per due minuti. Il trucco che insegnano le librerie è: non analizzare l'IFC a runtime. Ecco come si incastrano davvero web-ifc, Fragments e una pipeline convert-once.

Come visualizzare IFC nel browser con three.js, web-ifc e Fragments — IFC Viewer Online article cover

Renderizzare l'IFC sul web è un problema risolto — ma solo se segui lo schema su cui sono costruite le librerie. Gli sviluppatori che provano l'approccio ingenuo (carica il .ifc, analizzalo, costruisci le mesh, ogni volta) sbattono contro un muro al primo modello reale: la scheda si blocca per un minuto o più mentre WebAssembly macina il file. La soluzione non è un parser più veloce; è analizzare una volta sola e mai più.

Lo stack

web-ifc

Il nucleo WebAssembly (di That Open) che legge e scrive IFC a velocità quasi nativa nel browser o in Node. La base su cui si appoggia tutto il resto.

Fragments

Il formato geometrico ottimizzato di That Open. Converti IFC → Fragments una volta sola; caricare il .frag dopo è nettamente più veloce che rianalizzare l'IFC.

three.js

Il renderer WebGL che disegna la scena. Fragments produce geometria compatibile con three.js che aggiungi a una scena, una camera e dei controlli come qualsiasi altra mesh.

L'approccio ingenuo (e perché fa male)

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)

Lo schema di produzione: converti una volta, carica molte volte

Converti l'IFC in Fragments una singola volta (al caricamento, in un worker o in una fase di build).
Conserva l'output .frag — in cache, in OPFS o su object storage.
A ogni caricamento successivo, recupera i Fragments e renderizza — nessuna analisi dell'IFC coinvolta.
Esegui il lavoro pesante in un Web Worker così il thread principale resta reattivo.

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

Insidie comuni

"memory access out of bounds": il WASM di web-ifc ha esaurito la memoria su un file grande — converti in un worker, aumenta la memoria disponibile o elabora a blocchi.
La geometria lontana dall'origine trema: i modelli creati con coordinate geografiche reali perdono precisione in virgola mobile; riporta l'origine a un punto locale. (Vedi 'Le coordinate IFC sono sbagliate'.)
Nessun rendering lato server: web-ifc gira nel browser/Node, non come passaggio SSR senza JS — pianifica per il lato client o una conversione in fase di build, non per un SSR a runtime.
Ottimizzazione del caricamento: suddividi in tile e scarta ciò che non serve nei modelli grandi, così disegni solo ciò che è vicino alla camera. (Vedi 'Perché i file IFC grandi fanno crashare il browser'.)

Oppure non costruirlo

Questa è esattamente la pipeline che usa questo visualizzatore: web-ifc per l'analisi, un passaggio in stile Fragments per il convert-once, cache OPFS che rende i caricamenti ripetuti circa 10 volte più veloci, e sopra la validazione. Se il tuo obiettivo è visualizzare e controllare gli IFC invece di costruire un visualizzatore, puoi saltare l'ingegneria e semplicemente aprire il file.

Guarda la pipeline in azione

Un modello IFC4 di dimensioni di produzione caricato esattamente con questa pipeline convert-once e in cache. Aprilo, poi ricaricalo — il secondo caricamento è quasi istantaneo.

IFC4 · 14 MB

Apri il visualizzatore IFC interattivo

Incorporalo nella tua pagina

Se ospiti il tuo IFC da qualche parte pubblica (un bucket con CORS abilitato, un link a un repo raw o il tuo CDE), puoi inserire questo stesso visualizzatore in un post del blog, in una pagina di documentazione o in un pannello del CDE con un singolo iframe — senza passaggi di build. Incolla un URL qui sotto, regola il layout e copia lo snippet. Il modello viene recuperato nel browser del visitatore, quindi nulla viene caricato sui nostri server.

Costruisci il tuo embed IFC

Incolla un URL IFC pubblico, scegli un layout e copia l'iframe. L'anteprima live si aggiorna man mano.

Apri IFC Viewer

Come visualizzare IFC nel browser con three.js, web-ifc e Fragments