@modelcubes/viewer-ui

FMB Viewer 即用 UI 组件层:6 个标准 Web Components(<fmb-viewer-context> / <fmb-model-tree> / <fmb-toolbar> / <fmb-inspector> / <fmb-view-cube> / <fmb-context-menu>),基于 Lit 构建,框架无关——原生 HTML、React 19、Vue 3 均可直接挂载,只经 @modelcubes/viewer-core 公开 API 与事件总线通信。

安装

@modelcubes/viewer-core 是 peer dependency,需同时安装:

npm install @modelcubes/viewer-ui @modelcubes/viewer-core

快速开始

具名导入组件类并保留引用(防止 re-export-only 入口被 tree-shake 掉导致 <fmb-*> 未注册),再把 Viewer 实例赋给 <fmb-viewer-context> 即完成全部接线:

import "@modelcubes/viewer-ui/tokens.css";
import { FmbViewerContext, FmbModelTree, FmbToolbar, FmbInspector } from "@modelcubes/viewer-ui";
import { Viewer } from "@modelcubes/viewer-core";

void [FmbViewerContext, FmbModelTree, FmbToolbar, FmbInspector];

const canvas = document.getElementById("canvas") as HTMLCanvasElement;
const ctx = document.getElementById("ctx") as HTMLElement & { viewer?: Viewer };

const viewer = await Viewer.create(canvas, { antialias: true });
ctx.viewer = viewer; // 接线完成:所有后代组件自动激活

<fmb-viewer-context id="ctx">
  <fmb-model-tree></fmb-model-tree>
  <div class="viewport">
    <canvas id="canvas"></canvas>
    <div class="toolbar-overlay"><fmb-toolbar dock></fmb-toolbar></div>
  </div>
  <fmb-inspector></fmb-inspector>
</fmb-viewer-context>

完整文档见 FMB Viewer 文档站(发布后更新链接)。

License

专有软件,详见 LICENSE.md。