customforge 0.1.0-alpha.0 → 0.1.0-alpha.1
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +30 -22
- package/LICENSE +201 -201
- package/README.md +132 -116
- package/README.zh-CN.md +130 -116
- package/dist/index.js.map +1 -1
- package/dist/style.css +11 -11
- package/package.json +72 -68
package/README.md
CHANGED
|
@@ -32,15 +32,15 @@ CustomForge connects a familiar 2D design surface to a UV-mapped 3D model:
|
|
|
32
32
|
- Preview every canvas change on a 3D product in real time
|
|
33
33
|
- Load remote GLB/GLTF models and optional base textures
|
|
34
34
|
- Select the customizable surface by mesh name
|
|
35
|
-
- Rotate and zoom the 3D preview with OrbitControls
|
|
36
|
-
- Export the composed texture as a PNG
|
|
37
|
-
- Save and restore editable objects through versioned Design JSON
|
|
35
|
+
- Rotate and zoom the 3D preview with OrbitControls
|
|
36
|
+
- Export the composed texture as a PNG
|
|
37
|
+
- Save and restore editable objects through versioned Design JSON
|
|
38
38
|
|
|
39
39
|
The included workbench starts with a procedural cup, so the project works immediately without external assets
|
|
40
40
|
|
|
41
|
-
## Repository Development
|
|
42
|
-
|
|
43
|
-
Requirements: Node.js 22+ and pnpm 11+
|
|
41
|
+
## Repository Development
|
|
42
|
+
|
|
43
|
+
Requirements: Node.js 22+ and pnpm 11+
|
|
44
44
|
|
|
45
45
|
```bash
|
|
46
46
|
pnpm install
|
|
@@ -49,39 +49,55 @@ pnpm dev
|
|
|
49
49
|
|
|
50
50
|
Open the URL printed by Vite
|
|
51
51
|
|
|
52
|
-
The built-in demo appears with a UV workspace on the left and a live 3D preview on the right
|
|
53
|
-
|
|
54
|
-
## npm Alpha Package
|
|
55
|
-
|
|
56
|
-
CustomForge is
|
|
52
|
+
The built-in demo appears with a UV workspace on the left and a live 3D preview on the right
|
|
53
|
+
|
|
54
|
+
## npm Alpha Package
|
|
55
|
+
|
|
56
|
+
CustomForge is available from the npm Registry under the `alpha` dist-tag and the API and Design JSON Schema may change between alpha versions
|
|
57
57
|
|
|
58
|
-
|
|
58
|
+
Install the current public alpha with:
|
|
59
59
|
|
|
60
60
|
```powershell
|
|
61
61
|
pnpm add customforge@alpha
|
|
62
|
-
pnpm add fabric three
|
|
63
62
|
```
|
|
64
63
|
|
|
65
|
-
|
|
64
|
+
Fabric.js and Three.js are installed automatically as transitive dependencies
|
|
66
65
|
|
|
67
|
-
|
|
68
|
-
|
|
69
|
-
|
|
66
|
+
pnpm may report that the optional native `canvas` build script was ignored
|
|
67
|
+
|
|
68
|
+
CustomForge runs in the browser and does not use Node native canvas, so `pnpm approve-builds` is not required
|
|
70
69
|
|
|
71
|
-
|
|
70
|
+
Consumer projects can explicitly acknowledge this browser-only choice in `package.json`:
|
|
72
71
|
|
|
73
|
-
```
|
|
74
|
-
|
|
72
|
+
```json
|
|
73
|
+
{
|
|
74
|
+
"pnpm": {
|
|
75
|
+
"ignoredBuiltDependencies": ["canvas"]
|
|
76
|
+
}
|
|
77
|
+
}
|
|
78
|
+
```
|
|
79
|
+
|
|
80
|
+
Package page: [npmjs.com/package/customforge](https://www.npmjs.com/package/customforge)
|
|
81
|
+
|
|
82
|
+
For repository-independent verification before publishing, build and create the local package from the repository root:
|
|
83
|
+
|
|
84
|
+
```powershell
|
|
85
|
+
pnpm pack:local
|
|
86
|
+
```
|
|
87
|
+
|
|
88
|
+
The command builds JavaScript, TypeScript declarations, and core styles, checks the npm file list, and creates:
|
|
89
|
+
|
|
90
|
+
```text
|
|
91
|
+
customforge-0.1.0-alpha.1.tgz
|
|
75
92
|
```
|
|
76
93
|
|
|
77
|
-
Install that local package
|
|
94
|
+
Install that local package in an independent Vite TypeScript project:
|
|
78
95
|
|
|
79
96
|
```powershell
|
|
80
|
-
pnpm add D:\
|
|
81
|
-
pnpm add fabric three
|
|
97
|
+
pnpm add D:\projects\3DRendering\core_code\customforge-0.1.0-alpha.1.tgz
|
|
82
98
|
```
|
|
83
|
-
|
|
84
|
-
The checked-in `examples/npm-consumer` project imports CustomForge only through this `.tgz`. Run `pnpm install --ignore-workspace` in that directory so pnpm installs it independently from the parent workspace
|
|
99
|
+
|
|
100
|
+
The checked-in `examples/npm-consumer` project imports CustomForge only through this `.tgz`. Run `pnpm install --ignore-workspace` in that directory so pnpm installs it independently from the parent workspace
|
|
85
101
|
|
|
86
102
|
## Load Your Product
|
|
87
103
|
|
|
@@ -103,22 +119,22 @@ The optional texture image is the visual base layer, not a replacement for model
|
|
|
103
119
|
>
|
|
104
120
|
> A blocked or canvas-tainting resource may fail to load and can prevent PNG export
|
|
105
121
|
|
|
106
|
-
## Basic Usage
|
|
107
|
-
|
|
108
|
-
The framework-independent Library entry can be mounted into any two DOM containers:
|
|
109
|
-
|
|
110
|
-
CustomForge is browser-only and must be initialized after its DOM containers are available
|
|
111
|
-
|
|
112
|
-
The editor and viewer require two different containers; call `destroy()` when the page, host component, or instance is no longer in use to release Fabric, WebGL, observer, and event resources
|
|
122
|
+
## Basic Usage
|
|
123
|
+
|
|
124
|
+
The framework-independent Library entry can be mounted into any two DOM containers:
|
|
125
|
+
|
|
126
|
+
CustomForge is browser-only and must be initialized after its DOM containers are available
|
|
127
|
+
|
|
128
|
+
The editor and viewer require two different containers; call `destroy()` when the page, host component, or instance is no longer in use to release Fabric, WebGL, observer, and event resources
|
|
113
129
|
|
|
114
130
|
```html
|
|
115
131
|
<div id="texture-editor"></div>
|
|
116
132
|
<div id="product-viewer"></div>
|
|
117
133
|
```
|
|
118
134
|
|
|
119
|
-
```ts
|
|
120
|
-
import { createCustomizer } from 'customforge'
|
|
121
|
-
import 'customforge/style.css'
|
|
135
|
+
```ts
|
|
136
|
+
import { createCustomizer } from 'customforge'
|
|
137
|
+
import 'customforge/style.css'
|
|
122
138
|
|
|
123
139
|
const customizer = await createCustomizer({
|
|
124
140
|
editor: '#texture-editor',
|
|
@@ -141,64 +157,64 @@ customizer.addText({
|
|
|
141
157
|
color: '#172126',
|
|
142
158
|
})
|
|
143
159
|
|
|
144
|
-
await customizer.addImage({
|
|
145
|
-
src: 'https://example.com/logo.png',
|
|
146
|
-
x: 720,
|
|
147
|
-
y: 240,
|
|
148
|
-
width: 220,
|
|
149
|
-
})
|
|
150
|
-
|
|
151
|
-
window.addEventListener('beforeunload', () => customizer.destroy(), {
|
|
152
|
-
once: true,
|
|
153
|
-
})
|
|
154
|
-
```
|
|
155
|
-
|
|
156
|
-
The public package uses the same root and style imports as the local `.tgz`; pin an exact alpha version when reproducible installs are required
|
|
157
|
-
|
|
158
|
-
## Design JSON
|
|
159
|
-
|
|
160
|
-
`saveDesign()` returns a Library-owned, JSON-safe document instead of exposing Fabric.js serialization. `loadDesign()` validates unknown input and restores the editable object stack asynchronously:
|
|
161
|
-
|
|
162
|
-
```ts
|
|
163
|
-
const design = customizer.saveDesign()
|
|
164
|
-
localStorage.setItem('customforge-design', JSON.stringify(design))
|
|
165
|
-
|
|
166
|
-
const savedDesign = localStorage.getItem('customforge-design')
|
|
167
|
-
if (savedDesign) {
|
|
168
|
-
await customizer.loadDesign(JSON.parse(savedDesign))
|
|
169
|
-
}
|
|
170
|
-
```
|
|
171
|
-
|
|
172
|
-
The current Schema version is `1`. It stores the logical canvas size and the text and image objects in back-to-front render order, including stable object IDs and center-based transforms
|
|
173
|
-
|
|
174
|
-
Design JSON intentionally excludes the product model, target mesh, and base texture. A document can only be loaded into an editor with exactly the same logical width and height
|
|
175
|
-
|
|
176
|
-
Loading is transactional: the current design remains unchanged unless the document validates and every referenced image loads successfully. Blob URL images are converted to Data URLs when added; remote image URLs remain URLs and must continue to satisfy browser CORS requirements when restored
|
|
177
|
-
|
|
178
|
-
The Schema is still an alpha contract and may change in later alpha versions
|
|
179
|
-
|
|
180
|
-
## Instance API
|
|
160
|
+
await customizer.addImage({
|
|
161
|
+
src: 'https://example.com/logo.png',
|
|
162
|
+
x: 720,
|
|
163
|
+
y: 240,
|
|
164
|
+
width: 220,
|
|
165
|
+
})
|
|
166
|
+
|
|
167
|
+
window.addEventListener('beforeunload', () => customizer.destroy(), {
|
|
168
|
+
once: true,
|
|
169
|
+
})
|
|
170
|
+
```
|
|
171
|
+
|
|
172
|
+
The public package uses the same root and style imports as the local `.tgz`; pin an exact alpha version when reproducible installs are required
|
|
173
|
+
|
|
174
|
+
## Design JSON
|
|
175
|
+
|
|
176
|
+
`saveDesign()` returns a Library-owned, JSON-safe document instead of exposing Fabric.js serialization. `loadDesign()` validates unknown input and restores the editable object stack asynchronously:
|
|
177
|
+
|
|
178
|
+
```ts
|
|
179
|
+
const design = customizer.saveDesign()
|
|
180
|
+
localStorage.setItem('customforge-design', JSON.stringify(design))
|
|
181
|
+
|
|
182
|
+
const savedDesign = localStorage.getItem('customforge-design')
|
|
183
|
+
if (savedDesign) {
|
|
184
|
+
await customizer.loadDesign(JSON.parse(savedDesign))
|
|
185
|
+
}
|
|
186
|
+
```
|
|
187
|
+
|
|
188
|
+
The current Schema version is `1`. It stores the logical canvas size and the text and image objects in back-to-front render order, including stable object IDs and center-based transforms
|
|
189
|
+
|
|
190
|
+
Design JSON intentionally excludes the product model, target mesh, and base texture. A document can only be loaded into an editor with exactly the same logical width and height
|
|
191
|
+
|
|
192
|
+
Loading is transactional: the current design remains unchanged unless the document validates and every referenced image loads successfully. Blob URL images are converted to Data URLs when added; remote image URLs remain URLs and must continue to satisfy browser CORS requirements when restored
|
|
193
|
+
|
|
194
|
+
The Schema is still an alpha contract and may change in later alpha versions
|
|
195
|
+
|
|
196
|
+
## Instance API
|
|
181
197
|
|
|
182
198
|
| Method | Description |
|
|
183
199
|
| --- | --- |
|
|
184
|
-
| `addText(options)` | Add and select editable text, constrained to the canvas |
|
|
185
|
-
| `addImage(options)` | Load and select an image, constrained to the canvas |
|
|
186
|
-
| `deleteSelected()` | Remove the active object or selection |
|
|
187
|
-
| `saveDesign()` | Return the current versioned Design JSON document |
|
|
188
|
-
| `loadDesign(value)` | Validate and transactionally restore Design JSON |
|
|
189
|
-
| `loadProduct(product)` | Replace the model, base texture, and target mesh |
|
|
200
|
+
| `addText(options)` | Add and select editable text, constrained to the canvas |
|
|
201
|
+
| `addImage(options)` | Load and select an image, constrained to the canvas |
|
|
202
|
+
| `deleteSelected()` | Remove the active object or selection |
|
|
203
|
+
| `saveDesign()` | Return the current versioned Design JSON document |
|
|
204
|
+
| `loadDesign(value)` | Validate and transactionally restore Design JSON |
|
|
205
|
+
| `loadProduct(product)` | Replace the model, base texture, and target mesh |
|
|
190
206
|
| `exportTexture(filename?)` | Download the composed texture as PNG |
|
|
191
207
|
| `resetView()` | Restore the default 3D camera position |
|
|
192
208
|
| `on(event, listener)` | Subscribe to instance events; returns an unsubscribe function |
|
|
193
209
|
| `destroy()` | Release DOM events, Fabric state, and WebGL resources |
|
|
194
210
|
|
|
195
|
-
Available events are `ready`, `change`, `selectionchange`, `status`, and `error`
|
|
196
|
-
|
|
197
|
-
The initial alpha stability boundary is limited to the methods above, `createCustomizer`, `ProductCustomizer`, and the configuration, event, and Design JSON types exported from the package root
|
|
198
|
-
|
|
199
|
-
`ProductCustomizer` does not expose its Fabric.js editor or Three.js viewer instances; consumers interact through the facade API
|
|
200
|
-
|
|
201
|
-
Imports from `core`, `editor`, `viewer`, `bridge`, or any other undeclared package subpath are unsupported
|
|
211
|
+
Available events are `ready`, `change`, `selectionchange`, `status`, and `error`
|
|
212
|
+
|
|
213
|
+
The initial alpha stability boundary is limited to the methods above, `createCustomizer`, `ProductCustomizer`, and the configuration, event, and Design JSON types exported from the package root
|
|
214
|
+
|
|
215
|
+
`ProductCustomizer` does not expose its Fabric.js editor or Three.js viewer instances; consumers interact through the facade API
|
|
216
|
+
|
|
217
|
+
Imports from `core`, `editor`, `viewer`, `bridge`, or any other undeclared package subpath are unsupported
|
|
202
218
|
|
|
203
219
|
## Architecture
|
|
204
220
|
|
|
@@ -240,36 +256,36 @@ The built-in demo follows the same `PrintArea` mesh convention
|
|
|
240
256
|
## Project Structure
|
|
241
257
|
|
|
242
258
|
```text
|
|
243
|
-
src/
|
|
244
|
-
|-- bridge/ Canvas and Three.js texture synchronization
|
|
245
|
-
|-- core/ Public types, configuration, and DOM helpers
|
|
246
|
-
|-- customizer/ Public instance orchestration
|
|
247
|
-
|-- demo/ Runnable workbench UI
|
|
248
|
-
|-- editor/ Fabric.js design surface
|
|
249
|
-
|-- style.css Public Library style entry
|
|
250
|
-
|-- styles/ Library core styles
|
|
251
|
-
|-- viewer/ Three.js product preview
|
|
252
|
-
`-- index.ts Framework-independent source entry
|
|
253
|
-
|
|
254
|
-
examples/
|
|
255
|
-
`-- npm-consumer/ Independent local .tgz consumer
|
|
256
|
-
|
|
257
|
-
scripts/
|
|
258
|
-
`-- verify-package.mjs npm file and artifact boundary checks
|
|
259
|
-
```
|
|
259
|
+
src/
|
|
260
|
+
|-- bridge/ Canvas and Three.js texture synchronization
|
|
261
|
+
|-- core/ Public types, configuration, and DOM helpers
|
|
262
|
+
|-- customizer/ Public instance orchestration
|
|
263
|
+
|-- demo/ Runnable workbench UI
|
|
264
|
+
|-- editor/ Fabric.js design surface
|
|
265
|
+
|-- style.css Public Library style entry
|
|
266
|
+
|-- styles/ Library core styles
|
|
267
|
+
|-- viewer/ Three.js product preview
|
|
268
|
+
`-- index.ts Framework-independent source entry
|
|
269
|
+
|
|
270
|
+
examples/
|
|
271
|
+
`-- npm-consumer/ Independent local .tgz consumer
|
|
272
|
+
|
|
273
|
+
scripts/
|
|
274
|
+
`-- verify-package.mjs npm file and artifact boundary checks
|
|
275
|
+
```
|
|
260
276
|
|
|
261
277
|
## Development Commands
|
|
262
278
|
|
|
263
279
|
```bash
|
|
264
|
-
pnpm check # TypeScript project check
|
|
265
|
-
pnpm test # Unit tests
|
|
266
|
-
pnpm build # Type-check and production build
|
|
267
|
-
pnpm build:lib # Build ESM, declarations, and core styles
|
|
268
|
-
pnpm verify:package # Check dist and the npm file list
|
|
269
|
-
pnpm pack:local # Build, verify, and create the local .tgz
|
|
270
|
-
pnpm release:check # Run checks, tests, package build, verification, and local pack
|
|
271
|
-
pnpm preview # Preview the production build
|
|
272
|
-
```
|
|
280
|
+
pnpm check # TypeScript project check
|
|
281
|
+
pnpm test # Unit tests
|
|
282
|
+
pnpm build # Type-check and production build
|
|
283
|
+
pnpm build:lib # Build ESM, declarations, and core styles
|
|
284
|
+
pnpm verify:package # Check dist and the npm file list
|
|
285
|
+
pnpm pack:local # Build, verify, and create the local .tgz
|
|
286
|
+
pnpm release:check # Run checks, tests, package build, verification, and local pack
|
|
287
|
+
pnpm preview # Preview the production build
|
|
288
|
+
```
|
|
273
289
|
|
|
274
290
|
## Current Scope
|
|
275
291
|
|
|
@@ -277,11 +293,11 @@ This is an early technical prototype
|
|
|
277
293
|
|
|
278
294
|
The public API and design document format are not stable yet
|
|
279
295
|
|
|
280
|
-
The current milestone intentionally focuses on one texture and one customizable mesh
|
|
281
|
-
|
|
282
|
-
Public npm releases use the `alpha` dist-tag until the API and Design JSON contract are ready for a more stable channel
|
|
283
|
-
|
|
284
|
-
Multi-surface products, undo/redo, and framework adapters are not implemented yet. Undo/redo is the next planned milestone and will build on the Design JSON snapshot contract
|
|
296
|
+
The current milestone intentionally focuses on one texture and one customizable mesh
|
|
297
|
+
|
|
298
|
+
Public npm releases use the `alpha` dist-tag until the API and Design JSON contract are ready for a more stable channel
|
|
299
|
+
|
|
300
|
+
Multi-surface products, undo/redo, and framework adapters are not implemented yet. Undo/redo is the next planned milestone and will build on the Design JSON snapshot contract
|
|
285
301
|
|
|
286
302
|
## Technology
|
|
287
303
|
|
package/README.zh-CN.md
CHANGED
|
@@ -32,15 +32,15 @@ CustomForge 将常见的二维设计界面与带 UV 的三维模型连接起来
|
|
|
32
32
|
- 将画布的每次变化实时呈现在三维产品上
|
|
33
33
|
- 加载远程 GLB/GLTF 模型和可选的基础纹理
|
|
34
34
|
- 通过 Mesh 名称指定可定制表面
|
|
35
|
-
- 使用 OrbitControls 旋转和缩放三维预览
|
|
36
|
-
- 将合成后的纹理导出为 PNG
|
|
37
|
-
- 通过版本化 Design JSON 保存和恢复可编辑对象
|
|
35
|
+
- 使用 OrbitControls 旋转和缩放三维预览
|
|
36
|
+
- 将合成后的纹理导出为 PNG
|
|
37
|
+
- 通过版本化 Design JSON 保存和恢复可编辑对象
|
|
38
38
|
|
|
39
39
|
工作台内置了一个程序生成的杯子,无需准备外部资源即可直接运行
|
|
40
40
|
|
|
41
|
-
## 仓库开发
|
|
42
|
-
|
|
43
|
-
环境要求:Node.js 22+ 和 pnpm 11+
|
|
41
|
+
## 仓库开发
|
|
42
|
+
|
|
43
|
+
环境要求:Node.js 22+ 和 pnpm 11+
|
|
44
44
|
|
|
45
45
|
```bash
|
|
46
46
|
pnpm install
|
|
@@ -49,39 +49,53 @@ pnpm dev
|
|
|
49
49
|
|
|
50
50
|
打开 Vite 输出的地址
|
|
51
51
|
|
|
52
|
-
内置演示的左侧是 UV 编辑区,右侧是实时三维预览
|
|
53
|
-
|
|
54
|
-
## npm Alpha 制品
|
|
55
|
-
|
|
56
|
-
CustomForge
|
|
52
|
+
内置演示的左侧是 UV 编辑区,右侧是实时三维预览
|
|
53
|
+
|
|
54
|
+
## npm Alpha 制品
|
|
55
|
+
|
|
56
|
+
CustomForge 已通过 `alpha` dist-tag 发布到 npm Registry,不同 alpha 版本之间的 API 和 Design JSON Schema 可能发生变化
|
|
57
57
|
|
|
58
|
-
|
|
58
|
+
使用以下命令安装当前公开 alpha:
|
|
59
59
|
|
|
60
60
|
```powershell
|
|
61
61
|
pnpm add customforge@alpha
|
|
62
|
-
pnpm add fabric three
|
|
63
62
|
```
|
|
64
63
|
|
|
65
|
-
|
|
64
|
+
Fabric.js 和 Three.js 会作为传递依赖自动安装
|
|
66
65
|
|
|
67
|
-
|
|
68
|
-
pnpm pack:local
|
|
69
|
-
```
|
|
66
|
+
pnpm 可能提示可选的原生 `canvas` 构建脚本已被忽略,CustomForge 运行在浏览器中,不使用 Node 原生 canvas,因此不需要执行 `pnpm approve-builds`
|
|
70
67
|
|
|
71
|
-
|
|
68
|
+
消费项目可以在 `package.json` 中明确记录这一浏览器端选择:
|
|
72
69
|
|
|
73
|
-
```
|
|
74
|
-
|
|
70
|
+
```json
|
|
71
|
+
{
|
|
72
|
+
"pnpm": {
|
|
73
|
+
"ignoredBuiltDependencies": ["canvas"]
|
|
74
|
+
}
|
|
75
|
+
}
|
|
76
|
+
```
|
|
77
|
+
|
|
78
|
+
包页面:[npmjs.com/package/customforge](https://www.npmjs.com/package/customforge)
|
|
79
|
+
|
|
80
|
+
发布前如需进行独立于仓库源码的验证,可在仓库根目录构建并生成本地包:
|
|
81
|
+
|
|
82
|
+
```powershell
|
|
83
|
+
pnpm pack:local
|
|
84
|
+
```
|
|
85
|
+
|
|
86
|
+
命令依次生成 JavaScript、TypeScript 声明、核心样式,检查 npm 文件清单,并创建:
|
|
87
|
+
|
|
88
|
+
```text
|
|
89
|
+
customforge-0.1.0-alpha.1.tgz
|
|
75
90
|
```
|
|
76
91
|
|
|
77
|
-
在独立 Vite TypeScript
|
|
92
|
+
在独立 Vite TypeScript 项目中安装该本地制品:
|
|
78
93
|
|
|
79
94
|
```powershell
|
|
80
|
-
pnpm add D:\
|
|
81
|
-
pnpm add fabric three
|
|
95
|
+
pnpm add D:\projects\3DRendering\core_code\customforge-0.1.0-alpha.1.tgz
|
|
82
96
|
```
|
|
83
|
-
|
|
84
|
-
仓库中的 `examples/npm-consumer` 提供了一个只通过该 `.tgz` 导入的消费示例。在该目录中使用 `pnpm install --ignore-workspace`,确保 pnpm 将其作为独立于父级 workspace 的项目安装
|
|
97
|
+
|
|
98
|
+
仓库中的 `examples/npm-consumer` 提供了一个只通过该 `.tgz` 导入的消费示例。在该目录中使用 `pnpm install --ignore-workspace`,确保 pnpm 将其作为独立于父级 workspace 的项目安装
|
|
85
99
|
|
|
86
100
|
## 加载你的产品
|
|
87
101
|
|
|
@@ -103,22 +117,22 @@ UV 坐标应当保存在三维模型中
|
|
|
103
117
|
>
|
|
104
118
|
> 被浏览器阻止或污染 Canvas 的资源可能无法加载,也会导致 PNG 导出失败
|
|
105
119
|
|
|
106
|
-
## 基本用法
|
|
107
|
-
|
|
108
|
-
与框架无关的 Library 入口可以挂载到任意两个 DOM 容器中:
|
|
109
|
-
|
|
110
|
-
CustomForge 仅支持浏览器环境,应在 DOM 挂载容器可用后创建实例
|
|
111
|
-
|
|
112
|
-
编辑器和查看器必须使用两个不同的容器;页面卸载、组件卸载或不再使用实例时必须调用 `destroy()` 释放 Fabric、WebGL、观察器和事件资源
|
|
120
|
+
## 基本用法
|
|
121
|
+
|
|
122
|
+
与框架无关的 Library 入口可以挂载到任意两个 DOM 容器中:
|
|
123
|
+
|
|
124
|
+
CustomForge 仅支持浏览器环境,应在 DOM 挂载容器可用后创建实例
|
|
125
|
+
|
|
126
|
+
编辑器和查看器必须使用两个不同的容器;页面卸载、组件卸载或不再使用实例时必须调用 `destroy()` 释放 Fabric、WebGL、观察器和事件资源
|
|
113
127
|
|
|
114
128
|
```html
|
|
115
129
|
<div id="texture-editor"></div>
|
|
116
130
|
<div id="product-viewer"></div>
|
|
117
131
|
```
|
|
118
132
|
|
|
119
|
-
```ts
|
|
120
|
-
import { createCustomizer } from 'customforge'
|
|
121
|
-
import 'customforge/style.css'
|
|
133
|
+
```ts
|
|
134
|
+
import { createCustomizer } from 'customforge'
|
|
135
|
+
import 'customforge/style.css'
|
|
122
136
|
|
|
123
137
|
const customizer = await createCustomizer({
|
|
124
138
|
editor: '#texture-editor',
|
|
@@ -141,64 +155,64 @@ customizer.addText({
|
|
|
141
155
|
color: '#172126',
|
|
142
156
|
})
|
|
143
157
|
|
|
144
|
-
await customizer.addImage({
|
|
145
|
-
src: 'https://example.com/logo.png',
|
|
146
|
-
x: 720,
|
|
147
|
-
y: 240,
|
|
148
|
-
width: 220,
|
|
149
|
-
})
|
|
150
|
-
|
|
151
|
-
window.addEventListener('beforeunload', () => customizer.destroy(), {
|
|
152
|
-
once: true,
|
|
153
|
-
})
|
|
154
|
-
```
|
|
155
|
-
|
|
156
|
-
公开包与本地 `.tgz` 使用相同的根入口和样式入口;需要可重复安装时应固定具体 alpha 版本
|
|
157
|
-
|
|
158
|
-
## Design JSON
|
|
159
|
-
|
|
160
|
-
`saveDesign()` 返回由 Library 自身定义、可安全写入 JSON 的文档,不暴露 Fabric.js 序列化格式。`loadDesign()` 校验未知输入,并异步恢复可编辑对象栈:
|
|
161
|
-
|
|
162
|
-
```ts
|
|
163
|
-
const design = customizer.saveDesign()
|
|
164
|
-
localStorage.setItem('customforge-design', JSON.stringify(design))
|
|
165
|
-
|
|
166
|
-
const savedDesign = localStorage.getItem('customforge-design')
|
|
167
|
-
if (savedDesign) {
|
|
168
|
-
await customizer.loadDesign(JSON.parse(savedDesign))
|
|
169
|
-
}
|
|
170
|
-
```
|
|
171
|
-
|
|
172
|
-
当前 Schema 版本为 `1`。文档保存逻辑画布尺寸,并按从后到前的渲染顺序保存文字和图片对象,包括稳定对象 ID 与基于中心点的变换
|
|
173
|
-
|
|
174
|
-
Design JSON 有意排除产品模型、目标 Mesh 和基础纹理。文档只能加载到逻辑宽高完全相同的编辑器中
|
|
175
|
-
|
|
176
|
-
加载具有事务性:只有文档校验通过且全部引用图片成功加载后,当前设计才会被替换。Blob URL 图片会在添加时转换为 Data URL;远程图片仍保留 URL,恢复时必须继续满足浏览器 CORS 要求
|
|
177
|
-
|
|
178
|
-
该 Schema 目前仍属于 alpha 契约,后续 alpha 版本可能调整
|
|
179
|
-
|
|
180
|
-
## 实例 API
|
|
158
|
+
await customizer.addImage({
|
|
159
|
+
src: 'https://example.com/logo.png',
|
|
160
|
+
x: 720,
|
|
161
|
+
y: 240,
|
|
162
|
+
width: 220,
|
|
163
|
+
})
|
|
164
|
+
|
|
165
|
+
window.addEventListener('beforeunload', () => customizer.destroy(), {
|
|
166
|
+
once: true,
|
|
167
|
+
})
|
|
168
|
+
```
|
|
169
|
+
|
|
170
|
+
公开包与本地 `.tgz` 使用相同的根入口和样式入口;需要可重复安装时应固定具体 alpha 版本
|
|
171
|
+
|
|
172
|
+
## Design JSON
|
|
173
|
+
|
|
174
|
+
`saveDesign()` 返回由 Library 自身定义、可安全写入 JSON 的文档,不暴露 Fabric.js 序列化格式。`loadDesign()` 校验未知输入,并异步恢复可编辑对象栈:
|
|
175
|
+
|
|
176
|
+
```ts
|
|
177
|
+
const design = customizer.saveDesign()
|
|
178
|
+
localStorage.setItem('customforge-design', JSON.stringify(design))
|
|
179
|
+
|
|
180
|
+
const savedDesign = localStorage.getItem('customforge-design')
|
|
181
|
+
if (savedDesign) {
|
|
182
|
+
await customizer.loadDesign(JSON.parse(savedDesign))
|
|
183
|
+
}
|
|
184
|
+
```
|
|
185
|
+
|
|
186
|
+
当前 Schema 版本为 `1`。文档保存逻辑画布尺寸,并按从后到前的渲染顺序保存文字和图片对象,包括稳定对象 ID 与基于中心点的变换
|
|
187
|
+
|
|
188
|
+
Design JSON 有意排除产品模型、目标 Mesh 和基础纹理。文档只能加载到逻辑宽高完全相同的编辑器中
|
|
189
|
+
|
|
190
|
+
加载具有事务性:只有文档校验通过且全部引用图片成功加载后,当前设计才会被替换。Blob URL 图片会在添加时转换为 Data URL;远程图片仍保留 URL,恢复时必须继续满足浏览器 CORS 要求
|
|
191
|
+
|
|
192
|
+
该 Schema 目前仍属于 alpha 契约,后续 alpha 版本可能调整
|
|
193
|
+
|
|
194
|
+
## 实例 API
|
|
181
195
|
|
|
182
196
|
| 方法 | 说明 |
|
|
183
197
|
| --- | --- |
|
|
184
|
-
| `addText(options)` | 添加并选中文字,自动约束在画布内 |
|
|
185
|
-
| `addImage(options)` | 加载并选中图片,自动约束在画布内 |
|
|
186
|
-
| `deleteSelected()` | 删除当前对象或选区 |
|
|
187
|
-
| `saveDesign()` | 返回当前版本化 Design JSON 文档 |
|
|
188
|
-
| `loadDesign(value)` | 校验并以事务方式恢复 Design JSON |
|
|
189
|
-
| `loadProduct(product)` | 更换模型、基础纹理和目标 Mesh |
|
|
198
|
+
| `addText(options)` | 添加并选中文字,自动约束在画布内 |
|
|
199
|
+
| `addImage(options)` | 加载并选中图片,自动约束在画布内 |
|
|
200
|
+
| `deleteSelected()` | 删除当前对象或选区 |
|
|
201
|
+
| `saveDesign()` | 返回当前版本化 Design JSON 文档 |
|
|
202
|
+
| `loadDesign(value)` | 校验并以事务方式恢复 Design JSON |
|
|
203
|
+
| `loadProduct(product)` | 更换模型、基础纹理和目标 Mesh |
|
|
190
204
|
| `exportTexture(filename?)` | 将合成纹理下载为 PNG |
|
|
191
205
|
| `resetView()` | 恢复默认三维相机位置 |
|
|
192
206
|
| `on(event, listener)` | 订阅实例事件,并返回取消订阅函数 |
|
|
193
207
|
| `destroy()` | 释放 DOM 事件、Fabric 状态和 WebGL 资源 |
|
|
194
208
|
|
|
195
|
-
当前事件包括 `ready`、`change`、`selectionchange`、`status` 和 `error`
|
|
196
|
-
|
|
197
|
-
首个 alpha 的稳定候选边界只包括上表方法、`createCustomizer`、`ProductCustomizer` 以及从根入口导出的配置、事件和 Design JSON 类型
|
|
198
|
-
|
|
199
|
-
`ProductCustomizer` 不公开 Fabric.js 编辑器和 Three.js 查看器实例,使用方只通过门面 API 操作定制器
|
|
200
|
-
|
|
201
|
-
不支持从 `core`、`editor`、`viewer`、`bridge` 或其他未声明的包子路径导入模块
|
|
209
|
+
当前事件包括 `ready`、`change`、`selectionchange`、`status` 和 `error`
|
|
210
|
+
|
|
211
|
+
首个 alpha 的稳定候选边界只包括上表方法、`createCustomizer`、`ProductCustomizer` 以及从根入口导出的配置、事件和 Design JSON 类型
|
|
212
|
+
|
|
213
|
+
`ProductCustomizer` 不公开 Fabric.js 编辑器和 Three.js 查看器实例,使用方只通过门面 API 操作定制器
|
|
214
|
+
|
|
215
|
+
不支持从 `core`、`editor`、`viewer`、`bridge` 或其他未声明的包子路径导入模块
|
|
202
216
|
|
|
203
217
|
## 架构
|
|
204
218
|
|
|
@@ -240,36 +254,36 @@ ProductCustomizer
|
|
|
240
254
|
## 项目结构
|
|
241
255
|
|
|
242
256
|
```text
|
|
243
|
-
src/
|
|
244
|
-
|-- bridge/ Canvas 与 Three.js 纹理同步
|
|
245
|
-
|-- core/ 公共类型、配置和 DOM 工具
|
|
246
|
-
|-- customizer/ 公共实例编排
|
|
247
|
-
|-- demo/ 可运行的工作台界面
|
|
248
|
-
|-- editor/ Fabric.js 设计画布
|
|
249
|
-
|-- style.css Library 公开样式入口
|
|
250
|
-
|-- styles/ Library 核心样式
|
|
251
|
-
|-- viewer/ Three.js 产品预览
|
|
252
|
-
`-- index.ts 与框架无关的源码入口
|
|
253
|
-
|
|
254
|
-
examples/
|
|
255
|
-
`-- npm-consumer/ 本地 .tgz 独立消费示例
|
|
256
|
-
|
|
257
|
-
scripts/
|
|
258
|
-
`-- verify-package.mjs npm 文件和制品边界检查
|
|
259
|
-
```
|
|
257
|
+
src/
|
|
258
|
+
|-- bridge/ Canvas 与 Three.js 纹理同步
|
|
259
|
+
|-- core/ 公共类型、配置和 DOM 工具
|
|
260
|
+
|-- customizer/ 公共实例编排
|
|
261
|
+
|-- demo/ 可运行的工作台界面
|
|
262
|
+
|-- editor/ Fabric.js 设计画布
|
|
263
|
+
|-- style.css Library 公开样式入口
|
|
264
|
+
|-- styles/ Library 核心样式
|
|
265
|
+
|-- viewer/ Three.js 产品预览
|
|
266
|
+
`-- index.ts 与框架无关的源码入口
|
|
267
|
+
|
|
268
|
+
examples/
|
|
269
|
+
`-- npm-consumer/ 本地 .tgz 独立消费示例
|
|
270
|
+
|
|
271
|
+
scripts/
|
|
272
|
+
`-- verify-package.mjs npm 文件和制品边界检查
|
|
273
|
+
```
|
|
260
274
|
|
|
261
275
|
## 开发命令
|
|
262
276
|
|
|
263
277
|
```bash
|
|
264
|
-
pnpm check # TypeScript 项目检查
|
|
265
|
-
pnpm test # 单元测试
|
|
266
|
-
pnpm build # 类型检查和生产构建
|
|
267
|
-
pnpm build:lib # 构建 ESM、类型声明和核心样式
|
|
268
|
-
pnpm verify:package # 检查 dist 和 npm 文件清单
|
|
269
|
-
pnpm pack:local # 构建、检查并生成本地 .tgz
|
|
270
|
-
pnpm release:check # 执行检查、测试、制品构建、校验和本地打包
|
|
271
|
-
pnpm preview # 预览生产构建
|
|
272
|
-
```
|
|
278
|
+
pnpm check # TypeScript 项目检查
|
|
279
|
+
pnpm test # 单元测试
|
|
280
|
+
pnpm build # 类型检查和生产构建
|
|
281
|
+
pnpm build:lib # 构建 ESM、类型声明和核心样式
|
|
282
|
+
pnpm verify:package # 检查 dist 和 npm 文件清单
|
|
283
|
+
pnpm pack:local # 构建、检查并生成本地 .tgz
|
|
284
|
+
pnpm release:check # 执行检查、测试、制品构建、校验和本地打包
|
|
285
|
+
pnpm preview # 预览生产构建
|
|
286
|
+
```
|
|
273
287
|
|
|
274
288
|
## 当前范围
|
|
275
289
|
|
|
@@ -277,11 +291,11 @@ pnpm preview # 预览生产构建
|
|
|
277
291
|
|
|
278
292
|
公共 API 和设计文档格式尚未稳定
|
|
279
293
|
|
|
280
|
-
当前里程碑有意聚焦于一张纹理和一个可定制 Mesh
|
|
281
|
-
|
|
282
|
-
在 API 和 Design JSON 契约进入更稳定阶段前,公开 npm 版本统一使用 `alpha` dist-tag
|
|
283
|
-
|
|
284
|
-
多定制面、撤销与重做和框架适配器仍未实现。撤销与重做是下一阶段计划,并将复用 Design JSON 快照契约
|
|
294
|
+
当前里程碑有意聚焦于一张纹理和一个可定制 Mesh
|
|
295
|
+
|
|
296
|
+
在 API 和 Design JSON 契约进入更稳定阶段前,公开 npm 版本统一使用 `alpha` dist-tag
|
|
297
|
+
|
|
298
|
+
多定制面、撤销与重做和框架适配器仍未实现。撤销与重做是下一阶段计划,并将复用 Design JSON 快照契约
|
|
285
299
|
|
|
286
300
|
## 技术栈
|
|
287
301
|
|