Everything You Need to Know about 3D Product Configurators
What is a 3D product configurator?
A 3D product configurator is an interactive tool that allows potential customers to experience your products in 3D, view them from any angle, and customize colors, textures, components, and more. Sketchfab 3D configurators work online, in any browser, on any device, without the need for a plugin.
Benefits of a 3D product configurator
1. Benefits for your customers
An online 3D product configurator enriches your customers’ experience. It brings all the benefits of 3D: customers can engage in real time with a product, explore it from every angle, move it around, zoom in, and zoom out. This helps potential customers to see a product in great detail, understand how a complex product works, or explore how something is made both inside and out.
Because it’s the perfect tool to provide customization in an interactive and instantaneous way, potential customers can also customize a product to their exact needs and specifications. To see this in action, try our Nike 3D configurator demo to easily design your very own custom sneakers.
Additionally, 3D configurators help users make better and faster decisions. It’s a completely different approach, putting customer interaction in the foreground. Rather than promoting a specific style, color, or design, you let your customers build their dream product. The experience can go even further if you enable an augmented (AR) or virtual reality (VR) view of your products.
Because Sketchfab configurators work on any device or browser, customers will be able to create their products anywhere, anytime.
2. Benefits for your company
3D configurators increase conversion rates
By increasing the quality of leads
A significant benefit we have observed with all our clients is 3D configurators increase the quality of leads. A 3D configurator educates in a playful way: prospects learn how the product works and its specific characteristics during the configuration process. We have observed many customers play for 30-40 minutes or more with a 3D configurator and explore multiple versions of specific products.
By reducing your sales cycle
As a result, a 3D product configurator can redefine your sales process: sales teams communicate with educated prospects and no longer need to answer basic questions about your product.
You can also add to your configurator the possibility to generate a PDF of a configured product that a prospect can send directly to a sales person. This tool is really useful for complex products. The sales team receives a PDF copy of the configuration and just needs to finalize the order coming out of the 3D configurator. They know exactly what the customer wants, which facilitates the sales process.
Once they’re happy with a model, F.Domes’s customers can request a quote directly from the website, containing a screenshot of the configured model. If they leave their contact info, an expert from F.Domes will get in touch. Since the dealer also receives a copy of this PDF configuration, they know exactly what the customer is after.
Overall, a 3D product configurator reduces the strain on your sales team and can be a huge timesaver.
By increasing sales
The most significant benefit observed by our clients who implemented a 3D configurator is an increase in sales.
You can easily build a robust configurator to boost sales with Sketchfab’s core features (dynamic animations, annotations, Augmented Reality, Virtual Reality) combined with some simple additions built on top of our powerful Viewer API that allow customers to quickly make informed decisions based on real time price display, strong call to action, direct contact with a sales rep, etc.
As an example, this configurator from Zodiac Nautic allows potential buyers to customize all elements of their flagship yacht, view those updates in detail as they make them, and see the associated pricing in real time.
Zodiac now receives more than 50% of their sales of the N-Zo model directly from the configurator and their sales have increased by 50% in only 2 years.
Reduce your stock
In respond to the growing desire for personalization and customization, some companies have expanded their product range, thus drastically increasing their costs of production, logistics, and storage.
With a simple 3D configurator you can respond directly to custom product requests as they are specified by customers, thereby avoiding production of unsold stock. You no longer need to anticipate trends in advance with no guarantee that a new style will be popular!
Zodiac’s 3D configurator has made the production process more efficient and cost effective; they now keep fewer factory-standard products in inventory as they custom-produce almost 50% of their N-Zo model.
Reduce product return
As mentioned above, a 3D configurator makes it possible to explore a physical object from all angles and with any customization. In addition, Sketchfab’s advanced rendering engine lets customers really get a feel for product materials like wood, metal, leather, and plastic. When customers are able to see exactly what they are purchasing, their confidence level rises and cart abandonment is reduced. On top of that, AR or VR can enable customers to virtually “try out” a product.
Understanding how a product works, the quality of materials, and fit and finish means a 3D configurator is much more informative than just static photography and clients have observed a significant reduction in return rate.
3D configurators help communicate and explain your products
Drive engagement with a 3D product configurator
You can also use a 3D configurator on a dedicated webpage to catch the attention of a wide audience, when launching a new product, for example. Fnatic announced the launch of their new apparel collection and solicited sign ups to inform them of the launch date and availability. Using the Sketchfab API, the brand embedded a 3D model of their jersey and one of their jackets and hid easter eggs inside the models, creating an entertaining experience and a lot of engagement with their community. It was a massive success: more than 30,000 people signed up for the collection launch and they received significant social media attention.
Bring awareness and interactivity with a 3D product configurator
A 3D product configurator is a simple and powerful tool to bring immersion, personalization, and interactivity into your digital word, creating strong awareness and engagement around your products.
A simple way to drive awareness with a configurator is to distribute a simple configurator within banner advertisement. Since consumer attention online is increasingly fragmented, 3D ads are a great way to catch customers’ attention and demand engagement. A simple configurator leveraging 3D models can also allow potential customers to view many product configurations in one ad. Take a look at this interactive 3D ad created by LEGO, which used our configurator API and lets you easily change the color and design of the Go-Kart.
This new form of display advertising is much more efficient and inherently engaging than static banner ads. The use of this kind of 3D ad has resulted in 5-14% higher click through rates than traditional advertising.
Create an interactive online catalog with a 3D product configurator
Product configurators can be used to create interactive online catalogs of your products. This helps your customer visualize your entire product range and all possible combinations. Prospective customers can get a 360° view of their future purchase while they build it and don’t need to scroll through thousands of photos. The 3D product configurator developed for VOLA brings products to life with beautiful and accurate renderings. The ability to observe a configured product from all angles minimizes any apprehension customers might have and ensures your product meets their needs.
Showcase and explain complex products with a 3D product configurator
Another advantage of a 3D configurator is the ability to easily showcase and explain complex and/or large products. It’s an effective tool to support your sales team.
Schneider Electric has developed a 3D catalog of its products. Instead of shipping large products to the other side of the world for demonstration, Schneider Electric only has to share the URLs of their 3D models. You can try an annotated and animated version of one of their products here.
You can also use a 3D product configurator at trade shows to demonstrate your value and educate prospective clients. For example, Zodiac’s Dealers no longer need to bring all their boats to trade shows. They now only bring one physical model on-site and use their 3D configurator to show different possible combinations.
Track and learn more about your customers’ behavior
Sketchfab is a web technology, and anything you can track on the web is something that we can track in campaigns using Sketchfab. As a result we gather data about behavior and traffic.
For example, you can learn how many people spend time with your 3D models and how long they engage with them. We have observed, for example, that some of geodesic domes manufacturer F.Domes customers engage for 30-40 minutes with the configurator and prepare multiple versions of geodesic domes. Other customers come back to the configurator multiple times in the span of a few weeks. Tracking these behaviors will help you understand how customers are interacting with your products. It’s incredibly valuable to mix this data with the metrics you already have: increase or decrease in traffic, sales, conversion rate, etc.
How to build a 3D product configurator?
Now that you better understand the benefits of a 3D configurator and why you should build one, it’s time to review how to actually create one. Creating a 3D product configurator is easy, just follow these steps:
- Determine your goals and Key Performance Indicators
- Create 3D content, or optimize your existing content
- Create your configurator
- Distribute your content
1. Define your goals & Key Performance Indicators
As with any digital strategy, you first need to determine your business goals. Are you trying to create awareness, engagement, conversion? Benefits of 3D visualization can be numerous, so take some time to determine your main goals and the key metrics to track them.
Determine the Key Performance Indicators to track your goals
2. Create content for your configurator: note the trade-off between quality, download speed and rendering performance
If you manufacture products, you probably already have 3D assets in your pipeline. Sketchfab supports more than fifty 3D file formats spanning all major 3D creation software applications, so the majority of your 3D models are likely already compatible with Sketchfab.
However, given you can use content many different ways in different types of configurators, creating custom content designed for your specific use case is always the best option. You may be able to use your file as is but it will usually benefit from a number of enhancements, for aesthetic or performance reasons.
If a model takes too long to download, it may hurt user experience and potential customers may close their browser window rather than wait.
The main factors that affect download time are the size of the 3D meshes (number of polygons) and the size and number of textures (if your model uses textures).
In theory, there’s no limit to the complexity of 3D models that can be displayed in the Sketchfab viewer. However, the technology behind the Sketchfab viewer, WebGL, is hardware-accelerated, so the viewer’s performance depends greatly on the machine displaying it and the model being displayed. This is even more important to consider for mobile users. Many different factors can affect how well a model performs after the 3D viewer is loaded.
As a general rule, aim to have as few separate materials, geometries (meshes), textures, and polygons (triangles, quadrangles, etc.) as possible in your model. The lower you keep these numbers, the faster the viewer will load and the better it will perform.
The number of unique materials in a scene is probably the most important factor to consider for rendering performance. You should reduce the number of materials as much as possible while still maintaining what you need to build your configurator. Textures are a great way to consolidate multiple materials while maintaining unique material properties.
Sketchfab always automatically generates multiple resolutions of each texture in a scene. The 3D viewer will then detect the specifications of a device and load a lower or higher resolution in an attempt to balance quality and performance. The number of textures, the dimensions of those textures (pixel resolution), and the file size of textures will affect performance. Using fewer, larger textures is almost always better than using many smaller textures.
Additionally, the 3D viewer is designed to have the shortest wait time to user interaction. By default, the viewer will load the model with low resolution textures first, then quickly stream in the higher resolution versions. If you prefer full resolution textures to be loaded from the beginning, this can be achieved with embed settings, but it will increase the initial load time.
Generally speaking, the number of different 3D meshes is much more important for rendering performance than the number of polygons. For example, a model with 1,000 geometries of 10 triangles each will render much more slowly than a model with 1 geometry of 10,000 triangles.
The number of polygons is, of course, still important. An upper limit of 300,000 triangles will ensure the viewer works well for both desktop and mobile devices. Models with millions of polygons should not be expected to run well, if at all, on mobile devices.
File Structure and Naming Conventions
Finally, it’s always a good practice to give models and materials names that are descriptive and that you will remember in case future updates become necessary. This also makes them easier to manipulate when it comes time to build your configurator with the Viewer API.
If you don’t have existing 3D content or you have content but it is not well-optimized for real-time applications, we are always happy to help out. With over 2 million members, Sketchfab is home to the largest community of 3D creators on the web, and we can help connect you with a designer and manage any production needs.
3. Build the configurator
General design tips
Almost any element of a product that can be customized can be configurable. If you have front-end web development skills or resources, building a configurator with the Sketchfab Viewer API is straightforward. Here are a few tips that should help you optimize your configurator:
Configure components and colors
Depending on the number of options and your preference, the configurator can show all the available options at once, or the user can be guided through options step-by-step. Be sure to avoid long descriptions that might confuse a user.
Animation inside a configurator can be a great way to reveal a specific product feature. It will help consumers imagine the product in their own environment.
Dynamic pricing and flexibility
By implementing our Viewer API in your own application or website, you can create a dynamic display of the price of a product, that can be updated as the user customizes it.
Connecting Sketchfab to your product database also means that your 3D configurator does not need to be rewritten every time an additional option is added.
Choose a clear call to action
When using a 3D configurator, it is important for it to have a clear objective. The last thing you want is for your user to be distracted or to exit your website. To avoid that, make it easy for the user to finish their actions by providing a clear call to action. For example, the user might choose one of the following:
- Add to Cart
- Save their design
- Send an email to your sales team with the configured design
- Export the configured product as a 3D model
Having a 3D configurator on your ecommerce platform will give your customers the chance to explore your products with any required customizations. It will help your consumers understand the complexities and benefits of your product and offer a guided tour of the product and educate the user in a playful way. Here are the characteristics we usually suggest for a 3D configurator on an ecommerce website:
- Dynamic pricing
- Different languages if you know you clients are diversely located
- Direct contact with a salesperson or a direct “Buy”
- The ability to share the configured product on social media
You can see an example of all these characteristics on the F.Domes configurator.
Brands usually embed 3D configurators on their websites, but they are also a great way for consumers to discover products and raise brand awareness through ads. The Sketchfab player is compatible with all ad networks and ad servers: we power the world’s first programmatic 3D ads, and they’re customizable.
While consumer attention online has increasingly shortened, 3D ads need to remain simple enough for customers not to be overwhelmed. Ideally, your configurator should be tailored to a target audience by limiting the number of options to key components. The key benefits of leveraging 3D models is the ability for the user to see and compare many products configurations in one ad. You don’t need multiple ads showing different versions of a product or highlighting only one picture of a product.
Configurable options give shoppers the unique ability to personalize and customize products in real time within a banner ad. 3D ads create more interaction and engagement than static ads. All of our ads can include a direct link to an ecommerce website, and we have observed a tremendous increase in website conversion from 10 to 35% versus traditional, static banners. Interactive ads also create better on-site traffic by reducing the bounce rate. Once a user has converted to your owned and operated website, a more complex configurator will drive engagement and sales.
General tips for building engaging 3D ads:
- Limiting complexity (and therefore loading time) within a banner ad is key to driving initial engagement and much more important for ads than for classic configurators where the model is central to the page.
- Determine a clear call to action with a direct link to your ecommerce website.
- Consider linking to a more complex configurator on your website.
Implementing your 3D product configurator
1. Share your configurators on any browser
In order to reach audiences at scale, new technology must be accessible across all platforms. Thankfully, the Sketchfab 3D viewer works universally on all operating systems and all modern browsers* without the need for a plugin.
2. Share your 3D product configurator on any device
3D models delivered by Sketchfab are optimized for viewing on mobile, tablet and desktop, meaning your 3D configurator will be accessible from any device and work smoothly. Also, our viewer is designed to be considerate of mobile battery life (for example, the rendering is stopped when nothing moves). Basically, having the viewer loaded with an immobile scene is like having an image in a web page.
You’ll be able to share your configurator for all kinds of purposes: on your ecommerce website, in banner ads, on social, on a touch screen for events, on tablets to support salespeople, at interactive kiosks for showrooms, or in store. You can reuse your 3D models on any website or social media, in 3D ads, brochures or any marketing materials, without having to take photographs of physical products.
Measuring success of a 3D product configurator
Depending on the goals you determined, you should analyze some specific KPIs that will help you determine the success of your 3D configurator.
We can gather data about behavior (clicks, touches, experience duration, etc.) and traffic (visits, unique visitors, etc.). Tracking customer behavior and traffic on a configurator will help you analyze preferences and anticipate trends (and production needs!). You can turn data into action and get valuable insight from these analytics.
To access Sketchfab analytics, you will need an enterprise account, and ask your account manager to pull a report. This data can be segmented by device, location, age, gender and language. It’s greatly valuable to mix this data with the data you get on your side from your website’s analytics: increase or decrease in traffic, sales, conversion rate etc.
Cost of a 3D configurator
A 3D configurator project usually has 3 pricing components: the creation of 3D models or optimization of existing ones, the development of the configurator itself, and the license cost.
1. Creation or optimization of 3D models
Sketchfab configurators can work with existing assets or assets created from scratch.
The better optimized the models, the better performing the configurator. Depending on the use case, we recommend different triangle targets. Usually below 100,000 triangles, but in some cases, up to 300,000 if needed for a larger scene. In any situation, we always recommend models be retopologized (geometry simplification). This can be automated for certain parts, but an artist also needs to decide which parts are important and which are not. Once optimized, models can then be uploaded and set up on Sketchfab.
Pricing for recreating or optimizing 3D content varies depending on the complexity of the 3D model.
2. Development of the configurator
3D configurators are based on our viewer API, steps for development include:
- Graphic and interaction design
- OPTIONAL – Making the configurator responsive (if needed for Mobile & Tablet)
- OPTIONAL – Managing content (different languages, price visualization, exit options, etc.)
- OPTIONAL – Single page application or integration into an existing website
- Frontend development
- Backend development
Pricing for configurators varies according to their complexities and the options chosen. Our projects generally run between $5K for the simplest configurators and $20K for the most complex ones.