← 项目档案
Purecreate
一个 3D 服装定制器，实时设计你的 T 恤，并通过 DALL·E 3 根据文字提示生成图案。
这是什么
问题
定制服装通常意味着繁琐的样机工具，或与设计师反复沟通——缺少一种快速、可视化地把想法呈现在产品上并迭代的方式。
方案
一个 Next.js 应用，将基于 react-three-fiber 的实时 3D 服装画布与 DALL·E 3 图案生成结合：选颜色、输入提示词，就能看到设计出现在旋转的 T 恤上。它把原本 Vite + Express 的多仓库整合成一个可部署的应用，OpenAI 调用放在 Route Handlers 中，而非独立服务器。
界面一览
Source assetAn original texture from the customizer's public asset library, used to test live material and decal changes on the garment.
技术栈
Frontend
- Next.js 15
- React 18.3
- Tailwind CSS 3.4
3D
- react-three-fiber
- three.js
- Valtio
AI + API
- OpenAI DALL·E 3
- Next.js 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
工程实现
- 过程 01
Collapse two deployments into one application
- 背景
- The original Vite frontend and Express image API required separate hosting, environment wiring, and CORS configuration.
- 方法
- Move the image endpoint into a Next.js Node Route Handler and keep the OpenAI key server-side.
- 结果
- Deployment and same-origin requests are simpler, but the image route inherits serverless duration and provider-latency limits.
- 过程 02
Keep WebGL outside server rendering
- 背景
- Three.js and its renderer depend on browser globals and add substantial client work.
- 方法
- Dynamically import the canvas with server rendering disabled while the rest of the application uses the App Router.
- 结果
- The page shell can render independently, but the current renderer compatibility regression still has to be repaired before the demo is healthy.
实现细节
架构笔记
- The 3D scene is dynamically imported (ssr: false) so heavy WebGL never blocks first paint.
- OpenAI calls live in a Node.js Route Handler with a server-only key and a 60-second duration budget.
- Valtio holds reactive design state shared between the UI and the 3D scene.
- Moving the API and canvas under one origin removed the old Express server and its CORS boundary.
挑战
- three.js touches browser globals, so the canvas must stay outside server rendering.
- The current public deployment is behind a Vercel security checkpoint, and a clean local install exposes a React renderer compatibility regression; the source is available, but the demo should not be presented as healthy.
结果
A source-available 3D and AI product prototype plus a completed architectural migration from a Vite/Express split deployment to a single Next.js application. The present demo still needs compatibility repair.
规划与心得
复盘
- 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.
下一步
- 01Repair the current renderer compatibility regression
- 02Restore a publicly accessible demo
- 03Add saved designs and more garment types