Charger configurator

Electronics companies love this solution for getting it to market.
Open the interactive demo

What is a charger configurator?

A charger configurator is a dynamic digital solution designed to fulfill both internal and external needs. It serves as a robust tool for manufacturers and designers to tailor and conceptualize charger designs in line with specific requirements and preferences. Internally, it facilitates collaborative effort among teams, streamlining design processes, and expediting decision-making. Externally, it functions as an engaging sales tool, empowering customers to personalize and visualize their desired charger configurations prior to purchase. This versatile tool enhances operational efficiency, reduces production lead times, and amplifies customer satisfaction through interactive customization options.

Concept development

The objective of this project was to display a broad vision of what Vectary’s platform can deliver. The aim was to create a digital twin version of a charger and to showcase all the types of interactions users could have with it in real life.

To prepare this demonstration, two features from Vectary were primarily used:

  • Animations (to explain the movements of some components of the object)
  • Visibility (to show and hide elements and mimic “turn on and off” actions)

How to make a 3D configurator


The charger was modeled in Rhino and imported as an FBX file to maintain the same layer organization between Vectary and Rhino. It's important to sort different parts of the model directly in CAD software according to how you visualize the materials of the objects for the rendering phase.

Materials & Baking

For this project, the aim was a neutral overall style that avoids the classic black and white combination. Therefore, we opted for a metallic body with slight touches of green and orange on some details or interactive parts. If possible, we always recommend studying and reviewing products that are already in the market as the first step. This helps identify common details, shapes, and materials used in the industry, as it will improve the overall realism (e.g., metallic ends of the plugs).

Once the materials are prepared, don’t forget to bake them. However, be aware that a lightmap (which often gives outstanding results) doesn’t work with materials that have metalness set to 100%. In such cases, it’ is worth reducing the metalness intensity to benefit from the lightmap’s overall effect.The screen was made in Figma as a frame, and then imported as a plane in Vectary. Edit the design in Figma and simply synchronize the textures in Vectary to be more efficient. A thin layer of glass was added above this screen (graphic) plane to mimic the reflective effect of a real-life screen.

Stickers & Decals

Like the screen, all the stickers were created in Figma for easy editing without the need to re-import, resize, reorient, and reset their position. Simply synchronizing the opacity map and color map will do the job. Never underestimate the power of graphics in your quest for realism, especially on consumer goods.


A default HDRi was used in this project, with an intensity set between 25%-30% to give more importance to movable lights. Several rectangular lights were placed around the object (with shadows options activated) to ensure nice reflections regardless of the camera's location around the object.

The LED lights on the front board were achieved by setting the emission map's intensity to 800%. (While you can't slide the cursor beyond 100%, you can type in higher values).

To make sure the exposure of the lights isn’t too strong, Vectary has developed an effect called "adjustments" found on the right panel (below the AR feature). In the tone-mapping section, there is a list of different options. In this case, we used the filmic one as it maintains the balance of shadows and highlights.

Another effect that adds great value when using LED lights is the bloom effect. However, you’ll need to adjust it to ensure that only the LEDs are blooming and not the highlighted areas of the product. Usually, setting a high intensity along with a high threshold value (you can go above 100 like the emission map) is a good combination.


This project has four different types of interactions:

  • Animations: These are triggered by the on/off button, the top right corner button, and the plugs. The animations were prepared in animate mode to gain more movement control using key frames.
  • Object visibility: This focuses on hiding and showing objects, such as the screen and the LED on the front board. The on/off button serves as the trigger. Using a delay in the action can be very interesting effect. For instance, add individual delays to each LED when they turn on to achieve a smooth "one-after-another" effect.
  • Highlights: Highlights have various purposes in this project. They are the main guides that invite user engagement. By clicking on the background, the on/off button and the top right corner button will be highlighted, indicating to the viewer to focus on these areas in order to interact with the demo.
  • Material switcher: The FUI (floating user interface) that controls the materials of the three different parts is positioned relative to a hotspot. Its visibility is controlled by clicking on this hotspot. Since the FUI is set to auto-hide, close it at any time by clicking anywhere in the scene.

Learn more about Vectary configurators

The benefits of having a charger configurator

Design iterations

The configurator accelerates the design iteration process by enabling quick prototyping and team collaboration. Its interactive features allow designers to experiment with different configurations swiftly, iterate designs based on feedback, and make decisions more efficiently. All of these contribute to a quicker time to market.

Reference tool

The configurator is not only visually comparable to a physical prototype, it also functions as the object would in real life. Use it as a reference guide for customer support, maintenance and repair technicians, even for the product manufacturing teams that can be shared and viewed on any mobile device.

Sales conversions

The configurator is made for interactions in virtual settings to increase customer confidence, reduce uncertainty, and lead to higher conversion rates. Additionally, the configurator serves as an effective marketing tool, distinguishing the brand from competitors with its engaging and interactive features.

Discover Vectary Business solutions for electronics companies

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