文档

设计初衷

Alter Product 是一款用于交互式产品可视化、配置和个性化的现代 Web 应用。它面向按需印刷企业、提供定制服务的制造商、在线商店，以及希望在动态、完全交互的 3D 环境中展示产品的创作者。

平台将以下工具整合到同一电商工作流中：

• Designer – 用于定义变体、印刷区域、产品和运行时设置的中央工作区
• Viewer – 用于视觉展示的 3D 电商产品查看工具
• Configurator – 用于配置 3D 电商产品变体和参数（尺寸、材料、颜色等）的工具
• Customizer – 用于向产品添加图案、文字、布局和印刷元素的高级电商设计工具
• 3D 模型生成器 – 根据可编辑的纸样、缝线和尺寸创建并调整参数化 3D 模型

Viewer、Configurator 和 Customizer 可通过 iframe 嵌入网站，使用 URL 参数配置，并通过安全的 postMessage 通信实现集成。

Designer 模块作为中央管理层，定义变体、印刷区域和运行时设置。Viewer、Configurator 和 Customizer 使用这些设置及 Designer 中准备的设计来呈现电商体验，而不是打开 Designer 工作区本身。Designer 也可嵌入商家的工作流程。在嵌入或本地存储配置中，资源和设计数据保存在你的服务器上，Alter Product 则负责许可和运行时访问管理。

Alter Product 提供专用的 Public API，让商店或后端系统获取设计数据并同步 Customizer 订单。对于 WordPress/WooCommerce 商店，Alter Product 还提供官方 WordPress 插件；设置详情请参阅 WooCommerce 集成指南。

3D 模型生成器

从生成器模板或附带生成器的现有模型开始。编辑纸样、缝线和尺寸，在人体模型上检查效果，并应用纹理。保存生成器项目，然后在设计中使用已保存的修订版本。生成的模型可用于 Designer，以及现有的 Customizer、Configurator 和 Viewer 商品流程。

在 WordPress 中，可重复使用的模板、人体模型和纹理库归入“资源”；HDRI 环境使用共享环境库。“模型生成器”列出本地项目，并可导入附带生成器的模型。入门包会下载选定模型及其生成器、模板和相关资源，其中包括两个人体模型。项目和文件存储在 WordPress 中；目录更新、导入、前端和访问权限检查仍使用 Alter Product。

快速开始

按以下简要步骤将 Alter Product 连接到你的商店。

1. 创建账户并选择集成方式 注册或登录。WooCommerce 商店应使用官方插件和 Auto Connect；自建或无头商店应使用 Public API。
2. 安装并连接商店 对于 WordPress/WooCommerce，安装插件、启用固定链接，然后从 WordPress 管理后台建立连接。完整流程请参阅 WooCommerce 集成指南。对于自定义技术栈，请生成服务端 API 凭据并允许店铺域名。
3. 创建设计并建立映射 打开 WooCommerce 产品编辑页面，在 Alter Product 选项卡中创建或选择设计。在 Designer 中定义变体、印刷区域和运行时设置，使 Viewer、Configurator 或 Customizer 能够呈现正确的电商体验。
4. 嵌入所选工具并处理运行时事件 WooCommerce 插件可在产品页面或 WordPress 页面显示所选工具。自定义集成则嵌入 iframe，在后端创建短期嵌入会话令牌，并使用 postMessage 处理加入购物车、当前数据载荷和 Customizer 订单同步。