How we built DEV3 FORMA: a 3D sneaker storefront with material variants and no backend

FORMA is a Next.js storefront template for footwear and apparel with a real-time 3D sneaker hero, a product configurator, filters, cart, wishlist, search and a clearly labelled demo checkout.

Stack: Next.js 16 (App Router), React 19.3, three.js, React Three Fiber and Lenis.

Decisions that mattered

• Material variants come from the file. The sneaker is a glTF model with three KHR_materials_variants. The template reads each variant's base-colour texture through the glTF parser and blends two in one physical material, so a colour change plays as a heel-to-toe wipe.
• More colourways than the file has: a small shader function splits the texture into light, accent and dark panels by saturation and luminance and recolours each.
• Finishes (Knit, Suede, Patent) are roughness, sheen and clearcoat presets on the same material.
• The exploded anatomy section splits the mesh at runtime into outsole, midsole, upper and laces by triangle position.
• Garments are inflated from 2D polygon silhouettes, and product images are rendered from the models by a script.
• Cart, wishlist and UI state live in a small external store on useSyncExternalStore, persisted to localStorage, with clear seams for a real cart API and a Stripe Checkout Session.

Limits: the store has no backend, the checkout is a demo, and the sneaker model is credited under CC BY 4.0.

Note: wiring a real backend is left to the integrator.

Feedback welcome.