Cycling shoe configurator

Create an interactive 3D presentation or a custom shoe buider of your design.
Open the interactive demo

What is a shoe configurator?

Cycling shoe configurator is an interactive 3D visualization that explains more than just colors and material options. It also dives deeper into the technology of the shoe thanks to 3D animation. The final presentation can be shared directly as a link for internal presentations, or embedded on the website (even connected with the checkout).

Concept development

The objective of this shoe project was to display technical information and unique innovation using interactive configurations.

The interactive elements explain:

  • Sole construction, with an exploded view to display the different layers.
  • Cleat fixation, how it can be tied, fixed on the shoe.
  • Tightening system of the shoe
  • Different material options

The final variation can also be shared as Augmented Reality (AR) and viewed in a real environment.

How to make a cycling shoe configurator

Setting up the model

The model was created in Rhino and exported as an .fbx file. Due to the complexity of most surfaces, special attention was required for the model's topology in this project. Therefore, the shoe was imported into Blender to fix the UV mapping, ensuring that all textures would be applied correctly in Vectary.

Lighting setup

Given the shoe's complex and curved surfaces, the role of lighting is to accentuate these shapes and enhance the perception of volume. To achieve this, rectangle lights are the preferred choice, offering easy control over location and orientation. As with many projects, it's crucial to lower the intensity in the environment settings to prioritize local lights. Adding shadow effects to the main light source enhances realism and detail in the scene.

Materials

Material selection is pivotal in this project. While a cycling shoe possesses soft contours, its primary material tends to be rough. The goal was to strike a balance between a plastic aesthetic and fabric softness, creating a hybrid appearance that is both soft and sturdy. Incorporating patterns into the color map reinforces the material's realism. After finalizing the texture's overall appearance, it's essential to bake its lightmap and ambient occlusion to introduce additional details that elevate the final result.

Interactions

Interactions in this scene primarily rely on hotspots, represented by animated 2D images. These hotspots trigger animations such as rotating the shoe to examine sole details or disassembling various parts to explore features like cushioning and mesh types. Animation also demonstrates how to attach cleats to the shoe using screws and designated locations on the sole. Additionally, a material switcher is accessible by clicking on the logo, allowing users to choose between black and white versions of the shoe. Technical information is included in the floating UI and accessed by clicking on hotspot.

Learn more about Vectary configurators

The benefits of having a 3D configurator for cycling shoes

Explanation

This cycling shoe configurator uses interactive animations to demonstrate and clarify the innovative technology of the shoe. By disclosing all the separate components of the shoe sole it is easy to point out all the design and functional elements such as materials, closure systems, and cleat compatibility. This information is useful for the buyer as well as the retailer.

Visualization

Interactive animations create a dynamic and immersive visual experience. Viewers can rotate, zoom in, and out to examine different angles and perspectives. This level of detail enables them to closely inspect the design, construction, and features of the shoe, making sure they meet the expectations in terms of both aesthetics and performance.

Decision-making

The configurator offers a realistic and interactive preview of a customized cycling shoe. It allows buyers to quickly view different design choices and compare them side by side. This interactive feature helps cyclists make a confident and informed decision about the final shoe design, resulting in greater satisfaction with the purchased product.

Bring the interactive experience to your website

Experience interactive storytelling through the integration of an API that facilitates interaction between a 3D object configurator and a web page.
The aim of this project is to exhibit how an object's animation synchronizes with the website's scrolling position and the UI color change.
This project was developed on the Framer web platform.
Learn more about Vectary API

Discover Vectary Business solutions for furniture companies

Get a quick guided product tour. Your questions - answered.
Book a demo