资源推荐
Xeokit

xeokit SDK：BIM 模型太大跑不动？这款开源引擎让浏览器也能飞快渲染！

很多开发者在做 BIM 可视化 时都会遇到几个常见问题：

  • 模型太大：IFC、Revit 等导出的文件，动辄上百万构件，浏览器直接卡死。

  • 封装库不合适：Three.js、Babylon.js 做特效还行，但在工程级场景下，性能和数据支持不够。

  • 缺少 BIM 工具链：想要剖切、属性查询、模型树？得自己造轮子。

如果你也在为 如何在 Web 中高效展示 BIM 模型 而发愁，可以看看 xeokit SDK (opens in a new tab) 。

这是一个专门为 BIM/工程数据 打造的开源 WebGL 引擎，能让超大规模建筑模型在浏览器中流畅运行。

什么是BIM

BIM 是 Building Information Modeling（建筑信息模型） 的缩写。 通俗地说： BIM = 三维建筑模型 + 丰富的工程信息

它不只是一个 3D 模型，而是把建筑的几何形状、材料、结构、造价、进度、运维信息等都集成到同一个数字模型里。

举个例子

  • 如果你用 CAD，画出来的可能只是“二维的线条图”。
  • 如果你用 3D 建模软件，做出来的是“建筑的三维外观”。
  • 而 BIM 模型里，每一个墙体、门窗、梁柱，都是带有属性的数据对象。 比如：
  • 这面墙 → 高度 3 米、厚度 200mm、材料是混凝土。
  • 这个门 → 尺寸 900mm × 2000mm，厂家型号、造价、维护周期。
  • 甚至可以把施工进度、后期运维计划，绑定到对应的模型构件上。

为什么推荐 xeokit SDK？

1. 专为大模型优化

  • 支持加载 百万级构件 的 IFC/CityJSON/glTF 模型。
  • 高效渲染管线，浏览器不卡顿。

2. BIM 原生支持

  • 内置 IFC 解析，直接还原构件层级与属性。
  • 兼容多种常见 3D 格式：glTF、OBJ、CityJSON。

3. 工程必备工具集

  • 模型树：快速定位构件。
  • 属性面板：展示 BIM 元数据。
  • 剖切、隔离、测量、着色：常用功能开箱即用。

如何使用 xeokit SDK？

克隆仓库

git clone https://github.com/xeokit/xeokit-sdk.git
cd xeokit-sdk

安装依赖

npm install

加载模型示例

import { Viewer } from "@xeokit/xeokit-sdk/viewer/Viewer.js";
import { GLTFLoaderPlugin } from "@xeokit/xeokit-sdk/plugins/GLTFLoaderPlugin/GLTFLoaderPlugin.js";
 
const viewer = new Viewer({
  canvasId: "myCanvas"
});
 
const loader = new GLTFLoaderPlugin(viewer);
 
loader.load({
  src: "./models/building.gltf"
});

运行后，你就能在浏览器中交互式查看 BIM 模型 🎉

效果展示

会议中心

诊所

总结

xeokit SDK 不只是一个渲染引擎，而是一套完整的 BIM 可视化解决方案。

它的价值体现在三个层面：

  • 性能层面：通过优化渲染管线与内存管理，让超大规模 IFC/CityJSON 模型也能在浏览器中流畅运行，真正解决了「模型太大跑不动」的行业痛点。

  • 数据层面：原生支持 IFC 文件解析，保留构件属性和层级关系，不只是看“几何”，还能深度挖掘 工程数据价值。

  • 交互层面：剖切、隔离、测量、模型树、属性面板等 BIM 必备工具开箱即用，大幅减少二次开发成本。

Worldlabs与Three.js结合的动画库