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.

Visit the site ↗

3D padel court configurator
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.

Planner on a phone: the eight-court plan and the same layout in 3DPlanner: eight courts laid out in a 44 × 62 m hall, with dimensions and free zonesPlanner: the same eight-court layout seen in 3D

Want something like this for your brand?

Let's talk →