Appearance
<fmb-scene-settings>
场景设置面板。它不碰模型,只调「你怎么看这个模型」:视口背景、选中高亮的配色与效果、细节层级。四组设置共用一套视觉语法(色板 + 分段控件),每一项改完立即生效并写入 localStorage。
这条边界是刻意的——凡是会改变模型呈现、需要随文档保存的东西(零件颜色、显隐、位置),都不在这里,而在 <fmb-inspector> 与工具条里。本面板管的是这台机器上这个用户的偏好。
四组设置
| 分组 | 改什么 | 落到哪个 API |
|---|---|---|
| 背景 | 视口背景色(预设色板或自定义) | viewer.background |
| 选中高亮 | 分别为「零件 / 面 / 边」三个粒度设高亮色 | viewer.selection 的样式 |
| 选中效果 | 染色(tint)/ 描边(outline)/ 两者 | SelectionHighlightMode |
| 细节层级 | 流畅优先 / 均衡 / 精细优先 | LodMode |
最小用法
面板是一个常规块级元素(不自带绝对定位),宿主决定把它放进抽屉、弹窗还是侧栏:
html
<fmb-viewer-context id="ctx">
<canvas id="canvas"></canvas>
<aside class="settings-drawer">
<fmb-scene-settings></fmb-scene-settings>
</aside>
</fmb-viewer-context>ts
const panel = document.querySelector("fmb-scene-settings")!;
panel.addEventListener("close", () => drawer.classList.remove("open"));属性
| 名称 | 类型 | property / attribute | 默认值 | 说明 |
|---|---|---|---|---|
viewer | Viewer | undefined | 仅 property(attribute: false) | undefined | 通常经 <fmb-viewer-context> 注入 |
事件
| 事件 | detail | 触发时机 |
|---|---|---|
close | 无 | 用户点面板右上角的关闭按钮。组件不会自己隐藏——收起抽屉是宿主的事 |
行为细节
- 改完立即生效:没有「确定 / 应用」按钮,每次改动直接调对应的 viewer API。
- 持久化到
localStorage(键fmb-scene-settings:v1),下次打开自动恢复;面板底部有一键复位。 - 细节层级是模型级的:换模型后组件会重新应用当前偏好,不需要宿主介入。
- 高亮色分粒度:「零件 / 面 / 边」三个 tab 各自一套色板——面高亮和零件高亮用同一个颜色会分不清选的是哪一层。
- 占满宿主高度:
:host是display: flex; height: 100%,内部自行滚动,所以抽屉容器给一个确定高度即可。 - 空态安全:
viewer未注入时控件仍可操作并写入偏好,注入后应用。
可定制点
面板底色 / 描边 / 圆角 / 阴影走 --fmb-surface、--fmb-border、--fmb-radius-xl、--fmb-shadow-lg;标题图标与选中态走 --fmb-accent;文字走 --fmb-fg-1 / --fmb-fg-2;字体走 --fmb-font。全表见主题定制。