如何把 IFC 模型嵌入网站？

把 .ifc 文件放在允许跨域请求的公开 URL 上，然后添加一个 iframe，用 ?model= &embed=1 指向查看器。模型由访问者的浏览器下载并解析。免费的嵌入生成器会为你生成代码，并提供实时预览。

能在 Power BI 中显示 IFC 模型吗？

可以。添加一个网页内容或 HTML 查看器视觉对象，粘贴 iframe 代码即可。accent 参数可让查看器配色与报表一致。

为什么嵌入的 IFC 加载不出来？

十有八九是 CORS：存放文件的服务器没有返回 Access-Control-Allow-Origin 响应头，所以浏览器拒绝把文件交给查看器。需要登录的私有链接，以及返回 HTML 页面而非文件本身的分享链接，是另外两个常见原因。

什么时候该用 SDK 而不是 iframe？

当你的页面需要与模型交互时——从你自己的界面选择构件、读取 Health Score 或问题列表、运行 IDS 检查，或响应点击。iframe 只是展示模型；SDK 让你的应用能够控制和查询它。

返回 BIM 与 IFC 博客

工具与对比 · 2026-10-01 · 9 分钟

如何把 IFC 查看器嵌入网站、CDE 或 Power BI 报表

在方案、项目页面、CDE 面板或 Power BI 仪表板中放一个可交互的 3D 模型——只需一个 iframe，无需构建，也不必把模型上传到任何人的服务器。本文说明 URL 参数的作用，以及什么时候需要 SDK。

如何把 IFC 查看器嵌入网站、CDE 或 Power BI 报表 — IFC Viewer Online article cover

在方案里放 BIM 模型截图，其实是件挺奇怪的事。模型的意义就在于它是三维的、充满数据的，而截图把这两样都丢掉了。嵌入式查看器则全部保留：读者可以环绕、剖切、点击构件查看属性，在任何设备上，无需安装任何东西。

做到这一点只要一个 iframe；做好它，则需要了解四个参数和一条浏览器安全规则。

最简嵌入

<iframe
  src="https://www.ifcvieweronline.eu/?model=https://your-host.com/model.ifc&embed=1"
  width="100%" height="600"
  style="border:0;border-radius:12px;max-width:100%"
  loading="lazy" allow="fullscreen"
  title="3D IFC model">
</iframe>

访问者的浏览器直接从你的服务器下载 IFC，并在本地解析。模型从不会上传给我们——这通常是签过保密协议（NDA）的人问的第一个问题，也是与那些要求先把模型上传到厂商云端的嵌入方案之间的真正区别。

生成你的嵌入代码

粘贴一个公开的 IFC URL，选择模式，然后复制 iframe。预览会实时更新。

打开 IFC Viewer

值得了解的参数

参数	作用	适用场景
model	加载一个或多个 IFC URL（联合模型用逗号分隔）	所有场景
ui	界面模式：minimal、full、kiosk 或 client	匹配受众
validate	加载时运行验证并显示 Health Score	展示质量，而不只是几何
isolate / select	打开时隔离某个 IFC 类，或选中某个构件	指向你正在讲解的对象
accent	用十六进制颜色为查看器着色	仪表板和品牌页面
lang	强制界面语言	多语言网站
map	根据地理参考把模型放到底图上	在方案中展示场地环境

完整参数说明（包括日照分析和点云）见嵌入文档。

ui 模式最重要。minimal 适合博客文章和文档；kiosk 去掉一切，适合大堂或售楼处的屏幕；client 专为发给业主设计：干净的视图和一个质量徽章，没有协调员需要而客户用不到的工具。

适用的地方

网站和博客——任何接受 HTML 的 CMS：WordPress、Webflow、Ghost、静态网站。
Power BI——网页内容或 HTML 查看器视觉对象，accent 设为报表主题色。把模型放在它所解释的成本和进度图表旁边。
Notion、Confluence、SharePoint——把 URL 作为嵌入块粘贴。
CDE 面板和内部工具——一个 iframe，并把生命周期事件发送给父窗口，让宿主在模型就绪或验证完成时作出响应。
方案和投标——如果格式不支持嵌入，就放链接。在投标文件里附一个可交互模型的链接，至今仍少见到足以引人注意。

加载失败的原因：CORS，以及另外两个

嵌入式 IFC 查看器流程图：页面加载 iframe，查看器从你的存储下载 IFC，存储必须返回 Access-Control-Allow-Origin 响应头 — 模型从你的存储直接传到访问者的浏览器。服务器没有 CORS 响应头，浏览器就会拒绝交出文件。

分享链接返回的是网页而不是文件。Dropbox、OneDrive 和 Google Drive 的分享链接通常打开预览页面；你需要该链接的直接下载形式。
需要登录的链接。访问者的浏览器在你的 CDE 上没有会话，所以私有链接只会返回登录页。
慢速服务器上的超大文件。模型需要完整下载后才开始解析；把大型联合模型放在速度快的地方，并考虑拆分。

如果模型太大、不便嵌入，如何减小 IFC 文件大小介绍了安全的瘦身方法。

iframe 不够用时：SDK

iframe 只是展示模型。一旦你的页面需要与它交互——点击表格中的某一行时高亮对应构件、把 Health Score 读进你的仪表板、运行一条 IDS 规范并在自己的界面中列出不合格项、启动导览——你就需要 SDK。它为同一个查看器包上一层有类型定义的双向 API，可以作为脚本使用，也可以作为 <ifc-viewer> Web Component 使用。

如果你想基于底层库自己构建查看器，用 three.js 和 Fragments 在网页中查看 IFC 介绍了其中的工作量——以及为什么大多数从这里起步的团队最后还是选择了嵌入。

对于保密项目，让嵌入得以实现的客户端架构，同样能让模型远离第三方服务器；详情见适用于保密和 NDA 项目的 IFC 查看器。

如何把 IFC 查看器嵌入网站、CDE 或 Power BI 报表