Discover Vectary Business solutions for electronics companies
Get a quick guided product tour. Your questions - answered.
A power bank configurator is an interactive digital tool made to explain the internal parts of the product design in a 3D space. This tool allows various stakeholders in the product development process to explore all the features and design elements in detail. It can be part of the decision making process on selecting the case color or to use the exploded-view to reveal internal parts and components. Having easy access to detailed explanation of each internal element can be used for training or assisting in repairs.
The main goal of this project was to show the internal parts of the power bank that can not be seen from the outside. By using the exploded view as the main animation, the information provided would show the materials used, dimensions and technical specifications. That means that each layer would have to be done in a way that it is possible to collapse all the parts together, as well as separate them. As the main interactive component is to open and close the power bank, there is not a need for adding hotspots. On click interaction is enough in this case.
This model was created in 3Ds Max and then imported into Vectary as an .FBX file. The key focus was on modeling all the internal components accurately.
Most of the materials were added in Vectary, except for the chipset. The chipset texture was created in Substance Painter and imported into the studio, along with the roughness and normal maps. Ambient occlusion and Lightmaps were later baked in Vectary to enhance the overall look. Lighting setup For this project, we aimed for a darker scene. The background and ground plane are almost black. We used a three-light setup with key light, fill light, and rim light to highlight the model effectively.
This project includes several animations. First, there's an exploded view animation that opens the power bank, revealing all the internal components. Each component also has a separate slide-out animation for better visibility and inspection.
Additionally, there are animations for planes with .PNG images showing component specifications. These specs are hidden inside the object and are scaled up and repositioned through animations.
All interactions were set up with an on-click trigger for different components of the power bank. Clicking on a component triggers its slide-out animation along with the animation of the technical specifications .PNG images. Clicking the component again slides it back in along with the specs.
This interaction works similarly when clicking on other components, sliding the first component and its specifications back in while sliding out the one you clicked.
Having an option to generate an AR preview showing the exploded view of the power bank delivers an immersive visual experience, for increased product engagement if the configurator is used as a customer facing online tool.
The configurator offers an immersive, detailed view of the power bank’s core design. Users can explore color choices and how they affect the appearance. The exploded-view shows the product's internal components, while each one is explained in floating annotations.
The configurator, with its ability to visualize all the product components is a perfect solution for various teams working on the production of the power bank. From concept design approval, to the manufacturing team's guidance, all the way to educating the repair and customer support teams.
The configurator provides a personalized experience for the teams creating the power bank, as well as the consumers that will use it. Interactive features and Augmented Reality invite direct product engagement and understanding though an immersive experience.
