Appearance
什么是 FMB Viewer
FMB Viewer 是一套专业的 CAD Web 可视化引擎,面向需要在浏览器中展示与交互三维 CAD 模型的应用。它渲染 .fmbv 二进制模型格式,提供从流式加载、相机导航、选择拾取到剖切、爆炸等工程可视化场景的完整能力,并以渐进加载保证大模型「秒开骨架、几何陆续到达」的体验。
它由两个 npm 包组成:@modelcubes/viewer-core 是渲染引擎——纯 TypeScript、零框架依赖,公开 API 不暴露任何底层渲染细节,你只与单一入口 Viewer 和它的各个 manager 打交道;@modelcubes/viewer-ui 是即用 UI 组件层——模型树、工具栏、属性面板等标准 Web Components(自定义元素),React、Vue 或原生 HTML 宿主都可直接挂载。
能力一览
| 能力 | 说明 |
|---|---|
| 流式加载 | viewer.model.load() 渐进加载 .fmbv:结构树骨架先就绪,几何分块在后台流式到达,全程事件可观测。 |
| 选择与拾取 | viewer.selection 提供节点 / 面 / 边三种粒度的点击拾取,以及框选(节点粒度)、悬停与高亮 / 描边样式控制。 |
| 边线 | viewer.edges 全局开关模型内置的 BREP(精确几何)边线,并可调整颜色与不透明度。 |
| 渲染模式 | viewer.renderMode 在 RenderMode 四种模式间切换:实色线框(默认)、线框、实色、消隐。 |
| 剖切 | viewer.section 创建剖切 section(每个含至多 6 个裁剪平面),支持盖面(capping)与平面 gizmo 拖拽。 |
| 爆炸视图 | viewer.explode 按结构树把零件沿径向散开,支持散开倍率、深度衰减、平滑动画与节点锁定。 |
| 面组染色 | viewer.model.setNodesColor() / setFaceGroupColor() 对节点或单个面组做运行时颜色覆盖。 |
| 矢量 SVG 导出 | viewer.export 按当前相机视角生成矢量 SVG 字符串,或直接触发浏览器下载。 |
| 渲染质量 | viewer.quality 控制抗锯齿、环境光遮蔽、色调映射 / 曝光、IBL 环境与质量档切换。 |
| 运行时统计 | viewer.stats 提供加载侧(分块进度 / 下载字节 / 解码耗时)与渲染侧(fps / 帧时 / draw call / 三角形数)的只读统计。 |
浏览器要求
- WebGL2 必需:引擎基于 WebGL2 渲染,不提供 WebGL1 回退。
- ESM:两个包均以 ES Module 分发,需要支持 ESM 的浏览器与构建工具。
- 现代浏览器:以近两年内版本的 Chrome、Edge、Firefox、Safari 为目标;满足以上两点的环境即可运行。
两包关系
@modelcubes/viewer-core 独立可用:只需要一个 canvas,不要求任何 UI 框架,适合把渲染能力嵌进你自己的界面。@modelcubes/viewer-ui 依赖 @modelcubes/viewer-core,在其公开 API 之上提供成套的查看器 UI 组件;两者一起用,可以在很少的代码量内搭出「模型树 + 视口 + 工具栏 + 属性面板」的完整查看器。只做渲染集成时安装 viewer-core 即可;需要现成 UI 时再加装 viewer-ui。