Hanyu Liu

3D and product / CLO3D pattern / glTF / Three.js

Teamwear Digital Twin

A custom-teamwear line — minimum order of one — lived as one enormous flattened Photoshop file of pasted screenshots. Every colourway ever offered was a pasted picture; changing one meant a designer redrawing it; previewing it on a body meant imagination. I rebuilt the garment itself as data, once, at true scale: the demo below is the deliverable.

StatusLive demo; a generative design layer was in progress
RoleDigital product, pattern to pixel: pattern drafting, fabric physics and texture pipeline, glTF export spec, configurator
StackCLO3D, glTF 2.0, Three.js, WebGL
Cost to runZero — a static file, no server, no plugin
01

Drag to rotate, click a piece, pick a colour

Open full screen · the page is about 9 MB because the whole garment (a 6.3 MB glTF, base64-embedded) travels inside it; nothing is fetched from a server.

02

The product is not the picture; it is the pattern

front panel = 460 × 550 mm   # drafted at true size
fabric      = 150 gsm knit    # simulated, not painted
mesh        = 17 named pieces # every panel addressable
colour      = a material factor, not pixels

Separate what never changes — pattern geometry, fabric physics, UV layout — from what changes per customer: colour, logo, print. Customisation stops being design labour and becomes a parameter.

What shipped

The kit was drafted from real measurements in CLO3D, draped with simulated athletic-knit physics, textured on a true-scale canvas so a chest graphic lands exactly where it would on the cut piece, and exported as a single glTF with every pattern piece as a separately named mesh. The configurator loads that file directly: click a sleeve, recolour it, and a woven-in graphic survives because colour is a material factor while the texture carries only the artwork.

What I would tell another team

Do not point generative AI at the 3D problem — the 3D problem is already solved by the pattern. The leverage is in the split: geometry and physics are deterministic and built once; the 2D design layer is where variation lives, and it is just an image at true scale. That is the layer a generative designer can be wired into: it generates a texture, not a garment, and the fixed UV frame guarantees that whatever it generates lands correctly on the cloth.

CLO3D export dialog for glTF 2.0 next to the 2D pattern pieces of the kit
The export moment: real pattern pieces, simulated knit physics, and a glTF dialog that turns a garment into a web asset.
Pieces
17 named meshes, each clickable in the browserVerified from the glTF: Body_Front, Body_Back, two sleeves, collar, waistband, shorts panels, drawcord trims.
Texture canvas
460 × 550 mm true scale, matched to the drafted front panel
Asset
6.3 MB glTF with three textures, 20 nodes, 5 materialsVerified from the file embedded in the demo; about 9 MB once embedded as base64 in the page.

The company's own logo has been removed from the demo shown here.