A
纯 2D Canvas 合成
CANVAS 2D · 零依赖
印刷层裁进壳形，再用内阴影压边缘、线性渐变叠高光。 没有任何第三方库，首屏就是可交互状态，低端安卓机也不掉帧。 代价是只有一个正面角度。
额外依赖0 KB
首屏可交互即时
可视角度仅正面
移动端功耗极低
每机型美术成本仅数值规格
预览渲染 · 技术路线对比
同一份毫米规格，
两种手感。
两个版本共用同一个编辑器、同一份机型几何、同一张印刷层 canvas ——
唯一的差别是 B 多了一个 3D 视图。所以你在下面感受到的任何差异，
都只来自渲染方式本身，不掺杂 UI 或数据的干扰。
两版都能导出 300DPI + 3mm 出血的真实印刷文件 —— 预览好不好看是次要的，
预览和印刷对不对得上才是生意。
B
2D + three.js 3D
WEBGL · 点击才加载
默认仍是版本 A 的 2D。点「3D」才动态 import three.js， 用同一份毫米规格挤出壳体、同一张印刷层当贴图 —— 2D 改一笔，3D 立刻同步，因为它们本来就是一张 canvas。
额外依赖137 KB (br)
首屏可交互即时（懒加载）
可视角度360° + 包边
移动端功耗中
每机型美术成本仍是数值规格
三个不显然的设计决定
01 · 光影不进印刷层
renderArtwork() 只画要印的东西，不含任何高光阴影。
2D 的内阴影、3D 的 clearcoat 各自后加。
否则假高光会被真的印到壳上。
02 · 不建 3D 模型
壳体由 ExtrudeGeometry 从毫米规格实时挤出，摄像头孔是
Shape.holes。加一个机型 = 加一行数字，
不是排一次建模外包。
03 · 工作分辨率 ≈152DPI
拖动时按 6px/mm 重绘，够喂 3D 贴图又不卡；
300DPI 只在导出时算一次。别让每一次拖动都渲染 180 万像素。