项目介绍
CustomForge 是一个用于构建商品个性化定制体验的浏览器端 Library，它将二维设计画布与实时三维商品预览连接起来
用户可以在设计画布中添加文字、Logo、背景和装饰图片，CustomForge 会把合成纹理实时映射到带 UV 的三维模型上
当前版本
0.1.0 是 CustomForge 的首个非预发布版本
公共 API 遵循语义化版本规则，Design JSON version 1 文档在整个 0.1.x 版本线内保持可读取兼容
工作原理
mermaid
flowchart LR
A[文字和图片] --> B[二维设计画布]
C[可选基础纹理] --> B
B --> D[实时 Canvas 纹理]
E[带 UV 的 GLB 或 GLTF] --> F[三维商品]
D --> F
F --> G[交互式预览]模型内部已经保存 UV 坐标，用于描述平面纹理上的点与三维表面上的点如何对应
CustomForge 更新的是纹理而不是模型几何体，因此准备正确的 UV 模型是接入真实商品的关键
选择接入层级
CustomForge 提供两个公开入口
| 入口 | 适用场景 | 需要自行构建的内容 |
|---|---|---|
customforge/workbench | 快速开始或嵌入完整编辑器 | 商品数据、配置和外围业务流程 |
customforge | 构建完全自定义的界面 | 所有按钮、面板、Dialog 和应用布局 |
除非项目已有独立设计系统或非常特殊的编辑流程，否则建议从 Workbench 开始
两个入口使用相同的 ProductCustomizer 引擎，并生成相同格式的 Design JSON
已有能力
- 基于 Fabric.js 的二维设计画布
- 基于 Three.js 的 GLB 和 GLTF 商品查看器
- Canvas 到三维纹理的实时同步
- 支持选择、变换和丰富排版的文字与图片对象
- 图层命名、显隐、锁定、排序和删除
- 撤销与重做历史
- Design JSON 保存与恢复
- 合成纹理 PNG 导出
- 支持品牌、主题、文案、功能开关和预设素材的可配置 Workbench
- 无需外部资源即可开发的内置 GLB 杯子，完整杯体
MugBody与可打印层PrintArea相互独立
当前边界
当前版本聚焦于一张逻辑设计画布映射到一个命名 Mesh 的第一个材质槽
以下能力暂未实现
- 多个可独立编辑的商品表面
- 需要额外解码器的 GLTF 压缩扩展
- 高级对齐、吸附和印刷出血工具
- 官方 Vue、React 或其他框架适配器
CustomForge 本身与框架无关，只要在目标 DOM 元素可用后挂载，就可以接入任意前端框架