Open, view, and work with IFC files. Right in the browser.
|
|
# IFClite
在浏览器中解析、查看、查询、编辑和导出 IFC 文件。采用 Rust + WASM 核心，WebGPU 渲染，gzip 压缩后约 260 KB，几何处理速度比同类最优方案快 5 倍。
支持 **IFC2X3**、**IFC4 / IFC4X3** 和 **IFC5 (IFCX)**。在线演示请访问 [ifclite.com](https://www.ifclite.com/)，更多信息请点击：[ifclite.dev](https://www.ifclite.dev/)。
## 快速开始
```
npx create-ifc-lite my-viewer --template react
cd my-viewer && npm install && npm run dev
```
这将为您提供一个可用的 WebGPU IFC 查看器，支持拖放、层级结构、属性查看和 2D 图纸。其他模板包括：`basic`、`threejs`、`babylonjs`、`server`、`server-native`。
要将 IFClite 添加到现有项目中：
```
npm install @ifc-lite/parser @ifc-lite/geometry @ifc-lite/renderer
```
## 解析 IFC 文件
```
import { IfcParser } from '@ifc-lite/parser';
const parser = new IfcParser();
const buffer = await fetch('model.ifc').then(r => r.arrayBuffer());
const t0 = performance.now();
const store = await parser.parseColumnar(buffer, {
onProgress: ({ phase, percent }) => console.log(`${phase}: ${percent}%`),
});
console.log(`${store.entityCount} entities, schema ${store.schemaVersion}`);
console.log(`Parsed in ${(performance.now() - t0).toFixed(0)}ms`);
```
## 3D 查看
```
import { IfcParser } from '@ifc-lite/parser';
import { GeometryProcessor } from '@ifc-lite/geometry';
import { Renderer } from '@ifc-lite/renderer';
const parser = new IfcParser();
const geometry = new GeometryProcessor();
const renderer = new Renderer(canvas);
await Promise.all([geometry.init(), renderer.init()]);
const arrayBuffer = await file.arrayBuffer();
const store = await parser.parseColumnar(arrayBuffer);
const meshes = [];
for await (const event of geometry.processAdaptive(new Uint8Array(arrayBuffer))) {
if (event.type === 'batch') meshes.push(...event.meshes);
}
renderer.loadGeometry(meshes);
renderer.requestRender();
// Pick an entity at (x, y) in canvas pixels
const hit = await renderer.pick(120, 240);
if (hit) console.log(`Picked expressId ${hit.expressId}`);
```
对于 Three.js 或 Babylon.js，解析和提取几何体的方式相同，只需将 `meshes` 提供给您的引擎即可。请参阅 [Three.js 集成](https://ltplus-ag.github.io/ifc-lite/tutorials/threejs-integration/) 和 [Babylon.js 集成](https://ltplus-ag.github.io/ifc-lite/tutorials/babylonjs-integration/)。
## 查询实体
```
import { IfcQuery } from '@ifc-lite/query';
const query = new IfcQuery(store);
// All external load-bearing walls
const walls = query
.ofType('IfcWall', 'IfcWallStandardCase')
.whereProperty('Pset_WallCommon', 'IsExternal', '=', true)
.whereProperty('Pset_WallCommon', 'LoadBearing', '=', true)
.execute();
console.log(`${walls.length} external load-bearing walls`);
for (const wall of walls) {
console.log(wall.name, wall.globalId);
}
```
如需更复杂的查询，可通过 DuckDB-WASM 使用 SQL：
```
const result = await query.sql(`
SELECT type, COUNT(*) AS n FROM entities GROUP BY type ORDER BY n DESC LIMIT 10
`);
console.table(result.rows);
```
## 根据 IDS 进行验证
```
import { parseIDS, validateIDS, createTranslationService } from '@ifc-lite/ids';
const idsSpec = parseIDS(idsXmlContent);
const translator = createTranslationService('en');
const report = await validateIDS(idsSpec, store, { translator });
for (const spec of report.specificationResults) {
console.log(`${spec.specificationName}: ${spec.passRate}% passed`);
}
```
## 编辑属性（支持撤销）
```
import { MutablePropertyView } from '@ifc-lite/mutations';
import { PropertyValueType } from '@ifc-lite/data';
const view = new MutablePropertyView(store.properties, 'my-model');
view.setProperty(
wallExpressId,
'Pset_WallCommon',
'FireRating',
'REI 120',
PropertyValueType.Label,
);
console.log(view.getMutations()); // change history for undo / export
```
## 导出
```
import { exportToStep, GLTFExporter, ParquetExporter, Ifc5Exporter } from '@ifc-lite/export';
// IFC STEP — applies any pending mutations
const stepText = exportToStep(store, { schema: 'IFC4', applyMutations: true });
// glTF for the web
const glb = await new GLTFExporter().export(parseResult, { format: 'glb' });
// Parquet — columnar, ~20× smaller than JSON, queryable from DuckDB / Polars
const parquet = await new ParquetExporter().exportEntities(parseResult);
// IFC5 / IFCX — JSON + USD geometry
const ifcx = new Ifc5Exporter(store, meshes).export({ includeGeometry: true });
```
## 选择您的配置方案
| 配置方案 | 最适合 | 您将获得 |
|-------|----------|---------|
| [**浏览器 (WebGPU)**](https://ltplus-ag.github.io/ifc-lite/guide/quickstart/) | 查看和检查模型 | 功能完备的 3D 查看器，完全在客户端运行 |
| [**Three.js / Babylon.js**](https://ltplus-ag.github.io/ifc-lite/tutorials/threejs-integration/) | 为现有的 3D 应用添加 IFC 支持 | IFC 解析 + 几何体，由您的引擎进行渲染 |
| [**服务端**](https://ltplus-ag.github.io/ifc-lite/guide/server/) | 团队协作、大文件、频繁访问 | 带有缓存、并行处理和流式传输的 Rust 后端 |
| [**构建桌面端应用**](https://ltplus-ag.github.io/ifc-lite/guide/desktop/) | 您自己的离线原生应用、超大文件 (500 MB+) | 用于在 Tauri 中封装这些包的扩展点，并带有可选的原生 Rust 几何快速通道 |
不确定？从浏览器配置方案开始吧。您可以之后再添加服务端或更换引擎。
## 选择您的包
| 我想要... | 包 |
|--------------|----------|
| 解析 IFC 文件 | `@ifc-lite/parser` |
| 查看 3D 模型 (WebGPU) | + `@ifc-lite/geometry` + `@ifc-lite/renderer` |
| 使用 Three.js 或 Babylon.js | + `@ifc-lite/geometry`（由您自行处理渲染） |
| 查询属性和类型 | + `@ifc-lite/query` |
| 编辑属性（支持撤销） | + `@ifc-lite/mutations` |
| 根据 IDS 规则进行验证 | + `@ifc-lite/ids` |
| 生成 2D 图纸 | + `@ifc-lite/drawing-2d` |
| 从零开始创建 IFC 文件 | `@ifc-lite/create` |
| 导出为 glTF / IFC / Parquet | + `@ifc-lite/export` |
| 连接到服务端后端 | + `@ifc-lite/server-client` |
| BCF 问题追踪 | + `@ifc-lite/bcf` |
完整列表：[API 参考](https://ltplus-ag.github.io/ifc-lite/api/typescript/)（包含 25 个 TypeScript 包，4 个 Rust crate）。
## 性能
- **首批三角形：** 在浏览器中处理典型的 50 MB 模型仅需 200–500 毫秒。
- **几何处理：** 在相同硬件上比 `web-ifc` 快达 5 倍。
- **打包体积：** gzip 压缩后约 260 KB（包含 parser + geometry + renderer）。
- **Schema 覆盖率：** 100% 覆盖 IFC4（776 个实体）和 IFC4X3（876 个实体）。
- **解析吞吐量：** 在典型的 M1 / M2 笔记本电脑上，词法分析速度约为 1,259 MB/s。
请参阅[基准测试](https://ltplus-ag.github.io/ifc-lite/guide/performance/)，获取各种模型大小和硬件配置下的详细数据。
## 示例
[`examples/`](examples/) 中提供了可直接运行的项目：
- [**Three.js 查看器**](examples/threejs-viewer/) — 使用 Three.js (WebGL) 的 IFC 查看器
- [**Babylon.js 查看器**](examples/babylonjs-viewer/) — 使用 Babylon.js (WebGL) 的 IFC 查看器
## 文档
| | |
|---|---|
| **从这里开始** | [快速开始](https://ltplus-ag.github.io/ifc-lite/guide/quickstart/) · [安装指南](https://ltplus-ag.github.io/ifc-lite/guide/installation/) · [浏览器要求](https://ltplus-ag.github.io/ifc-lite/guide/browser-requirements/) |
| **指南** | [解析](https://ltplus-ag.github.io/ifc-lite/guide/parsing/) · [几何体](https://ltplus-ag.github.io/ifc-lite/guide/geometry/) · [渲染](https://ltplus-ag.github.io/ifc-lite/guide/rendering/) · [查询](https://ltplus-ag.github.io/ifc-lite/guide/querying/) · [导出](https://ltplus-ag.github.io/ifc-lite/guide/exporting/) |
| **BIM 功能** | [联合](https://ltplus-ag.github.io/ifc-lite/guide/federation/) · [BCF](https://ltplus-ag.github.io/ifc-lite/guide/bcf/) · [IDS 验证](https://ltplus-ag.github.io/ifc-lite/guide/ids/) · [2D 图纸](https://ltplus-ag.github.io/ifc-lite/guide/drawing-2d/) · [属性编辑](https://ltplus-ag.github.io/ifc-lite/guide/mutations/) |
| **教程** | [构建查看器](https://ltplus-ag.github.io/ifc-lite/tutorials/building-viewer/) · [Three.js](https://ltplus-ag.github.io/ifc-lite/tutorials/threejs-integration/) · [Babylon.js](https://ltplus-ag.github.io/ifc-lite/tutorials/babylonjs-integration/) · [自定义查询](https://ltplus-ag.github.io/ifc-lite/tutorials/custom-queries/) |
| **深度解析** | [架构](https://ltplus-ag.github.io/ifc-lite/architecture/overview/) · [数据流](https://ltplus-ag.github.io/ifc-lite/architecture/data-flow/) · [性能](https://ltplus-ag.github.io/ifc-lite/guide/performance/) |
| **API** | [TypeScript](https://ltplus-ag.github.io/ifc-lite/api/typescript/) · [Rust](https://ltplus-ag.github.io/ifc-lite/api/rust/) · [WASM](https://ltplus-ag.github.io/ifc-lite/api/wasm/) |
## 社区
- [GitHub Discussions](https://github.com/LTplus-AG/ifc-lite/discussions) — 提问、分享创意、展示成果
- [Issues](https://github.com/LTplus-AG/ifc-lite/issues) — 提交 Bug 报告和功能请求
- [Releases](https://github.com/LTplus-AG/ifc-lite/releases) — 更新日志和版本说明
## 许可协议
[MPL-2.0](LICENSE) — 允许使用、修改和重新分发。在 MPL 协议下修改过的源文件必须保持为 MPL 协议。