FMB Viewer

Appearance

模型对比 ​

引擎没有内置的 compare API——对比是一种集成模式:每个 canvas 创建一个独立的 Viewer 实例,把要对比的模型(或同一模型的不同版本)分别装进去,再把两边的相机视角对齐。本页提炼 demo compare.ts 的做法:它是一个对照渲染页,用白底、无导航立方体、确定性标准视角把模型渲成可逐像素比对的基准图。

下面的 demo 即该对照视图——单画布的对照渲染页(双画布并排的完整写法见下方代码),URL 参数 view 可切 top / front / iso 等标准视角:

可交互 demo · 白底对照渲染(无导航立方体),鼠标拖拽旋转,滚轮缩放在新窗口打开 ↗

核心 API ​

ts
// 每个 canvas 一个独立 Viewer 实例,互不共享状态
const left = await Viewer.create(leftCanvas, { navCube: { enabled: false } });
const right = await Viewer.create(rightCanvas, { navCube: { enabled: false } });

await left.model.load(bytesV1);
await right.model.load(bytesV2);

// 对齐视角(demo 的做法):统一白底 + 同一标准视角 + 无动画取景
for (const v of [left, right]) {
  v.background.setColor({ r: 1, g: 1, b: 1 });
  v.camera.setStandardView("iso");
  v.camera.fitView({}, { animate: false });
}

行为要点 ​

  • 多实例天然支持:Viewer.create(canvas) 每次调用产出独立实例(各自的 WebGL 上下文、场景与事件总线),并排对比就是「双 canvas、双 Viewer」,无需引擎侧任何特殊支持。
  • 确定性视角对齐:demo 的对照策略是不做实时联动,而是两边各自执行同一组确定性指令——setStandardView(view) + fitView({}, { animate: false }),必要时再用 camera.setState({ position }) 沿视线拉近(demo 的 fill 参数)。同一模型 + 同一指令序列 ⇒ 可逐像素比对的输出。
  • 位姿复制:更精确的对齐可以直接搬运相机状态——camera.getState() 返回 { position, target, up, fov },把它传给另一侧的 camera.setState() 即完成复制。
  • 实时联动属于上层:公开 API 提供 camera-changed 事件(交互期间约 30Hz 节流)与 setState,联动可由上层订阅一侧事件、推位姿给另一侧实现;引擎与 demo 都未内置「双向同步 + 防回环」逻辑,双向联动时需自行截断回声(例如位姿未变化则不再回推)。
  • 环境一致性:对比渲染质量时注意把两侧的质量参数也对齐(viewer.quality,如色调映射、环境贴图经 quality.setEnvironment() 设置)。

相关 API ​