<fmb-view-cube>

CSS 3D 视图立方。纯 DOM/CSS 实现(perspective + transform-style: preserve-3d),不占用 WebGL:点击 TOP / FRONT / RIGHT 面切到对应标准视图,右下角 Home 按钮回等轴测。

与引擎内建 NavCube 二选一

viewer-core 引擎自带 WebGL NavCube(默认开启)。改用本组件时,创建引擎传 navCube: { enabled: false } 关掉内建立方,避免右上角重叠——详见总览与接线。

最小用法

<fmb-viewer-context id="ctx">
  <!-- 容器须 position: relative,立方绝对定位其右上角 -->
  <div class="viewport" style="position: relative">
    <canvas id="canvas"></canvas>
    <fmb-view-cube></fmb-view-cube>
  </div>
</fmb-viewer-context>

属性

名称	类型	property / attribute	默认值	说明
viewer	Viewer | undefined	仅 property(attribute: false)	undefined	通常经 <fmb-viewer-context> 注入

事件

无对外事件,点击直接调用 Viewer 实例的相机 API。

行为细节

• 视图切换:三个可见面分别调 camera.setStandardView("top" | "front" | "right"),Home 按钮(⌂)调 setStandardView("iso");引擎按 Z-up / CATIA 约定解释这些视图(见坐标系与单位)。
• 静态姿态:立方以固定角度渲染(rotateX(-26deg) rotateY(32deg)),不随相机姿态旋转——它是一组视图切换按钮,不是相机姿态指示器;需要跟随旋转的指示器请用引擎内建 NavCube。
• 定位::host 自带 position: absolute; top: 14px; right: 14px(78×78px,z-index: 10),所以必须放在 position: relative 的视口容器内。
• 轴标注:左下角的 X(红)/ Y(绿)/ Z(蓝)为静态图例,颜色硬编码,不参与交互。
• 空态:viewer 未注入时点击为安全空操作。

可定制点

面底色与 hover 走 --fmb-surface、--fmb-surface-2、--fmb-accent、--fmb-accent-soft;描边走 --fmb-border-strong(面)与 --fmb-border(Home 按钮);文字走 --fmb-fg-2;轴标注字体走 --fmb-mono。全表见主题定制。