Home / Portfolio / 3D padel court configurator
Case study · 3D configurator and planner
3D padel court configurator
A sales tool for court manufacturers: customers design their court step by step, see it in 3D with their logo and send the request.

- Format
- 6-step web configurator and facility planner
- Options
- Size, court type, turf, color, RAL frame and lighting
- Stack
- React Three Fiber, Three.js, Vite, Blender
- Languages
- Spanish and English, meters and feet
- Services
- UX/UI design, 3D modeling & optimization, WebGL engineering (React Three Fiber), Shaders & materials, Facility planner
The idea
A padel court manufacturer sells a product with many combinations: size, glass or mesh, turf type, colors and lighting. Explaining it over PDFs and email takes weeks of back and forth. In the configurator, customers decide step by step while seeing their court in 3D, with their club's logo on the glass and the net, then add it to the cart and send the request.
How it's built
- The court comes from a Blender model, optimized to load fast on mobile.
- The turf carries the real texture of each type (monofilament or textured) and its color is applied in real time.
- The court lines are painted in a shader at their exact regulation size, and the glass has physical transparency.
- It works just as well on mobile: the court on top, the options below.
The court planner
Before choosing finishes, customers need to know how many courts will fit. The planner works it out: describe the hall or plot in plain words, or draw it by hand with its pillars and entrances, and it tries hundreds of layouts in seconds. It respects clearances, free zones in front of doors, evacuation routes and clear height, and explains why it picks each one.
The result can be explored in 3D and downloaded as a PDF dossier. From there, each court goes into the configurator to choose its finish.






Related services
Want something like this for your brand?
Let's talk →More work
- Tabasco · 3D WebGL product websiteWeb · UX/UI · Food & beverage
- Four-stroke engine · Interactive 3D courseTraining · Three.js · Technical training
- Domingueros · Wines and a live 3D map3D web · Packaging · Wine
- t' Gouden Mandeken · 3D website for a barWeb · Three.js · Hospitality
- St. Peter's Abbey (Ghent) · Food market proposalBranding · Project management · Hospitality & leisure