FMB Viewer

Appearance

快速开始 ​

目标:15 行代码内,在页面上渲染一个 CAD 模型。

1. 准备 canvas ​

html
<canvas id="viewport" style="width: 100%; height: 480px"></canvas>

2. 创建 Viewer 并加载模型 ​

viewer.model.load() 直接接受 URL 字符串(也支持 URL / Uint8Array / Blob / 自定义 Range fetcher):

ts
import { Viewer } from "@modelcubes/viewer-core";

const canvas = document.querySelector<HTMLCanvasElement>("#viewport")!;
const viewer = await Viewer.create(canvas);

await viewer.model.load("/fixtures/demo.fmbv");
viewer.camera.fitView();

纯 JavaScript 用户:去掉 <HTMLCanvasElement> 泛型与 ! 即可;顶层 await 需要 <script type="module">(或包在 async 函数里)。

如果字节已经在内存里(比如自己控制下载、或从文件选择器读入),传 Uint8Array 也可以:

ts
const resp = await fetch("/fixtures/demo.fmbv");
const bytes = new Uint8Array(await resp.arrayBuffer());
await viewer.model.load(bytes);

示例模型可从本站下载:demo.fmbv(约 230 KB),放到静态资源目录的 fixtures/ 子目录(Vite 项目即 public/fixtures/),或把示例里的 URL 改成你的实际路径。

发生了什么 ​

  • Viewer.create(canvas) — 初始化渲染器并启动渲染循环,resolve 后 viewer 即可使用。选项里 antialias(硬件 MSAA)默认开启,通常无需配置。
  • viewer.model.load(...) — 触发 model-loading 事件并开始加载。结构树骨架就绪时触发 model-skeleton-ready,此时 load 的 Promise 就 resolve 了,模型已可交互;几何分块继续在后台流式到达,期间触发 model-geom-progress,全部加载完成后触发 model-loaded。加载失败时 Promise 会 reject 一个带 code 的 ViewerError,用 try/catch 处理即可。
  • viewer.camera.fitView() — 把相机取景到模型整体,默认带 400ms 平滑动画(可经 FitViewOptions 关闭)。

此时拖拽即可旋转模型,滚轮缩放,右键平移。

下一步 ​

  • 框架集成 — Vue 3 与纯 JavaScript 的完整示例工程与生命周期集成要点。
  • 指南 — 按功能域逐项了解加载、相机、选择、剖切、爆炸等能力,每页配可交互 demo。
  • API 参考 — Viewer 入口与各 manager 的完整签名。
  • 想理解引擎的整体设计(单一入口 + manager + 事件总线)与坐标系约定,参见架构总览与坐标系与单位;.fmbv 数据从哪来、load() 还接受哪些来源,见模型数据。