Make your own 3D configurator

Configurators refer to a scene or an object with a set of interactive control points that allow the user to interact and discover additional information, options and product variations.

Engagement with a product configurator can be the deciding factor on a path to purchase. It can also be an ideal tool to showcase product design that could transform a business. It is packed with information yet, user-oriented.

Now, in Vectary, you can create them quickly with the added benefit of being able to embed directly to web.

What can you design in a 3D configurator?

It is possible to create a 3D configurator with the help of three tools: Floating UIs and content elements, Hotspots and Object Switcher. These are the interactive and customizable components.

Floating UI

Floating UI is a container for the content of the configurator. The display settings are customizable depending on the content they should show. UI Content elements are blocks, in the Floating UI that display different kinds of data: materials, colors, object lists, images, text and button. Each element would need its own design to respond to the interaction of the user.

Hotspot

A Hotspot is a trigger for the Floating UI to appear. The hotspot itself can be customized: location, design, animation.

‍

Object switcher

Object switcher is a tool that allows you to show, hide or switch entire objects or groups of the objects, including lights and hotspots.

What are the benefits of using configurators?

Using configurators offers the full potential of combining 3D design and web to engage customers or solve business demands. Interacting with the product in a 3D viewer is the best way to create a memorable user experience.

Configurators can also be integrated in the complete product design process. From brainstorming to user research, to prototyping, compiling specifications, and even sample testing.

Configurators can make even a simple 3D web embed more engaging. For example, hotspots are fully customizable elements. They can be turned into custom animated icons using Lottie files and GIFs as animated materials.

Where can you use a configurator?

E-commerce

E-commerce is the first and most obvious place to use a product configurator. It boosts engagement by inviting direct product interaction. Users can change colors, materials and even object parts to select the option they prefer. Each interaction can be adjusted to display not only the aesthetic options but also functionality. We know that purchase-decisions are made online. By using product configurators this decision process is sped up.

Product showcasing

Product showcasing can be enhanced with a configurator. It can display multiple types of information without taking up considerable space on a page. It is possible to add long or short text descriptions, as well as links to relevant pages. It is also possible to show the modularity of a product by adding or taking away connecting components. The showcase is not limited only to products. It can be included in complete scenes and environments as used in architecture, landscaping, fashion, as well as numerous b2b industries.

Prototypes

A product configurator can be used as a possible substitute for a Prototype. It is a 3D study of an idea without the hassle of having it in production. Ideal solution for anyone showcasing their designs for business funding on sites such as Kickstarter. The configurator provides visualization and information without the actual prototype, and in a format that is easy to embed on any website. Plus, it is possible to embed your configurable product showcase to Pitch presentation, Miro or Notion.

Educational tools

Using configurators as Educational tools is also becoming more frequent. The digital classroom model is not only suitable for schools, but also internally for companies and organizations. The highlight is that the user can explore a scene and discover the information in that 3D environment. The length of the text information can easily substitute multiple pages previously needed.

‍

3D product configurator examples

Check out these 3D configurator examples. Some of them are made as sample projects in Vectary so you can clone them to your Vectary workspace, open in Vectary Studio and learn how they were made.

A hairdryer configurator with modular interactions and annotations.

A buckle configurator with hotspots interactions and material switcher.

A stroller 3D configurator with a material switcher, floating UI, interactions and animations.

A drone 3D configurator with material switchers, floating UI and 3D on-click animation.

A headphones 3D configurator showcasing floating UI, where the whole scene was set up as an object switcher.

A headphones 3D configurator demo from the Vectary tutorial, where you can see custom animated hotspots with material switcher and annotation. Plus, object switcher in the floating UI to show and hide an accessory.

Air purifier configurator showcasing custom animated hotspots triggering floating UIs with object switcher, material switcher and annotation.

‍

Make your own 3D configurator

With the latest feature update, it is now possible to design a configurator in Vectary that is intuitive, fast, and user-friendly. It works on any device, in-browser, with created or imported designs. To get started, watch our Custom Floating UI series.

Vectary does require a subscription to Pro or Business Workspaces to share or embed the configurator online. Vectary also offers a complete service for businesses ready to explore product configurators, but might not have internal resources. If that is the case, contact us.

‍