@sliiu/present-three-bake 0.0.0-stage → 0.1.0

package/dist/cjs/scene-builder.js

@@ -0,0 +1,329 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.buildThreeScene = buildThreeScene;
+exports.createSceneCamera = createSceneCamera;
+exports.getCachedImageTexture = getCachedImageTexture;
+exports.loadImageTexture = loadImageTexture;
+const THREE = __importStar(require("three"));
+const camera_1 = require("./camera");
+const light_rig_1 = require("./light-rig");
+const material_1 = require("./material");
+const path_to_shape_1 = require("./path-to-shape");
+// ────────────────────────────────────────────────────────────────────────────
+// 共享 three.js 场景构建器。offscreen 光栅（bakeSp3d，给 thumbnail/snapshot/pdf）和
+// live WebGL backend（player/editor 实时）都用它，保证两条路径几何/材质/光照一致。
+// 这里只负责「已解析参数(ResolvedScene3D) → THREE.Scene + 相机」，不碰 DOM / canvas。
+// ────────────────────────────────────────────────────────────────────────────
+/**
+ * "前缘有倒角、背面平整、薄侧壁" 的板形几何——复刻 PowerPoint sp3d 在仅声明
+ * `<a:bevelT/>` / `<a:bevelB/>` 没有 extrusionH 时的视觉（如 7.pptx 棋盘）。
+ * 返回 front（贴图面，z=+e/2 内缩 bevelW/H）+ rim（chamfer ring + 薄侧壁），让前面用
+ * textured material 保色、rim 用 PBR 吃光照显倒角折边。详细几何见原始注释保留。
+ */
+function buildFrontBeveledSlab(baseW, baseH, extrusionPx, bevelWpx, bevelHpx) {
+    const e = extrusionPx;
+    const bw = Math.min(bevelWpx, baseW * 0.4);
+    const bh = Math.min(bevelHpx, e * 0.5);
+    const zFront = +e / 2;
+    const zRim = +e / 2 - bh;
+    const zBack = -e / 2;
+    const buildBuf = (pushAll) => {
+        const positions = [];
+        const uvs = [];
+        const normals = [];
+        const pushTri = (p1, p2, p3, uv1, uv2, uv3, n) => {
+            positions.push(...p1, ...p2, ...p3);
+            uvs.push(...uv1, ...uv2, ...uv3);
+            normals.push(...n, ...n, ...n);
+        };
+        const pushQuad = (a, b, c, d, uva, uvb, uvc, uvd, n) => {
+            pushTri(a, b, c, uva, uvb, uvc, n);
+            pushTri(a, c, d, uva, uvc, uvd, n);
+        };
+        pushAll({ pushTri, pushQuad });
+        const geo = new THREE.BufferGeometry();
+        geo.setAttribute("position", new THREE.Float32BufferAttribute(positions, 3));
+        geo.setAttribute("uv", new THREE.Float32BufferAttribute(uvs, 2));
+        geo.setAttribute("normal", new THREE.Float32BufferAttribute(normals, 3));
+        return geo;
+    };
+    const front = buildBuf(({ pushQuad }) => {
+        const u0 = bw / baseW, u1 = 1 - bw / baseW;
+        const v0 = bh / baseH, v1 = 1 - bh / baseH;
+        pushQuad([bw, bh, zFront], [baseW - bw, bh, zFront], [baseW - bw, baseH - bh, zFront], [bw, baseH - bh, zFront], [u0, v0], [u1, v0], [u1, v1], [u0, v1], [0, 0, 1]);
+    });
+    // 倒角 / 侧壁的 UV 直接取顶点 (x,y) 归一化，让正面贴图**连续地**裹过倒角折边到外缘
+    // （复刻 PowerPoint：image 的 bevel 是「图片本身绕圆边卷过去」，不是一圈灰色画框）。
+    // 之前 rim 全用 (0,0) + 灰色材质 → 正面与灰边之间出现「折痕」、顶部朝相机的倒角是
+    // 一条灰色折面（见 7.pptx slide2 棋盘）。连续 UV + 同一张贴图后，正面与倒角无色差，
+    // 折痕消失，倒角只贡献轮廓上的微弱立体感。
+    const uv = (x, y) => [
+        Math.min(1, Math.max(0, x / baseW)),
+        Math.min(1, Math.max(0, y / baseH)),
+    ];
+    const rim = buildBuf(({ pushQuad }) => {
+        pushQuad([0, 0, zRim], [baseW, 0, zRim], [baseW - bw, bh, zFront], [bw, bh, zFront], uv(0, 0), uv(baseW, 0), uv(baseW - bw, bh), uv(bw, bh), [0, -0.71, 0.71]);
+        pushQuad([bw, baseH - bh, zFront], [baseW - bw, baseH - bh, zFront], [baseW, baseH, zRim], [0, baseH, zRim], uv(bw, baseH - bh), uv(baseW - bw, baseH - bh), uv(baseW, baseH), uv(0, baseH), [0, 0.71, 0.71]);
+        pushQuad([0, 0, zRim], [bw, bh, zFront], [bw, baseH - bh, zFront], [0, baseH, zRim], uv(0, 0), uv(bw, bh), uv(bw, baseH - bh), uv(0, baseH), [-0.71, 0, 0.71]);
+        pushQuad([baseW - bw, bh, zFront], [baseW, 0, zRim], [baseW, baseH, zRim], [baseW - bw, baseH - bh, zFront], uv(baseW - bw, bh), uv(baseW, 0), uv(baseW, baseH), uv(baseW - bw, baseH - bh), [0.71, 0, 0.71]);
+        pushQuad([0, 0, zRim], [0, 0, zBack], [baseW, 0, zBack], [baseW, 0, zRim], uv(0, 0), uv(0, 0), uv(baseW, 0), uv(baseW, 0), [0, -1, 0]);
+        pushQuad([baseW, 0, zRim], [baseW, 0, zBack], [baseW, baseH, zBack], [baseW, baseH, zRim], uv(baseW, 0), uv(baseW, 0), uv(baseW, baseH), uv(baseW, baseH), [1, 0, 0]);
+        pushQuad([baseW, baseH, zRim], [baseW, baseH, zBack], [0, baseH, zBack], [0, baseH, zRim], uv(baseW, baseH), uv(baseW, baseH), uv(0, baseH), uv(0, baseH), [0, 1, 0]);
+        pushQuad([0, baseH, zRim], [0, baseH, zBack], [0, 0, zBack], [0, 0, zRim], uv(0, baseH), uv(0, baseH), uv(0, 0), uv(0, 0), [-1, 0, 0]);
+    });
+    return { front, rim };
+}
+// THREE.ExtrudeGeometry 默认 UVGenerator 会把侧面拉伸成镜像图。给定 baseW/baseH：
+//   - 正/背面：vertex.x/y 归一到 [0,1] 让 image 贴满
+//   - 侧面 / 倒角：固定 (0,0)，等于纹理左上角实色，让 fillColor / rim 主导
+// V 轴：texture.flipY=true → uv.v=1 对应原图最顶行；geom 顶点 y=baseH（顶部）→ uv.v=1。
+function rectFrontUVGenerator(baseW, baseH) {
+    const u = (x) => Math.min(1, Math.max(0, x / baseW));
+    const v = (y) => Math.min(1, Math.max(0, y / baseH));
+    return {
+        generateTopUV: (_geo, vs, ia, ib, ic) => {
+            const xy = (i) => new THREE.Vector2(u(vs[i * 3]), v(vs[i * 3 + 1]));
+            return [xy(ia), xy(ib), xy(ic)];
+        },
+        generateSideWallUV: () => {
+            const z = new THREE.Vector2(0, 0);
+            return [z, z, z, z];
+        },
+    };
+}
+function buildThreeScene(inputs) {
+    const { baseW, baseH, pathD, fill, stroke, resolved, texture, isImage } = inputs;
+    const scene = new THREE.Scene();
+    const r = resolved.sp3d;
+    const fillColor = (0, material_1.pickPrimaryColor)(fill, "#7f7f7f");
+    const explicitExtH = r.extrusionH;
+    const bevelWpx = Math.min(r.bevelT?.w ?? r.bevelB?.w ?? 0, baseW * 0.4);
+    const bevelHpx = Math.min(r.bevelT?.h ?? r.bevelB?.h ?? 0, baseH * 0.4);
+    const hasBevel = r.hasBevel && bevelWpx > 0 && bevelHpx > 0;
+    const useFrontBevelSlab = isImage && hasBevel && !pathD;
+    const useBevel = hasBevel && !isImage;
+    const extrusionPx = explicitExtH > 0
+        ? explicitExtH
+        // image：用 2×bevelHpx 当深度，让 buildFrontBeveledSlab 里 bh=min(bevelHpx, e/2)
+        // 取满 bevelHpx → 顶/底倒角折面有足够宽度被看见（否则顶光下与正面分不开）。
+        : isImage
+            ? Math.max(bevelHpx * 2, 8)
+            : useBevel
+                ? Math.max(bevelHpx * 1.5, 6)
+                : 1;
+    const pp = pathD ? (0, path_to_shape_1.pathDToShapes)(pathD) : null;
+    let geometry = null;
+    let frontGeo = null;
+    let rimGeo = null;
+    let geoCenterX = 0;
+    let geoCenterY = 0;
+    let geoW = baseW;
+    let geoH = baseH;
+    const extrudeOpts = {
+        depth: Math.max(extrusionPx, 0.001),
+        bevelEnabled: useBevel,
+        bevelSegments: 4,
+        bevelSize: bevelWpx,
+        bevelThickness: bevelHpx,
+        curveSegments: 24,
+        UVGenerator: rectFrontUVGenerator(baseW, baseH),
+    };
+    if (pp && pp.shapes.length > 0) {
+        const bbox = pp.bbox;
+        geoW = bbox.maxX - bbox.minX || baseW;
+        geoH = bbox.maxY - bbox.minY || baseH;
+        geoCenterX = (bbox.minX + bbox.maxX) / 2;
+        geoCenterY = (bbox.minY + bbox.maxY) / 2;
+        geometry = new THREE.ExtrudeGeometry(pp.shapes, extrudeOpts);
+    }
+    else if (useFrontBevelSlab) {
+        geoCenterX = baseW / 2;
+        geoCenterY = baseH / 2;
+        const built = buildFrontBeveledSlab(baseW, baseH, extrusionPx, bevelWpx, bevelHpx);
+        frontGeo = built.front;
+        rimGeo = built.rim;
+    }
+    else {
+        geoCenterX = baseW / 2;
+        geoCenterY = baseH / 2;
+        const shape = new THREE.Shape();
+        shape.moveTo(0, 0);
+        shape.lineTo(baseW, 0);
+        shape.lineTo(baseW, baseH);
+        shape.lineTo(0, baseH);
+        shape.lineTo(0, 0);
+        geometry = new THREE.ExtrudeGeometry([shape], extrudeOpts);
+    }
+    const rimColor = r.contourClr ?? fillColor;
+    if (frontGeo && rimGeo) {
+        frontGeo.translate(-geoCenterX, -geoCenterY, -extrusionPx / 2);
+        rimGeo.translate(-geoCenterX, -geoCenterY, -extrusionPx / 2);
+        frontGeo.computeBoundingSphere();
+        frontGeo.computeBoundingBox();
+        rimGeo.computeBoundingSphere();
+        rimGeo.computeBoundingBox();
+        const frontMat = (0, material_1.buildMaterial)(fill, {
+            prst: r.prstMaterial,
+            fallbackColor: fillColor,
+            imageTexture: texture ?? undefined,
+        });
+        // image 倒角 / 侧壁与正面共用贴图（连续 UV），让图片裹过折边而不是露出灰色画框；
+        // 但 rim 走 litTexture + tint 压暗：正面 basic 满亮、折边受光后再乘灰度 → 顶光下
+        // 「上面（倒角折面）」也明显比「前面（正面）」暗，留出区分两个面的折痕。
+        // 无贴图（纯色 shape 不会走 slab 路径，但兜底）时仍回退到 contour / fill 灰边。
+        const rimMat = texture
+            ? (0, material_1.buildMaterial)(fill, {
+                prst: r.prstMaterial,
+                fallbackColor: rimColor,
+                imageTexture: texture,
+                litTexture: true,
+                tint: 0x888888,
+            })
+            : (0, material_1.buildMaterial)(undefined, { prst: r.prstMaterial, fallbackColor: rimColor });
+        scene.add(new THREE.Mesh(frontGeo, frontMat));
+        scene.add(new THREE.Mesh(rimGeo, rimMat));
+    }
+    else if (geometry) {
+        geometry.translate(-geoCenterX, -geoCenterY, -extrusionPx / 2);
+        geometry.computeBoundingSphere();
+        geometry.computeBoundingBox();
+        const material = (0, material_1.buildMaterial)(fill, {
+            prst: r.prstMaterial,
+            fallbackColor: fillColor,
+            imageTexture: texture ?? undefined,
+        });
+        scene.add(new THREE.Mesh(geometry, material));
+    }
+    if (stroke && r.contourW && r.contourW > 0) {
+        const geomForEdges = frontGeo ?? geometry;
+        if (geomForEdges) {
+            const edges = new THREE.EdgesGeometry(geomForEdges, 12);
+            const lineMat = new THREE.LineBasicMaterial({ color: r.contourClr ?? "#000000", linewidth: 1 });
+            scene.add(new THREE.LineSegments(edges, lineMat));
+        }
+    }
+    (0, light_rig_1.applyLightRig)(scene, resolved.lightRig.rig, resolved.lightRig.dir);
+    const dispose = () => {
+        scene.traverse((obj) => {
+            if (obj instanceof THREE.Mesh || obj instanceof THREE.LineSegments) {
+                obj.geometry?.dispose();
+                const mat = obj.material;
+                if (Array.isArray(mat))
+                    for (const m of mat)
+                        m.dispose();
+                else
+                    mat?.dispose();
+            }
+        });
+    };
+    return { scene, geoW, geoH, dispose };
+}
+/**
+ * 把相机摆到「物体在 viewW×viewH 视口里接近 1:1（含 pad 余量）」的距离并构建 THREE 相机。
+ * offscreen 与 live 共用：offscreen 传 padded canvas 尺寸；live 传显示像素尺寸。
+ */
+function createSceneCamera(cam, geoW, geoH, viewW, viewH, pad, backdrop) {
+    const aspect = viewW / viewH;
+    const camFit = 1 + pad;
+    let distance;
+    if (cam.isOrtho) {
+        distance = Math.max(Math.max(geoW, geoH) * 4, 200);
+    }
+    else {
+        const fovRad = (cam.fov * Math.PI) / 180;
+        const tanHalf = Math.tan(fovRad / 2);
+        const dByH = (geoH * camFit) / (2 * tanHalf);
+        const dByW = (geoW * camFit) / (2 * tanHalf * aspect);
+        distance = Math.max(dByH, dByW, 200);
+    }
+    const { camera } = (0, camera_1.setupCamera)(cam, new THREE.Vector3(0, 0, 0), distance, backdrop);
+    if (camera instanceof THREE.PerspectiveCamera) {
+        camera.aspect = aspect;
+        camera.updateProjectionMatrix();
+    }
+    else if (camera instanceof THREE.OrthographicCamera) {
+        const halfX = (viewW / 2) * camFit;
+        const halfY = (viewH / 2) * camFit;
+        camera.left = -halfX;
+        camera.right = halfX;
+        camera.top = halfY;
+        camera.bottom = -halfY;
+        camera.updateProjectionMatrix();
+    }
+    return camera;
+}
+// 已解码的 <img> 缓存（按 src）。解码是 loadImageTexture 里唯一的异步成本；缓存后
+// live WebGLShapeBackend 在每帧重建（编辑器拖动）时可以 **同步** 拿到贴图、当帧首渲，
+// 避免"重建 backend → 异步等贴图 → 3D 空一帧"造成的闪屏。THREE.Texture 不进缓存
+// （它绑定具体 renderer 的 GPU 资源、且会被各自 backend dispose），每次按缓存的
+// HTMLImageElement 新建一个轻量 Texture 即可。
+const decodedImageCache = new Map();
+function textureFromImage(img) {
+    const tex = new THREE.Texture(img);
+    tex.colorSpace = THREE.SRGBColorSpace;
+    tex.needsUpdate = true;
+    return tex;
+}
+/**
+ * 若 src 对应图片此前已被 loadImageTexture 解码过，则同步返回一个新 Texture；否则
+ * 返回 null（调用方需走异步 loadImageTexture）。用于热路径（拖动重建）下零延迟首渲。
+ */
+function getCachedImageTexture(src) {
+    const img = decodedImageCache.get(src);
+    if (!img || !img.complete || img.naturalWidth === 0)
+        return null;
+    return textureFromImage(img);
+}
+// dataURL / URL 都走 Image → THREE.Texture，避免 TextureLoader 在 headless 对 dataURL 失败。
+async function loadImageTexture(src) {
+    if (typeof Image === "undefined")
+        return null;
+    const cached = decodedImageCache.get(src);
+    if (cached && cached.complete && cached.naturalWidth > 0) {
+        return textureFromImage(cached);
+    }
+    const img = await new Promise((resolve) => {
+        const i = new Image();
+        i.crossOrigin = "anonymous";
+        i.onload = () => resolve(i);
+        i.onerror = () => resolve(null);
+        i.src = src;
+    });
+    if (!img || !img.complete || img.naturalWidth === 0)
+        return null;
+    decodedImageCache.set(src, img);
+    return textureFromImage(img);
+}

