@addozhang/dsh-3d-model-viewer 0.3.1 → 0.4.0

package/README.md

@@ -22,6 +22,9 @@ active sessions.
 - **CAD-style navigation** — left-drag rotates (true trackball, no gimbal
   limits), right / middle / Shift-drag pans, wheel zooms (perspective and
   orthographic), double-click resets.
+- **Multi-plate switcher** — 3MF projects carrying a Bambu plate table get
+  an "全部 | 盘 N…" toolbar row; each plate renders alone, re-centered, with
+  its own dimension labels.
 - **View presets** — front/back/left/right/top/bottom use an orthographic
   camera and show labelled bounding-box dimensions (mm); iso is the classic
   perspective view. Keyboard: `1-7` presets, `R` reset (when the canvas is
@@ -74,9 +77,9 @@ cookie for its private server instance. Env knobs: `E2E_WORKSPACE`,
 
 ## Current limitations
 
-- 3MF support covers mesh geometry + `basematerials` colors; build-item
-  transforms, per-component overrides, and slicer-specific metadata are not
-  reconstructed.
+- 3MF support covers mesh geometry, build-item and component transforms
+  (multi-plate projects render every plate at its true position), and
+  `basematerials` part colors; slicer-specific metadata is ignored.
 - Files are capped at 250 MB / 5 M triangles; meshes above 400 k triangles
   fall back to bounding-box-only picking (moot with button-based drag modes).
 - This is a geometry previewer: no slicing, no printability analysis.

package/README.zh-CN.md

@@ -11,6 +11,7 @@ DeepSeek Harness Web GUI 的本地交互式 STL / 3MF 预览插件。模型可
 - **侧边栏原生文档预览**：在「文件」面板点击 `.stl` / `.3mf`，右侧文档标签页像打开 Markdown / PDF / 图片一样打开 3D 视图（通过公开的 `documentPreviews` + `sidebar.right.tab.document` 扩展点接入）
 - **会话实时抽屉**：当前会话引用了模型时，会话标题栏出现 `3D 预览 (N)` 按钮，打开带搜索列表的预览抽屉；文件在磁盘上变化后约 1.5 秒自动重新解析
 - **CAD 式导航**：左键拖动旋转（真轨迹球，无万向锁）、右键 / 中键 / Shift 拖动平移、滚轮缩放（透视与正交通用）、双击复位
+- **多盘切换**：带 Bambu 盘表的 3MF 工程会出现「全部 | 盘 N…」工具行，逐盘渲染、自动居中、尺寸标签随盘切换
 - **视角预设**：前/后/左/右/顶/底使用正交相机并显示包围盒三向尺寸标签（毫米）；等轴测为经典透视。画布聚焦时快捷键 `1-7` 切视角、`R` 复位
 - **模型颜色**：七个预置色板（含白色）+ 原生取色器；STL 单色渲染，3MF 的部件颜色（`basematerials`）按顶点多色显示
 - **打印检查**（当前由 `PRINT_INSIGHTS_ENABLED` 开关关闭）：打印机体积适配（默认 X2D）、封闭网格体积、耗材重量估算
@@ -46,7 +47,7 @@ e2e 脚本依赖本机 python3 + playwright + Chrome，从 `~/.dsh/.credentials.
 
 ## 当前限制
 
-- 3MF 支持网格几何 + `basematerials` 颜色；build-item 变换、组件级覆盖与切片器私有元数据不还原
+- 3MF 支持网格几何、build-item / component 变换（多盘工程按真实盘位渲染全部盘）与 `basematerials` 部件颜色；切片器私有元数据忽略
 - 单文件限制 250 MB / 500 万三角面；超过 40 万三角面的网格拾取只用包围盒（按键式拖动模式下影响甚微）
 - 这是几何预览器：不做切片，不做可制造性分析
 

package/lib/client.js

@@ -64,7 +64,7 @@
 .d3v-views{display:flex;gap:3px;background:rgba(129,138,150,.18);border-radius:8px;padding:4px;flex-wrap:wrap;max-width:calc(100% - 20px);justify-content:flex-end}
 @media(prefers-color-scheme:dark){.d3v-views{background:rgba(10,12,17,.65)}}
 .d3v-view-btn{appearance:none;border:0;background:transparent;color:#3f4854;border-radius:6px;padding:4px 8px;cursor:pointer;font:inherit;font-size:11px;line-height:1.2;white-space:nowrap}
-.d3v-view-btn:hover{background:rgba(96,165,250,.22);color:#173a63}
+.d3v-view-btn:hover{background:rgba(96,165,250,.22);color:#173a63}.d3v-view-btn.active{background:rgba(96,165,250,.4);color:#0f2a4d;font-weight:600}
 @media(prefers-color-scheme:dark){.d3v-view-btn{color:#c8d0dc}.d3v-view-btn:hover{color:#e8eef7}}
 .d3v-colors{display:flex;gap:5px;align-items:center;background:rgba(129,138,150,.18);border-radius:8px;padding:5px}
 @media(prefers-color-scheme:dark){.d3v-colors{background:rgba(10,12,17,.65)}}
@@ -247,12 +247,108 @@
     if (hex.length === 3) hex = [...hex].map((c) => c + c).join("");
     return [0, 2, 4].map((i) => parseInt(hex.slice(i, i + 2), 16) / 255);
   }
+  var MAT4_IDENTITY = [1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1];
+  function mat4FromTransform(text) {
+    if (typeof text !== "string") return MAT4_IDENTITY;
+    const parts = text.trim().split(/\s+/);
+    if (parts.length === 0 || parts.length === 1 && parts[0] === "") return MAT4_IDENTITY;
+    if (parts.length !== 12) throw Error(`3MF \u53D8\u6362\u9700\u8981 12 \u4E2A\u6570\u5B57\uFF0C\u5F97\u5230 ${parts.length}`);
+    const m = parts.map(Number);
+    for (const v of m) if (!Number.isFinite(v)) throw Error("3MF \u53D8\u6362\u5305\u542B\u975E\u6570\u5B57");
+    return [m[0], m[1], m[2], 0, m[3], m[4], m[5], 0, m[6], m[7], m[8], 0, m[9], m[10], m[11], 1];
+  }
+  function mat4Mul(child, parent) {
+    const out = new Array(16);
+    for (let r = 0; r < 4; r++) for (let c = 0; c < 4; c++) {
+      out[r * 4 + c] = child[r * 4] * parent[c] + child[r * 4 + 1] * parent[4 + c] + child[r * 4 + 2] * parent[8 + c] + child[r * 4 + 3] * parent[12 + c];
+    }
+    return out;
+  }
+  function mat4Apply(m, x, y, z) {
+    return [
+      x * m[0] + y * m[4] + z * m[8] + m[12],
+      x * m[1] + y * m[5] + z * m[9] + m[13],
+      x * m[2] + y * m[6] + z * m[10] + m[14]
+    ];
+  }
+  var P_NS = "http://schemas.microsoft.com/3dmanufacturing/production/2015/06";
+  function buildPlates(items, plateOfObject, plateMeta, data) {
+    if (!plateOfObject || plateOfObject.size === 0) return null;
+    const byPlate = /* @__PURE__ */ new Map();
+    for (const it of items) {
+      const plate = plateOfObject.get(String(it.objectid));
+      if (plate === void 0) continue;
+      if (!byPlate.has(plate)) byPlate.set(plate, []);
+      byPlate.get(plate).push(it);
+    }
+    if (byPlate.size < 2) return null;
+    const metaById = new Map((plateMeta || []).map((m) => [String(m.id), m]));
+    const ids = [...byPlate.keys()].sort((a, b) => Number(a) - Number(b));
+    const plates = [];
+    for (const id of ids) {
+      const ranges = byPlate.get(id).map((it) => ({ startTri: it.startTri, triCount: it.triCount }));
+      let lo = [Infinity, Infinity, Infinity], hi = [-Infinity, -Infinity, -Infinity], triangles = 0;
+      for (const r of ranges) {
+        triangles += r.triCount;
+        for (let i = r.startTri * 18; i < (r.startTri + r.triCount) * 18; i += 6) {
+          for (let j = 0; j < 3; j++) {
+            const v = data[i + j];
+            if (v < lo[j]) lo[j] = v;
+            if (v > hi[j]) hi[j] = v;
+          }
+        }
+      }
+      if (!Number.isFinite(lo[0])) continue;
+      const size = lo.map((x, i) => hi[i] - x);
+      plates.push({
+        id,
+        label: (metaById.get(String(id)) || {}).label || `\u76D8 ${id}`,
+        ranges,
+        triangles,
+        lo,
+        hi,
+        size,
+        center: lo.map((x, i) => (x + hi[i]) / 2),
+        radius: Math.hypot(...size) / 2 || 1
+      });
+    }
+    return plates.length > 1 ? plates : null;
+  }
+  function readPlateTable(files) {
+    const entry = files.find((f) => f.name.replace(/^\//, "") === "Metadata/model_settings.config");
+    if (!entry) return null;
+    try {
+      const doc = new DOMParser().parseFromString(new TextDecoder().decode(entry.data), "application/xml");
+      if (doc.querySelector("parsererror")) return null;
+      const plateOfObject = /* @__PURE__ */ new Map();
+      const plateMeta = [];
+      for (const plate of doc.getElementsByTagName("plate")) {
+        let id = null, label = "";
+        for (const md of plate.getElementsByTagName("metadata")) {
+          if (md.getAttribute("key") === "plater_id") id = md.getAttribute("value");
+          if (md.getAttribute("key") === "plater_name" && md.getAttribute("value")) label = md.getAttribute("value");
+        }
+        if (id === null) continue;
+        plateMeta.push({ id, label });
+        for (const inst of plate.getElementsByTagName("model_instance")) {
+          for (const md of inst.getElementsByTagName("metadata")) {
+            if (md.getAttribute("key") === "object_id") {
+              const objectId = md.getAttribute("value");
+              if (!plateOfObject.has(objectId)) plateOfObject.set(objectId, id);
+            }
+          }
+        }
+      }
+      return plateOfObject.size ? { plateOfObject, plateMeta } : null;
+    } catch {
+      return null;
+    }
+  }
   async function parse3mf(buf) {
     const files = await unzip(buf);
     const models = files.filter((f) => /\.model$/i.test(f.name));
     if (!models.length) throw Error("3MF \u4E2D\u6CA1\u6709 .model \u7F51\u683C");
-    const vals = [], cols = [];
-    let triangles = 0, sawColor = false;
+    const registry = /* @__PURE__ */ new Map();
     for (const f of models) {
       const doc = new DOMParser().parseFromString(new TextDecoder().decode(f.data), "application/xml");
       if (doc.querySelector("parsererror")) continue;
@@ -261,36 +357,94 @@
       for (const bm of doc.getElementsByTagNameNS("*", "basematerials")) {
         materialMap[bm.getAttribute("id")] = [...bm.getElementsByTagNameNS("*", "base")].map((base) => parseHexColor(base.getAttribute("color")));
       }
-      const emit = (mesh2, defaultColor, materialColors) => {
-        const verts = [...mesh2.getElementsByTagNameNS("*", "vertex")].map((v) => [+v.getAttribute("x") * factor, +v.getAttribute("y") * factor, +v.getAttribute("z") * factor]);
-        for (const t of mesh2.getElementsByTagNameNS("*", "triangle")) {
-          const ids = [+t.getAttribute("v1"), +t.getAttribute("v2"), +t.getAttribute("v3")];
-          const a = verts[ids[0]], b = verts[ids[1]], c = verts[ids[2]];
-          if (!a || !b || !c) continue;
-          const ux = b[0] - a[0], uy = b[1] - a[1], uz = b[2] - a[2], vx = c[0] - a[0], vy = c[1] - a[1], vz = c[2] - a[2];
-          const nx = uy * vz - uz * vy, ny = uz * vx - ux * vz, nz = ux * vy - uy * vx, l = Math.hypot(nx, ny, nz) || 1;
-          for (const v of [a, b, c]) vals.push(v[0], v[1], v[2], nx / l, ny / l, nz / l);
-          let color = defaultColor;
-          const matid = t.getAttribute("matid");
-          if (materialColors && matid !== null && materialColors[+matid - 1]) color = materialColors[+matid - 1];
-          if (color) sawColor = true;
-          if (color) cols.push(color[0], color[1], color[2], color[0], color[1], color[2], color[0], color[1], color[2]);
-          else cols.push(0, 0, 0, 0, 0, 0, 0, 0, 0);
-          triangles++;
-          if (triangles > 5e6) throw Error("\u6A21\u578B\u8D85\u8FC7 500 \u4E07\u4E09\u89D2\u9762\u9650\u5236");
+      const objects = /* @__PURE__ */ new Map();
+      for (const obj of doc.getElementsByTagNameNS("*", "object")) {
+        if (obj.getAttribute("id") !== null) objects.set(obj.getAttribute("id"), obj);
+      }
+      registry.set(f.name.replace(/^\//, ""), { doc, factor, materialMap, objects, name: f.name.replace(/^\//, "") });
+    }
+    let rootName = "3D/3dmodel.model";
+    const rels = files.find((f) => f.name.replace(/^\//, "") === "_rels/.rels");
+    if (rels) {
+      try {
+        const relDoc = new DOMParser().parseFromString(new TextDecoder().decode(rels.data), "application/xml");
+        for (const rel of relDoc.getElementsByTagNameNS("*", "Relationship")) {
+          if ((rel.getAttribute("Type") || "").endsWith("/3dmodel")) {
+            rootName = (rel.getAttribute("Target") || "").replace(/^\//, "");
+            break;
+          }
         }
-      };
-      const objects = [...doc.getElementsByTagNameNS("*", "object")];
-      for (const obj of objects) {
-        const materialColors = materialMap[obj.getAttribute("pid")] || null;
-        const objColor = materialColors ? materialColors[+(obj.getAttribute("pindex") || 0)] || null : null;
-        for (const mesh2 of obj.getElementsByTagNameNS("*", "mesh")) emit(mesh2, objColor, materialColors);
+      } catch {
+      }
+    }
+    const root = registry.get(rootName) || registry.get("3D/3dmodel.model");
+    if (!root) throw Error("3MF \u4E2D\u627E\u4E0D\u5230\u6839\u6A21\u578B");
+    const vals = [], cols = [];
+    let triangles = 0, sawColor = false;
+    const emitMesh = (mesh2, objEl, M, fileRec) => {
+      const materialColors = objEl ? fileRec.materialMap[objEl.getAttribute("pid")] || null : null;
+      const objColor = materialColors ? materialColors[+(objEl.getAttribute("pindex") || 0)] || null : null;
+      const verts = [...mesh2.getElementsByTagNameNS("*", "vertex")].map((v) => [+v.getAttribute("x") * fileRec.factor, +v.getAttribute("y") * fileRec.factor, +v.getAttribute("z") * fileRec.factor]);
+      for (const t of mesh2.getElementsByTagNameNS("*", "triangle")) {
+        const ids = [+t.getAttribute("v1"), +t.getAttribute("v2"), +t.getAttribute("v3")];
+        const raw = [verts[ids[0]], verts[ids[1]], verts[ids[2]]];
+        if (!raw[0] || !raw[1] || !raw[2]) continue;
+        const pts = raw.map((p) => M === MAT4_IDENTITY ? p : mat4Apply(M, p[0], p[1], p[2]));
+        const [a, b, c] = pts;
+        const ux = b[0] - a[0], uy = b[1] - a[1], uz = b[2] - a[2], vx = c[0] - a[0], vy = c[1] - a[1], vz = c[2] - a[2];
+        const nx = uy * vz - uz * vy, ny = uz * vx - ux * vz, nz = ux * vy - uy * vx, l = Math.hypot(nx, ny, nz) || 1;
+        for (const p of pts) vals.push(p[0], p[1], p[2], nx / l, ny / l, nz / l);
+        let color = objColor;
+        const matid = t.getAttribute("matid");
+        if (materialColors && matid !== null && materialColors[+matid - 1]) color = materialColors[+matid - 1];
+        if (color) {
+          sawColor = true;
+          cols.push(color[0], color[1], color[2], color[0], color[1], color[2], color[0], color[1], color[2]);
+        } else {
+          cols.push(0, 0, 0, 0, 0, 0, 0, 0, 0);
+        }
+        triangles++;
+        if (triangles > 5e6) throw Error("\u6A21\u578B\u8D85\u8FC7 500 \u4E07\u4E09\u89D2\u9762\u9650\u5236");
+      }
+    };
+    const emitObject = (fileRec, objId, M, visiting) => {
+      const obj = fileRec.objects.get(objId);
+      if (!obj) return;
+      const key = fileRec.name + "#" + objId;
+      if (visiting.has(key)) return;
+      visiting.add(key);
+      const mesh2 = obj.getElementsByTagNameNS("*", "mesh")[0] || null;
+      if (mesh2) emitMesh(mesh2, obj, M, fileRec);
+      for (const comp of obj.getElementsByTagNameNS("*", "component")) {
+        const path = comp.getAttributeNS(P_NS, "path");
+        const childRec = path ? registry.get(path.replace(/^\//, "")) : fileRec;
+        if (!childRec) continue;
+        const cm = mat4FromTransform(comp.getAttribute("transform"));
+        const combined = M === MAT4_IDENTITY && cm === MAT4_IDENTITY ? MAT4_IDENTITY : mat4Mul(cm, M);
+        emitObject(childRec, comp.getAttribute("objectid"), combined, visiting);
+      }
+      visiting.delete(key);
+    };
+    const buildItems = [...root.doc.getElementsByTagNameNS("*", "item")];
+    const itemRanges = [];
+    if (buildItems.length) {
+      for (const item of buildItems) {
+        const start = triangles;
+        emitObject(root, item.getAttribute("objectid"), mat4FromTransform(item.getAttribute("transform")), /* @__PURE__ */ new Set());
+        if (triangles > start) itemRanges.push({ objectid: item.getAttribute("objectid"), startTri: start, triCount: triangles - start });
       }
-      if (!objects.length) for (const mesh2 of doc.getElementsByTagNameNS("*", "mesh")) emit(mesh2, null, null);
+    } else {
+      for (const id of root.objects.keys()) emitObject(root, id, MAT4_IDENTITY, /* @__PURE__ */ new Set());
     }
     if (!triangles) throw Error("3MF \u4E2D\u6CA1\u6709\u53EF\u663E\u793A\u7684\u4E09\u89D2\u7F51\u683C");
-    const mesh = finishMesh(new Float32Array(vals), triangles);
+    const data = new Float32Array(vals);
+    const mesh = finishMesh(data, triangles);
     if (sawColor) mesh.colors = new Float32Array(cols);
+    const plateTable = readPlateTable(files);
+    if (plateTable) {
+      const plates = buildPlates(itemRanges, plateTable.plateOfObject, plateTable.plateMeta, data);
+      if (plates) mesh.plates = plates;
+    }
     return mesh;
   }
 
@@ -354,10 +508,28 @@
     const cw = mvp[3] * x + mvp[7] * y + mvp[11] * z + mvp[15] || 1;
     return [(cx / cw * 0.5 + 0.5) * w, (0.5 - cy / cw * 0.5) * hh];
   }
-  function ViewPresetBar({ onPick, color, onPickColor }) {
+  function ViewPresetBar({ onPick, color, onPickColor, plates, plate, onPickPlate }) {
     return h(
       "div",
       { className: "d3v-viewtools", "data-dsh-3d-views": "" },
+      plates && plates.length > 1 && h(
+        "div",
+        { className: "d3v-views", title: "\u5207\u6362\u6253\u5370\u76D8" },
+        h("button", {
+          type: "button",
+          className: "d3v-view-btn" + (plate < 0 ? " active" : ""),
+          onPointerDown: (e) => e.stopPropagation(),
+          onClick: () => onPickPlate(-1)
+        }, "\u5168\u90E8"),
+        plates.map((p, i) => h("button", {
+          key: p.id,
+          type: "button",
+          className: "d3v-view-btn" + (plate === i ? " active" : ""),
+          title: `${p.label} \xB7 ${p.triangles.toLocaleString()} \u25B3`,
+          onPointerDown: (e) => e.stopPropagation(),
+          onClick: () => onPickPlate(i)
+        }, p.label))
+      ),
       h(
         "div",
         { className: "d3v-views" },
@@ -411,19 +583,27 @@
     ["y", [hi[0] + margin, (lo[1] + hi[1]) / 2, lo[2]]],
     ["z", [hi[0] + margin, lo[1], (lo[2] + hi[2]) / 2]]
   ];
-  function Viewer({ mesh, resetToken, view, color }) {
+  function Viewer({ mesh, resetToken, view, color, plate }) {
     const ref = React.useRef(null);
     const orient = React.useRef({ rot: DEFAULT_ROT(), ortho: false });
     const pan = React.useRef([0, 0]);
     const redraw = React.useRef(() => {
     });
     const colorRef = React.useRef(null);
+    const plateRef = React.useRef(-1);
     React.useEffect(() => {
       if (!view) return;
       orient.current = { rot: buildRot(view.yaw, view.pitch), ortho: !!view.ortho };
       pan.current = [0, 0];
       redraw.current();
     }, [view]);
+    React.useEffect(() => {
+      const idx = Number.isInteger(plate) && mesh.plates && plate >= 0 && plate < mesh.plates.length ? plate : -1;
+      if (plateRef.current === idx) return;
+      plateRef.current = idx;
+      pan.current = [0, 0];
+      redraw.current();
+    }, [plate, mesh]);
     React.useEffect(() => {
       if (!color) return;
       colorRef.current = color;
@@ -500,12 +680,13 @@
         gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
         const aspect = w / hh;
         const proj = o.ortho ? orthographic(aspect, orthoHalfSize(zoom)) : perspective(aspect);
-        const scale = 1 / mesh.radius;
+        const active = plateRef.current >= 0 && mesh.plates && mesh.plates[plateRef.current] || mesh;
+        const scale = 1 / active.radius;
         const model = new Float32Array(rot);
         for (const idx of [0, 1, 2, 4, 5, 6, 8, 9, 10]) model[idx] *= scale;
-        model[12] = -(model[0] * mesh.center[0] + model[4] * mesh.center[1] + model[8] * mesh.center[2]) + pan.current[0];
-        model[13] = -(model[1] * mesh.center[0] + model[5] * mesh.center[1] + model[9] * mesh.center[2]) + pan.current[1];
-        model[14] = -(model[2] * mesh.center[0] + model[6] * mesh.center[1] + model[10] * mesh.center[2]) - zoom;
+        model[12] = -(model[0] * active.center[0] + model[4] * active.center[1] + model[8] * active.center[2]) + pan.current[0];
+        model[13] = -(model[1] * active.center[0] + model[5] * active.center[1] + model[9] * active.center[2]) + pan.current[1];
+        model[14] = -(model[2] * active.center[0] + model[6] * active.center[1] + model[10] * active.center[2]) - zoom;
         lastModel = model;
         gl.useProgram(program);
         const col = colorRef.current || DEFAULT_COLOR;
@@ -514,15 +695,16 @@
         gl.uniformMatrix4fv(gl.getUniformLocation(program, "model"), false, model);
         const mvp = mul(proj, model);
         gl.uniformMatrix4fv(gl.getUniformLocation(program, "mvp"), false, mvp);
-        gl.drawArrays(gl.TRIANGLES, 0, mesh.data.length / 6);
+        const ranges = active.ranges || [{ startTri: 0, triCount: mesh.data.length / 18 }];
+        for (const r of ranges) gl.drawArrays(gl.TRIANGLES, r.startTri * 3, r.triCount * 3);
         if (o.ortho) {
-          const m = mesh.radius * 0.18;
+          const m = active.radius * 0.18;
           const inPlane = {
             x: Math.abs(rot[2]) < 0.9,
             y: Math.abs(rot[6]) < 0.9,
             z: Math.abs(rot[10]) < 0.9
           };
-          const anchors = DIM_ANCHORS(mesh.lo, mesh.hi, m);
+          const anchors = DIM_ANCHORS(active.lo, active.hi, m);
           for (const [axis, point] of anchors) {
             const el = labelEls[axis];
             if (!inPlane[axis]) {
@@ -533,7 +715,7 @@
             el.style.display = "";
             el.style.left = sx + "px";
             el.style.top = sy + "px";
-            el.textContent = mesh.size[axis === "x" ? 0 : axis === "y" ? 1 : 2].toFixed(2);
+            el.textContent = active.size[axis === "x" ? 0 : axis === "y" ? 1 : 2].toFixed(2);
           }
         } else {
           for (const el of Object.values(labelEls)) el.style.display = "none";
@@ -718,6 +900,7 @@
     const [state, setState] = React.useState({ status: bytes ? "loading" : "waiting" });
     const [view, setView] = React.useState();
     const [color, setColor] = React.useState(DEFAULT_COLOR);
+    const [plate, setPlate] = React.useState(-1);
     React.useEffect(() => {
       if (!bytes) return;
       let live = true;
@@ -738,8 +921,8 @@
     return h(
       "div",
       { className: "d3v-doc", "data-dsh-3d-docbody": "" },
-      state.status === "ready" && h(Viewer, { mesh: state.mesh, resetToken: 0, view, color }),
-      state.status === "ready" && h(ViewPresetBar, { onPick: (yaw, pitch, ortho) => setView({ yaw, pitch, ortho }), color, onPickColor: setColor }),
+      state.status === "ready" && h(Viewer, { mesh: state.mesh, resetToken: 0, view, color, plate }),
+      state.status === "ready" && h(ViewPresetBar, { onPick: (yaw, pitch, ortho) => setView({ yaw, pitch, ortho }), color, onPickColor: setColor, plates: state.mesh.plates, plate, onPickPlate: setPlate }),
       state.status === "loading" && h("div", { className: "d3v-doc-status" }, tt("loading")),
       state.status === "waiting" && h("div", { className: "d3v-doc-status" }, tt("waiting")),
       state.status === "error" && h("div", { className: "d3v-error" }, tt("failed", { message: state.message })),
@@ -771,6 +954,7 @@
     const s = useStore(sessionStore);
     const [reset, setReset] = React.useState(0), [query, setQuery] = React.useState("");
     const [view, setView] = React.useState(), [color, setColor] = React.useState(DEFAULT_COLOR);
+    const [plate, setPlate] = React.useState(-1);
     const selected = s.files.find((x) => x.path === s.selected) || s.files[0];
     const shown = s.files.filter((f) => f.path.toLowerCase().includes(query.trim().toLowerCase()));
     const load = React.useCallback(async (path) => {
@@ -854,8 +1038,8 @@
         h(
           "div",
           { className: "d3v-stage" },
-          s.mesh && h(Viewer, { mesh: s.mesh, resetToken: reset, view, color }),
-          s.mesh && h(ViewPresetBar, { onPick: (yaw, pitch, ortho) => setView({ yaw, pitch, ortho }), color, onPickColor: setColor }),
+          s.mesh && h(Viewer, { mesh: s.mesh, resetToken: reset, view, color, plate }),
+          s.mesh && h(ViewPresetBar, { onPick: (yaw, pitch, ortho) => setView({ yaw, pitch, ortho }), color, onPickColor: setColor, plates: s.mesh.plates, plate, onPickPlate: setPlate }),
           s.loading && h("div", { className: "d3v-loading" }, "\u6B63\u5728\u66F4\u65B0\u6A21\u578B\u2026"),
           s.error && h("div", { className: "d3v-error" }, s.error),
           s.mesh && h("div", { className: "d3v-help" }, "\u5DE6\u952E\u65CB\u8F6C \xB7 \u53F3\u952E/Shift \u5E73\u79FB \xB7 \u6EDA\u8F6E\u7F29\u653E \xB7 \u53CC\u51FB\u590D\u4F4D \xB7 \u6587\u4EF6\u53D8\u5316\u81EA\u52A8\u66F4\u65B0")

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@addozhang/dsh-3d-model-viewer",
-  "version": "0.3.1",
+  "version": "0.4.0",
   "description": "Interactive STL/3MF viewer plugin for the DeepSeek Harness Web GUI: sidebar document preview, live session drawer, CAD navigation, orthographic dimension labels, 3MF part colors.",
   "license": "MIT",
   "engines": {