快速开始

本指南使用内置演示商品创建完整的 CustomForge Workbench，暂时不需要准备模型或纹理文件

1 创建挂载元素

html

<div id="app"></div>

Workbench 必须拥有可以被浏览器计算出的高度

css

html,
body,
#app {
  height: 100%;
  margin: 0;
}

2 创建 Workbench

import { createWorkbench } from 'customforge/workbench'
import 'customforge/style.css'

const workbench = await createWorkbench({
  container: '#app',
})

workbench.customizer.addText({
  text: 'CustomForge',
  x: 690,
  y: 320,
  width: 220,
  color: '#182023',
})
workbench.customizer.clearSelection()

createWorkbench() 会在编辑器、查看器、商品和实时纹理桥接全部就绪后完成

省略 fontSize 时使用默认的 22px

由于没有传入 product，本例会使用随包提供的 cup_decal_small_margins.glb 杯子及其 PrintArea Mesh

3 操作编辑器

初始 Workbench 包含

位于左侧的二维纹理编辑器
用于对象排序和状态管理的图层面板
位于右侧的实时三维商品预览
文字和图片 Dialog
选中文字时出现的 Office 风格上下文格式栏
撤销、重做、Design JSON、商品加载、PNG 导出和相机控制

在二维画布上拖动、缩放或旋转文字时，三维预览会立即更新

4 加载自己的商品

准备好带 UV 的模型后，可以在初始化时传入远程地址

const workbench = await createWorkbench({
  container: '#app',
  product: {
    modelUrl: 'https://cdn.example.com/products/mug.glb',
    textureUrl: 'https://cdn.example.com/products/mug-base.png',
    surfaceMesh: 'PrintArea',
    textureFlipY: false,
  },
})

textureUrl 可以省略，modelUrl 指向的模型必须包含有效 UV 坐标

为 CustomForge 导出模型前请先阅读产品资源

5 释放资源

每个实例都持有 DOM 监听器、Fabric 状态、WebGL 资源和观察器

页面或宿主组件不再使用实例时必须销毁它

window.addEventListener('beforeunload', () => workbench.destroy(), {
  once: true,
})

在 Vue、React 或其他组件框架中，应在组件卸载生命周期中调用 destroy()

快速开始 ​

1 创建挂载元素 ​

2 创建 Workbench ​

3 操作编辑器 ​

4 加载自己的商品 ​

5 释放资源 ​