背景
问题
定制服装通常意味着繁琐的样机工具，或与设计师反复沟通——缺少一种快速、可视化地把想法呈现在产品上并迭代的方式。
方法
方案
一个 Next.js 应用，将基于 react-three-fiber 的实时 3D 服装画布与 DALL·E 3 图案生成结合：选颜色、输入提示词，就能看到设计出现在旋转的 T 恤上。它把原本 Vite + Express 的多仓库整合成一个可部署的应用，OpenAI 调用放在 Route Handlers 中，而非独立服务器。
功能
- Real-time 3D garment customizer (react-three-fiber)
- AI decal generation from a text prompt (DALL·E 3)
- Live color and texture controls
- Single deployable Next.js app — OpenAI in Route Handlers
架构笔记
- The 3D scene is dynamically imported (ssr: false) so heavy WebGL never blocks first paint.
- OpenAI calls live in Route Handlers — no separate Express server, server-side key only.
- Valtio holds reactive design state shared between the UI and the 3D scene.
挑战
结果
A deployed 3D + AI customizer that turns a text prompt into a design on a rotating garment — and a clean Vite/Express → Next.js consolidation.
学到的东西
复盘
- 01Dynamically importing the 3D scene keeps a heavy WebGL app fast to first paint.
- 02Collapsing a frontend + API monorepo into one Next.js app removes a whole deploy surface.
下一步
下一步
- 01Add saved designs
- 02Support more garment types
- 03Tighten mobile 3D controls