package/dist/cjs/shape-path.js

@@ -0,0 +1,71 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.SHAPE_3D_PAD = exports.IMAGE_3D_PAD = void 0;
+exports.shapeSupports3D = shapeSupports3D;
+exports.shape3DPad = shape3DPad;
+exports.shape3DInfo = shape3DInfo;
+exports.shape3DPathD = shape3DPathD;
+// 实时 WebGL 与离屏烘焙共用的形状范围。文字框用正面贴图（字形画进这张图）再挤出。
+// 组合本身不进；组合里的子形状各自判断。
+const SHAPE_3D_KINDS = new Set(["image", "rect", "ellipse", "path", "polygon", "text"]);
+/** 与 bake-sp3d 的 image pad 一致：贴图几何收在 bbox 内。 */
+exports.IMAGE_3D_PAD = 0.05;
+/** 与 bake-sp3d 的非 image pad 一致：倒角会对称外扩。 */
+exports.SHAPE_3D_PAD = 0.15;
+function shapeSupports3D(s) {
+    return SHAPE_3D_KINDS.has(s.kind);
+}
+function shape3DPad(kind) {
+    // 文字正面是字形贴图，留白和 image slab 一样，避免倒角把字挤出画布。
+    return kind === "image" || kind === "text" ? exports.IMAGE_3D_PAD : exports.SHAPE_3D_PAD;
+}
+/** 形状上真正参加 3D 的那份参数。文字只看 bodyPr，避免和形状自己的 spPr 3D 各挤出一次。 */
+function shape3DInfo(s) {
+    if (s.kind === "text")
+        return s.body3D;
+    return s.meta3D;
+}
+/**
+ * 非 image 形状的挤出轮廓，坐标系是形状本地的 0..bbox。
+ * image 不需要轮廓（正面是贴图 slab）。rect 也不返回：scene-builder 在没有 pathD
+ * 时已经按 bbox 挤出一个矩形。path 的 `d` 原样传入，由场景构建器按路径自身包围盒居中。
+ */
+function shape3DPathD(s) {
+    if (s.kind === "path")
+        return s.d || undefined;
+    if (s.kind === "ellipse")
+        return ellipsePathD(s.bbox.w, s.bbox.h);
+    if (s.kind === "polygon" && s.points.length > 0)
+        return polygonPathD(s);
+    return undefined;
+}
+function ellipsePathD(w, h) {
+    const rx = w / 2;
+    const ry = h / 2;
+    const k = 0.5522847498;
+    const cx = rx;
+    const cy = ry;
+    const kx = rx * k;
+    const ky = ry * k;
+    return [
+        `M ${cx} 0`,
+        `C ${cx + kx} 0 ${w} ${cy - ky} ${w} ${cy}`,
+        `C ${w} ${cy + ky} ${cx + kx} ${h} ${cx} ${h}`,
+        `C ${cx - kx} ${h} 0 ${cy + ky} 0 ${cy}`,
+        `C 0 ${cy - ky} ${cx - kx} 0 ${cx} 0`,
+        "Z",
+    ].join(" ");
+}
+function polygonPathD(s) {
+    const minX = Math.min(...s.points.map((p) => p[0]));
+    const minY = Math.min(...s.points.map((p) => p[1]));
+    const absolute = Math.abs(minX - s.bbox.x) < 2 && Math.abs(minY - s.bbox.y) < 2;
+    const pts = absolute
+        ? s.points.map(([x, y]) => [x - s.bbox.x, y - s.bbox.y])
+        : s.points;
+    const [x0, y0] = pts[0];
+    let d = `M ${x0} ${y0}`;
+    for (let i = 1; i < pts.length; i++)
+        d += ` L ${pts[i][0]} ${pts[i][1]}`;
+    return `${d} Z`;
+}

