Skip to content
← Apps & tools

MiniJersey 3D Studio

A browser based cycling jersey designer: edit colours, patterns, text and logos in 2D and see them projected live onto a 3D jersey, then export a tech pack for production.

Role
Author
When
August 2026
Stack
JavaScript, Three.js, WebGL, SVG, Canvas
Screenshot of the live demo: a red cycling jersey rendered in 3D on a hanger, with the design presets panel on the right

Context

Custom cycling kits are designed as flat sewing templates, but riders and clubs judge them on the finished, three dimensional jersey. Most online configurators either show a flat template or a fixed 3D preview. I wanted to see the 2D design and the 3D result change together, in the browser, with no backend.

What I built

The app is plain JavaScript modules on top of Three.js, published as a static site:

  • 2D design state. A small publish and subscribe store holds colours, panel tones, patterns (stripes, chevrons, dots), text in several zones (chest, back, sleeves, collar) and uploaded logos. Every change notifies the renderer.
  • Texture baking. The renderer injects the state into SVG templates of the front and back panels and rasterises them onto a 2048 by 1024 canvas, which becomes the jersey's texture.
  • Procedural 3D jersey. The default model is generated in code: a race cut torso, raglan sleeves, a standing collar, three rear pockets and a zipper. A classic T-shirt is also available, and users can load their own .glb or .gltf model, which is re-centred and scaled automatically.
  • Planar projection instead of UV unwrapping. An uploaded model's UV map will not match the jersey template, so the viewer computes its own coordinates: vertices are normalised inside the model's bounding box, front facing ones map to the left half of the texture and back facing ones to the right half, mirrored so text on the back reads correctly.
  • Output. A tech pack view lays out front and back panels with colour codes and logo placements and exports to PNG or PDF. Designs can be saved and reopened as .jersey JSON files.

The classic model is embedded as a data URI, so the app also works when opened straight from the file system.

Status

A working prototype, live on GitHub Pages. The "VELOX" brand used in the presets is part of the sample assets shipped with the demo.

← All projects