工具与对比 · 2026-06-03 · 9 分钟

如何用 three.js、web-ifc 和 Fragments 在浏览器中查看 IFC

把 IFC 加载进 three.js 场景听起来很简单，直到第一个 200 MB 的模型让标签页卡死两分钟。这些库教给我们的诀窍是：不要在运行时解析 IFC。本文说明 web-ifc、Fragments 和“一次转换”的处理流程究竟如何配合。

如何用 three.js、web-ifc 和 Fragments 在浏览器中查看 IFC — IFC Viewer Online article cover

在网页上渲染 IFC 早已是一个已解决的问题，但前提是你遵循这些库所围绕的设计模式。尝试朴素做法（每次都加载 .ifc、解析、构建网格）的开发者，会在第一个真实模型上碰壁：WebAssembly 啃这个文件要一分钟甚至更久，标签页在这段时间里一直卡死。解决办法不是换一个更快的解析器，而是只解析一次，之后再也不解析。

技术栈

web-ifc

由 That Open 开发的 WebAssembly 内核，能在浏览器或 Node 中以接近原生的速度读写 IFC，是其他所有组件的基础。

Fragments

That Open 的优化几何格式。你只需把 IFC → Fragments 转换一次；之后加载 .frag 文件，比重新解析 IFC 快得多。

three.js

负责绘制场景的 WebGL 渲染器。Fragments 生成与 three.js 兼容的几何，你可以像处理其他网格一样，把它添加到场景中，并配上相机和控制器。

朴素做法（以及它为什么让人头疼）

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)

生产环境的模式：一次转换，多次加载

只把 IFC 转换为 Fragments 一次（在上传时、在 Worker 中，或在构建步骤中）。
持久化保存 .frag 输出，存放在缓存、OPFS 或对象存储中。
此后每次加载时，直接获取 Fragments 并渲染，完全不涉及 IFC 解析。
把繁重的工作放到 Web Worker 中执行，让主线程保持响应。

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

常见陷阱

“memory access out of bounds”：web-ifc 的 WASM 在处理大文件时内存耗尽。应在 Worker 中转换、增加可用内存，或分块处理。
远离原点的几何会抖动：按真实地理坐标建模的模型会损失浮点精度，应把坐标重新基准化到本地原点。（参见“IFC 坐标不对”。）
不支持服务器端渲染：web-ifc 运行在浏览器/Node 中，无法作为不依赖 JS 的 SSR 步骤。应规划客户端处理或构建时转换，而不是请求时 SSR。
加载优化：对大型模型进行分块和剔除，只绘制相机附近的内容。（参见“为什么大型 IFC 文件会让浏览器崩溃”。）

或者，干脆不用自己开发

这正是本查看器所用的处理流程：用 web-ifc 解析，采用类似 Fragments 的“一次转换”步骤，借助 OPFS 缓存让重复加载快约 10 倍，并在此之上叠加验证。如果你的目标是查看和检查 IFC，而不是自己开发一个查看器，就可以跳过这些工程工作，直接打开文件。

看看这套流程的实际效果

一个生产级规模的 IFC4 模型，正是用这套“一次转换 + 缓存”的流程加载的。打开它，然后重新加载：第二次加载几乎瞬间完成。

IFC4 · 14 MB

打开交互式 IFC 查看器

嵌入到你自己的页面中

如果你把 IFC 托管在公开位置，比如启用了 CORS 的存储桶、代码仓库的 raw 链接或你的公共数据环境（CDE），就可以用一个 iframe 把这个查看器原样嵌入博客文章、文档页面或 CDE 面板中，无需任何构建步骤。在下方粘贴 URL，调整布局，然后复制代码片段。模型是在访问者的浏览器中获取的，因此不会有任何内容上传到我们这里。

生成你的 IFC 嵌入代码

粘贴一个公开的 IFC URL，选择布局，然后复制 iframe 代码。实时预览会随你的调整同步更新。

打开 IFC Viewer

如何用 three.js、web-ifc 和 Fragments 在浏览器中查看 IFC