FMB Viewer

Appearance

相机与导航 ​

viewer.camera 管相机位姿与导航:取景适配(fitView)、标准视图切换(setStandardView)、位姿读写(getState / setState)与交互开关。鼠标 / 触控交互由引擎内置,集成方无需自己接管事件。

在下面的 demo 中直接体验内置交互:左键拖拽旋转、滚轮缩放、右键拖拽平移,按空格键取景适配:

可交互 demo · 鼠标拖拽旋转,滚轮缩放,空格键 fit在新窗口打开 ↗

核心 API ​

ts
// 取景适配:整模型 / 指定节点 / 显式包围盒,默认 400ms 平滑动画
viewer.camera.fitView(); // 整模型(无选中时)
viewer.camera.fitView({ nodeIds: [someNodeId] }, { animate: false }); // 指定节点,跳过动画

// 标准视图(Z-up / CATIA 约定)
viewer.camera.setStandardView("iso");

// 订阅相机变化(交互期间约 30Hz 节流)
viewer.on("camera-changed", (e) => console.log(e.position, e.target));

// 视角存取:getState 取快照,setState 恢复
const saved = viewer.camera.getState(); // { position, target, up, fov }
viewer.camera.setState(saved);

行为要点 ​

  • fitView 的取景目标按优先级回落:显式 target.box → target.nodeIds 指定的节点 → 当前选中集(支持面 / 边子实体粒度)→ 整个模型。无模型或解析不出范围时静默返回。取景保持当前视线方向,只调整距离与注视点。

  • 动画默认开:FitViewOptions 的 animate 默认 true、durationMs 默认 400;交互期间用户按下指针会立即取消进行中的相机动画。

  • setStandardView 接受 7 个视图名:"front" / "back" / "right" / "left" / "top" / "bottom" / "iso",语义按 Z-up / CATIA 约定(Front=+X, Right=+Y, Top=+Z),各视图的方位与屏幕 up 向量见坐标系与单位。以最近一次取景范围为中心定距取景,模型尚未取过景时为 no-op。

  • camera-changed 约 30Hz 节流:交互期间相机位姿变化以约 30Hz 上限对外广播(payload 含 position / target / up),适合驱动小地图、视角同步等 UI;程序化 setState 也会触发。

  • 内置交互键位:左键拖拽旋转(orbit)、滚轮缩放、右键拖拽平移。setNavMode("pan") 可把左键改为平移;setInteractionEnabled(false) 关闭全部指针交互(API 控制不受影响)。

  • 触控手势同样内置(平板 / 手机),集成方无需自己处理 touch 事件:

    手势行为
    单指拖动旋转;setNavMode("pan") 下改为平移
    单指轻点拾取选中(同鼠标左键单击)
    单指长按触发 context-menu-requested 事件
    双指捏合缩放,按手指间距 1:1(手指张开 2 倍即放大 2 倍)
    双指拖动平移

    单指旋转与鼠标左键走同一套运算(固定 0.5°/px、无极点钳制、up 跟手翻滚),所以平板与桌面手感一致。引擎会把画布的 touch-action / 文本选中 / iOS 长按放大镜一并关掉,页面不会在拖模型时跟着滚动。

  • getState / setState 做视角存取:getState() 返回 { position, target, up, fov } 快照,可序列化保存;setState() 部分更新(只写传入字段),立即生效并触发 camera-changed,同时取消进行中的相机动画(如 fitView 取景过渡)。

相关 API ​