package/dist/cjs/types.js

@@ -0,0 +1,2 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });

package/dist/esm/bake-sp3d.js

@@ -0,0 +1,140 @@
+import * as THREE from "three";
+import { applyTextureCrop } from "./material.js";
+import { resolveScene3D } from "./resolve.js";
+import { buildThreeScene, createSceneCamera, loadImageTexture } from "./scene-builder.js";
+import { shape3DPad } from "./shape-path.js";
+// 离屏光栅路径：把 3D 烘成 PNG，给无法挂 live WebGL context 的消费者用
+// （thumbnail=SvgBackend / snapshot+pdf=CanvasBackend / parse-time bake3D 选项）。
+// player/editor 的实时视图改走 packages/renderer 的 WebGLShapeBackend（live three.js）。
+// 几何/材质/光照/相机与 live 完全共用 scene-builder，确保两条路径一致。
+export async function bakeSp3d(req) {
+    if (!hasOffscreenCanvas() && typeof document === "undefined")
+        return null;
+    const dpr = req.dpr ?? Math.min(2, getDevicePixelRatio());
+    const isImage = !!req.imageSrc;
+    // image bake：slab 几何全收在 bbox 内不外溢，只需 5% pad 吸收 3D 投影 overshoot；
+    // 非 image（path/纯色 extrude）倒角对称外扩，留 15%。
+    const pad = req.pad ?? shape3DPad(isImage ? "image" : "path");
+    const baseW = Math.max(8, req.bbox.w);
+    const baseH = Math.max(8, req.bbox.h);
+    const padW = Math.ceil(baseW * (1 + pad));
+    const padH = Math.ceil(baseH * (1 + pad));
+    const pixelW = Math.ceil(padW * dpr);
+    const pixelH = Math.ceil(padH * dpr);
+    const canvas = createBakeCanvas(pixelW, pixelH);
+    if (!canvas)
+        return null;
+    let renderer = null;
+    let dispose;
+    try {
+        renderer = new THREE.WebGLRenderer({
+            canvas: canvas,
+            alpha: true,
+            antialias: true,
+            premultipliedAlpha: true,
+        });
+        renderer.setPixelRatio(1);
+        renderer.setSize(pixelW, pixelH, false);
+        renderer.setClearColor(0x000000, 0);
+        // 输出端补 SRGB，否则 PBR 在 linear 空间写到 canvas 会让纯白变灰、棋盘对比被压扁。
+        renderer.outputColorSpace = THREE.SRGBColorSpace;
+        const resolved = resolveScene3D({ sp3d: req.sp3d, scene3d: req.scene3d });
+        let texture = null;
+        if (req.imageSrc) {
+            texture = await loadImageTexture(req.imageSrc);
+            if (texture)
+                applyTextureCrop(texture, req.cropRect);
+        }
+        const built = buildThreeScene({
+            baseW,
+            baseH,
+            pathD: req.pathD,
+            fill: req.fill,
+            stroke: req.stroke,
+            resolved,
+            texture,
+            isImage,
+        });
+        dispose = built.dispose;
+        const camera = createSceneCamera(resolved.camera, built.geoW, built.geoH, padW, padH, pad, resolved.backdrop);
+        renderer.render(built.scene, camera);
+        const src = await canvasToDataURL(canvas);
+        if (!src)
+            return null;
+        return {
+            src,
+            natural: { w: pixelW, h: pixelH },
+            paddedBBox: {
+                x: req.bbox.x - (padW - baseW) / 2,
+                y: req.bbox.y - (padH - baseH) / 2,
+                w: padW,
+                h: padH,
+            },
+        };
+    }
+    catch (err) {
+        if (typeof console !== "undefined")
+            console.warn("[three-bake] bake failed", err);
+        return null;
+    }
+    finally {
+        dispose?.();
+        if (renderer) {
+            renderer.forceContextLoss();
+            renderer.dispose();
+        }
+    }
+}
+function getDevicePixelRatio() {
+    if (typeof window !== "undefined" && window.devicePixelRatio)
+        return window.devicePixelRatio;
+    return 1;
+}
+function hasOffscreenCanvas() {
+    return typeof OffscreenCanvas !== "undefined";
+}
+function createBakeCanvas(w, h) {
+    if (typeof OffscreenCanvas !== "undefined") {
+        try {
+            return new OffscreenCanvas(w, h);
+        }
+        catch {
+            // fall through
+        }
+    }
+    if (typeof document !== "undefined") {
+        const c = document.createElement("canvas");
+        c.width = w;
+        c.height = h;
+        return c;
+    }
+    return null;
+}
+async function canvasToDataURL(c) {
+    if (typeof OffscreenCanvas !== "undefined" && c instanceof OffscreenCanvas) {
+        try {
+            const blob = await c.convertToBlob({ type: "image/png" });
+            return await blobToDataURL(blob);
+        }
+        catch {
+            return null;
+        }
+    }
+    if (typeof HTMLCanvasElement !== "undefined" && c instanceof HTMLCanvasElement) {
+        try {
+            return c.toDataURL("image/png");
+        }
+        catch {
+            return null;
+        }
+    }
+    return null;
+}
+function blobToDataURL(blob) {
+    return new Promise((resolve, reject) => {
+        const fr = new FileReader();
+        fr.onload = () => resolve(typeof fr.result === "string" ? fr.result : "");
+        fr.onerror = () => reject(fr.error);
+        fr.readAsDataURL(blob);
+    });
+}

