Herramientas y comparativas · 2026-06-03 · 9 min

Cómo ver IFC en el navegador con three.js, web-ifc y Fragments

Cargar un IFC en una escena de three.js suena sencillo hasta que el primer modelo de 200 MB congela la pestaña durante dos minutos. El truco que enseñan las librerías es: no analices el IFC en tiempo de ejecución. Así encajan realmente web-ifc, Fragments y un pipeline de «convertir una vez».

Cómo ver IFC en el navegador con three.js, web-ifc y Fragments — IFC Viewer Online article cover

Renderizar IFC en la web es un problema resuelto, pero solo si sigues el patrón alrededor del cual están construidas las librerías. Los desarrolladores que prueban el enfoque ingenuo (cargar el .ifc, analizarlo, construir las mallas, cada vez) chocan con un muro en el primer modelo real: la pestaña se congela durante un minuto o más mientras WebAssembly procesa el archivo. La solución no es un analizador más rápido; es analizarlo una vez y no volver a hacerlo.

El stack

web-ifc

El núcleo en WebAssembly (de That Open) que lee y escribe IFC a velocidad casi nativa en el navegador o en Node. La base sobre la que se apoya todo lo demás.

Fragments

El formato de geometría optimizado de That Open. Conviertes IFC → Fragments una vez; cargar el .frag después es muchísimo más rápido que volver a analizar el IFC.

three.js

El renderizador WebGL que dibuja la escena. Fragments produce geometría compatible con three.js que añades a una escena, una cámara y unos controles como cualquier otra malla.

El enfoque ingenuo (y por qué duele)

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ón de producción: convertir una vez, cargar muchas

Convierte el IFC a Fragments una única vez (al subirlo, en un worker o en un paso de build).
Persiste la salida .frag: en caché, en OPFS o en almacenamiento de objetos.
En cada carga posterior, obtén el Fragments y renderiza: sin ningún análisis de IFC de por medio.
Ejecuta el trabajo pesado en un Web Worker para que el hilo principal siga respondiendo.

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

Trampas habituales

«memory access out of bounds»: el WASM de web-ifc se ha quedado sin memoria con un archivo grande; conviértelo en un worker, aumenta la memoria disponible o procesa por partes.
La geometría lejos del origen tiembla: los modelos creados con coordenadas geográficas reales pierden precisión de coma flotante; reubica a un origen local. (Consulta «Las coordenadas de IFC están mal».)
Sin renderizado en servidor: web-ifc se ejecuta en el navegador/Node, no como un paso de SSR sin JS; planifica una conversión en el cliente o en tiempo de build, no un SSR en tiempo de petición.
Optimización de carga: aplica tiling y culling a los modelos grandes para dibujar solo lo que está cerca de la cámara. (Consulta «Por qué los archivos IFC grandes bloquean tu navegador».)

O no lo construyas

Este es exactamente el pipeline que ejecuta este visor: web-ifc para el análisis, un paso de «convertir una vez» al estilo Fragments, caché en OPFS para que las cargas repetidas sean ~10 veces más rápidas, y validación por encima. Si tu objetivo es ver y comprobar IFC en lugar de construir un visor, puedes saltarte la ingeniería y simplemente abrir el archivo.

Ve el pipeline en acción

Un modelo IFC4 a tamaño de producción cargado exactamente con este pipeline de «convertir una vez» y caché. Ábrelo y recárgalo: la segunda carga es casi instantánea.

IFC4 · 14 MB

Abrir el visor IFC interactivo

Insértalo en tu propia página

Si alojas tu IFC en algún sitio público (un bucket con CORS habilitado, un enlace directo a un repositorio o tu CDE), puedes insertar este mismo visor en una entrada de blog, una página de documentación o un panel del CDE con un solo iframe, sin ningún paso de build. Pega una URL abajo, ajusta el diseño y copia el fragmento de código. El modelo se descarga en el navegador de quien visita la página, así que no se nos sube nada.

Crea tu embed de IFC

Pega una URL pública de IFC, elige un diseño y copia el iframe. La vista previa en directo se actualiza mientras trabajas.

Abrir IFC Viewer

Cómo ver IFC en el navegador con three.js, web-ifc y Fragments