Appearance
面组染色
面组(FaceGroupId)是比节点更细的染色粒度:叶子节点的网格按来源 CAD 的 BREP 面划分成面组,viewer.model.setFaceGroupColor() 可以只给节点内的单个面组设覆盖色,而不影响零件其余表面。整件染色用节点级的 setNodesColor(),两者都是可撤销的覆盖色,不改原始材质。
下面的 demo 给每个叶子零件的 0 号面组染上调色板色,直观展示「一个零件内只有部分面变色」:
核心 API
ts
import { SelectionMask, colorFromHex } from "@modelcubes/viewer-core";
// 拾取拿到面组 id(节点 id + 面组 id 成对出现)
const item = viewer.selection.pick(x, y, SelectionMask.Face);
if (item?.faceGroupId !== undefined) {
viewer.model.setFaceGroupColor(item.nodeId, item.faceGroupId, colorFromHex(0xff5566));
}
// 撤销单个 / 查询 / 全部清除
viewer.model.unsetFaceGroupColor(nodeId, fgId);
viewer.model.getFaceGroupColor(nodeId, fgId); // 未设置过返回 null
viewer.model.resetFaceGroupColors();行为要点
FaceGroupId概念:面组对应来源 CAD 模型的 BREP 面分组,是节点内部的细分单元。所有面组 API 都成对接受(nodeId, faceGroupId)——面组 id 以节点为作用域使用。- 获取面组 id 的途径:拾取(
viewer.selection.pick/pickBox,掩码含SelectionMask.Face时命中项带faceGroupId)、selection-changed/hover-changed事件里的SelectionItem,以及 SVG 导出输出的data-face-group-id属性。 - 与节点级染色的区别:
setNodesColor(ids, color)覆盖整个零件的所有表面,适合按状态给整件着色(如 BOM 高亮、检索结果标记);setFaceGroupColor只染节点内单个面组,适合标记加工面、配合面等局部特征。两者都是覆盖色,经各自的unset*/reset*撤销后恢复原始材质色。 - 撤销与查询:
unsetFaceGroupColor(id, fg)撤销单个面组,resetFaceGroupColors()清除全部面组级覆盖;getFaceGroupColor(id, fg)未设置过返回null。 - 前置条件:染色类方法要求模型已加载,否则抛
ViewerError(ModelNotLoaded)。
相关 API
- 概览:viewer.model / viewer.selection — 染色与拾取两个域的设计意图。
ModelManager— 节点级与面组级染色的完整签名。FaceGroupId— 面组 id 类型。- 选择与拾取 — 拾取面组的交互入口。
SelectionItem— 事件与拾取结果中携带faceGroupId的载体。