package/dist/esm/camera.js

@@ -0,0 +1,58 @@
+import * as THREE from "three";
+// 相机方位约定（与几何 / UV 协调）：
+//   - ExtrudeGeometry / slab 把 Shape 的 (0..baseW, 0..baseH) 作为顶点 (x,y,0)，
+//     rectFrontUVGenerator 把 Shape.y=0 → uv.v=0、y=baseH → uv.v=1；texture.flipY=true
+//     使 uv.v=1 取图像最顶行 → "图像顶部" 位于 three.js 世界 +Y。
+//   - PowerPoint 的 perspectiveAbove / perspectiveRelaxedModerately 等 "Above" 类语义是
+//     相机在物体上方俯视，"图像顶部应远离相机"（梯形上窄下宽）。要让 lat=-15° 这样的
+//     负值产生这种效果，相机必须落在世界 -Y 方向（远离图像顶部、贴近底部），即
+//     eye.y = +D·sin(lat)（lat<0 → eye.y<0）。
+//   - `<a:backdrop>` 把场景平面从默认 +Z 旋到 norm，并用 up 覆盖相机 up。identity / 全 0
+//     在 resolveBackdrop 已滤掉，这里只处理非默认。
+export function setupCamera(cam, target, distance, backdrop) {
+    const { lat, lon, rev, fov, isOrtho } = cam;
+    const latRad = THREE.MathUtils.degToRad(lat);
+    const lonRad = THREE.MathUtils.degToRad(lon);
+    const revRad = THREE.MathUtils.degToRad(rev);
+    const lookAt = backdrop
+        ? new THREE.Vector3(target.x + backdrop.target.x, target.y + backdrop.target.y, target.z + backdrop.target.z)
+        : target.clone();
+    const eye = new THREE.Vector3();
+    eye.x = distance * Math.cos(latRad) * Math.sin(lonRad);
+    eye.y = distance * Math.sin(latRad);
+    eye.z = distance * Math.cos(latRad) * Math.cos(lonRad);
+    eye.add(lookAt);
+    const basisQ = backdrop?.forward &&
+        new THREE.Quaternion().setFromUnitVectors(new THREE.Vector3(0, 0, 1), new THREE.Vector3(backdrop.forward.x, backdrop.forward.y, backdrop.forward.z));
+    if (basisQ) {
+        eye.sub(lookAt).applyQuaternion(basisQ).add(lookAt);
+    }
+    const up = new THREE.Vector3(0, -1, 0).applyAxisAngle(new THREE.Vector3(0, 0, 1), revRad);
+    if (basisQ)
+        up.applyQuaternion(basisQ);
+    if (backdrop?.up)
+        up.set(backdrop.up.x, backdrop.up.y, backdrop.up.z);
+    let camera;
+    if (isOrtho) {
+        const half = distance * 0.6;
+        const ortho = new THREE.OrthographicCamera(-half, half, half, -half, 0.1, distance * 10);
+        ortho.position.copy(eye);
+        ortho.up.copy(up);
+        ortho.lookAt(lookAt);
+        ortho.updateProjectionMatrix();
+        camera = ortho;
+    }
+    else {
+        const persp = new THREE.PerspectiveCamera(fov, 1, 0.1, distance * 10);
+        persp.position.copy(eye);
+        persp.up.copy(up);
+        persp.lookAt(lookAt);
+        persp.updateProjectionMatrix();
+        camera = persp;
+    }
+    if (cam.zoom !== undefined && cam.zoom > 0) {
+        camera.zoom = cam.zoom;
+        camera.updateProjectionMatrix();
+    }
+    return { camera, isOrtho };
+}

package/dist/esm/index.js

@@ -0,0 +1,9 @@
+export * from "./types.js";
+export { bakeSp3d } from "./bake-sp3d.js";
+export { createBake3DRuntime, needs3DRender, needs3DBake } from "./runtime.js";
+// PowerPoint 效果层 + 共享场景构建器（live WebGLShapeBackend 复用）。
+export { resolveScene3D, resolveCamera, resolveSp3D, resolveLightRig, resolveBackdrop, } from "./resolve.js";
+export { buildThreeScene, createSceneCamera, loadImageTexture, getCachedImageTexture, } from "./scene-builder.js";
+export { applyTextureCrop } from "./material.js";
+export { shapeSupports3D, shape3DInfo, shape3DPathD, shape3DPad, IMAGE_3D_PAD, SHAPE_3D_PAD, } from "./shape-path.js";
+export { CAMERA_PRESETS } from "./presets.js";