Appearance
viewer.navcube — NavCubeManager
设计意图
viewer.navcube 是导航立方体域,管引擎内建的 WebGL NavCube:画布角落那个随相机姿态实时旋转的小立方,点它的面 / 棱 / 角切到对应视角。公开面只有五个方法:setEnabled(开关渲染与交互)、setAnchor(停靠到画布四角之一)、setSize(视口边长,CSS 像素)、goHome(动画回默认等轴测主视角)与查询 isEnabled()。
初始状态由构造期 ViewerOptions.navCube 决定:enabled 默认 true、anchor 默认 "top-right"、size 默认 185。它与 viewer-ui 的 <fmb-view-cube> 组件是二选一的关系:内建 NavCube 是 WebGL 绘制、随相机旋转的姿态指示器;<fmb-view-cube> 是纯 CSS 的静态视图切换按钮组。改用后者时创建引擎传 navCube: { enabled: false },避免右上角重叠。
何时用它:运行时开关 / 挪角落 / 调大小(如给覆盖在画布上的自家 UI 让位)、工具条的「回主视角」按钮。程序化切标准视图("front" / "iso" 等)归 viewer.camera 的 setStandardView。
典型用法
给右上角的自家面板让位(挪到左下 + 缩小):
ts
viewer.navcube.setAnchor("bottom-left");
viewer.navcube.setSize(120); // CSS 像素,默认 185工具条「回主视角」按钮(动画回默认等轴测):
ts
homeBtn.onclick = () => viewer.navcube.goHome();运行时整体开关(如进入无干扰的截图模式):
ts
const wasOn = viewer.navcube.isEnabled();
viewer.navcube.setEnabled(false);
// ……截图完毕恢复
viewer.navcube.setEnabled(wasOn);注意事项
- 与
<fmb-view-cube>二选一:两者默认都停靠右上角,同时开会重叠;选内建得到「随相机旋转的姿态指示器」,选组件得到「纯 CSS 静态切换按钮」,取舍见 fmb-view-cube。 setSize单位是 CSS 像素(视口边长),内部自动乘设备像素比,高分屏不需要自己换算。goHome回的是引擎默认等轴测主视角,不是ViewerOptions.initialCamera给的初始位姿;要回自定义初始位姿用viewer.camera.setState存取快照。- 所有方法在 viewer 销毁后抛
ViewerError(Disposed),包括查询isEnabled()。
完整签名与延伸
NavCubeManager— 全部方法的精确签名。NavCubeAnchor/ViewerOptions— 停靠角取值与构造期初始配置。- viewer-ui:fmb-view-cube — CSS 视图立方组件(与内建 NavCube 二选一)。
- 相邻域:viewer.camera — 程序化标准视图与位姿快照。