The assignment

Design a 3D shoe customizer for Swear using Three.js. The shoe model was provided. My task was to make the colours, materials and initials customizable, and create an environment that fits Swear’s bold, premium and playful brand style.

The research & insights

Analysed Swear’s visual identity: a mix of luxury and streetwear, bold colour contrasts and playful attitude. Studied premium configurators from brands like Nike and Balenciaga to understand how they use minimal interfaces, full-focus 3D views and instant visual feedback. Researched Three.js capabilities for material swapping, texture loading and rendering dynamic initials efficiently without losing performance.

The challenge

How do you make a customization tool that feels premium and fast, without overwhelming users or slowing performance?

The solution

Built the interface around the shoe as the main focus, with a minimal horizontal panel at the bottom for all customization options. Users can rotate, zoom, change materials or colours for each shoe part and add initials. A red-toned gradient background was used to evoke the Swear studio atmosphere. Developed in Three.js, using separate material slots for each shoe part (leather, velvet, rubber etc.), dynamic canvas textures for initials and optimized models and textures to keep the experience smooth and fast.