@addozhang/dsh-3d-model-viewer 0.3.2 → 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

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）、封闭网格体积、耗材重量估算

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)}}
@@ -272,6 +272,78 @@
     ];
   }
   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));
@@ -353,17 +425,26 @@
       }
       visiting.delete(key);
     };
-    const items = [...root.doc.getElementsByTagNameNS("*", "item")];
-    if (items.length) {
-      for (const item of items) {
+    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 });
       }
     } 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;
   }
 
@@ -427,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" },
@@ -484,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;
@@ -573,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;
@@ -587,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]) {
@@ -606,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";
@@ -791,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;
@@ -811,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 })),
@@ -844,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) => {
@@ -927,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.2",
+  "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": {