Complete Guide to 3D Configurators for E-commerce

A 3D configurator lets your customers personalize your products in real time, directly on your e-commerce site. They choose a color, material, or component : the 3D model updates instantly in the browser, with no plugin to install and no page reload.

This technology, once reserved for large brands, is now accessible to any e-retailer regardless of size. This complete guide explains how it works, how to integrate it on your CMS, what it costs, and what the concrete return on investment looks like.

What is a 3D configurator?

A 3D configurator is an interactive web application that allows a user to personalize a product in real time directly in their browser. Unlike a photo gallery that changes with options, a 3D configurator generates views from a 3D digital model, using the device's graphics card via WebGL.

In practice: your customer lands on your product page. They see an interactive 3D model they can rotate 360°, zoom into. If they pick "cognac leather" instead of "black leather", the model updates in milliseconds. If they click "view in augmented reality", their phone displays the product in their living room at real scale.

Difference from per-variant photos and 360° images

There are several approaches to showing product variants online. Here is how they compare:

• Per-variant photos: for every color/material combination, a studio shoot. 5 colors × 4 materials = 20 photos to maintain. Expensive, slow to update, impossible on a large catalog.
• 360° photos: better than fixed images, but still pre-captured. No real personalization, no AR, studio cost still present.
• 2D configurator: displays flat images that change with options. Fast to set up, but no rotation, no AR, and one image needed per combination.
• 3D configurator: a single digital model, all combinations generated in real time. Adding a color takes a few hours, not a photo session. 360° rotation, zoom and augmented reality included.

Self-service software or custom build: how to choose?

There are two ways to put a 3D configurator in place, and this guide covers both.

3DVue software is a self-service platform: you upload your 3D files (glTF, GLB, FBX, OBJ, STL and other formats, converted directly in the browser), you set colors, materials and options yourself, and you go live the same day. 14-day free trial, no credit card, then from €49 excl. VAT/month, no commission on your sales. It is the right choice if you already have your 3D files and your products mainly change in materials, colors or options.

Custom work is handled end to end by the 3DVue studio: modeling from your photos or drawings if you have no 3D files, an interface in your own branding, a production proof if you need one, integration and continuous human support. Starting from €5,000 excl. VAT, free quote. It is the right choice if you are starting from photos or drawings, if you want an interface in your own branding, or if your product is modular.

The software also includes the AI Photo Studio: from the 3D model already uploaded, it automatically generates lifestyle photos for every variant, with no new photo shoot. We compared it publicly to ChatGPT and Gemini: see the test.

How does a 3D configurator work?

WebGL: the real-time rendering engine

WebGL (Web Graphics Library) is a standardised JavaScript API that enables 3D rendering in a browser by directly using the device's GPU (graphics processing unit). Without WebGL, interactive 3D without a plugin would be impossible.

WebGL operates via the HTML <canvas> element. The browser sends geometry data (vertex positions) and material data (textures, shaders) to the GPU, which calculates each frame to display : typically 30 to 60 times per second, giving a perfectly fluid impression.

WebGL is natively supported by over 97% of browsers in use (Chrome, Firefox, Safari, Edge; Can I use data) on desktop and mobile. No installation, no plugin. For an e-commerce 3D configurator, it is the technological foundation that makes everything possible.

3D models and PBR textures

A 3D configurator relies on two types of digital assets:

1. 3D models (geometry) : the shape of the product, created in a 3D modeling application (Blender, Cinema 4D, SolidWorks…) and exported in GLTF/GLB or OBJ format. The quality and fidelity of the model determines the final visual realism. A well-made model is indistinguishable from a studio photo.

2. PBR textures (Physically Based Rendering) : images that define the appearance of each material. PBR is a set of texture maps:

• Albedo (base color)
• Roughness (surface roughness : matte or glossy)
• Metallic (metallic appearance)
• Normal map (simulated surface relief)
• Ambient Occlusion (contact shadows)

It is this combination of maps that makes a fabric look like linen, velvet or cotton. When a user switches material in the configurator, the WebGL engine loads the new PBR textures and applies them to the model in milliseconds.

The Web Component: the universal HTML element

The 3DVue configurator is distributed as a Web Component : a native browser technology that allows custom, reusable HTML tags to be created. This is what makes integration so simple: no framework required, no build step, universal compatibility.

In practice, integrating the configurator on a product page requires two things:

1. Load the CDN script once (in the <head>):

<script type="module" src="https://cdn.jsdelivr.net/npm/@3dvue/viewer@latest/dist/viewer.js"></script>

2. Place the configurator tag where you want it to appear:

<viewer-3dvue name="my-configurator" src="https://app.3dvue.fr/c/xxx"></viewer-3dvue>

The configurator automatically resizes to fit its container. It is responsive by nature.

Connecting to your variant buttons

The configurator connects to your existing variant selectors via HTML attributes. Example with color buttons:

<button data-viewer-3dvue-target="chair"
        data-viewer-3dvue-param="color"
        data-viewer-3dvue-value="white">White</button>

<button data-viewer-3dvue-target="chair"
        data-viewer-3dvue-param="color"
        data-viewer-3dvue-value="black">Black</button>

When a user clicks, the configurator listens to the event and updates the 3D model. No JavaScript to write. Your existing buttons or <select> elements remain untouched.

WebAR Augmented Reality

Augmented reality is included in all 3DVue projects at no extra cost. It lets your customers virtually place your product in their real space : their living room, office or garden : from their smartphone.

How does WebAR work?

Unlike native AR apps that require a download, WebAR works directly in the browser:

• On iOS: via Safari, using Apple's native USDZ format (Quick Look AR)
• On Android: via Chrome, using WebXR and Google's Scene Viewer

A "View in augmented reality" button appears automatically on mobile product pages. One tap opens the camera and the product appears at real scale in the customer's space. No app to download, no friction.

Compatibility: WebAR works on iPhones with iOS 12 or later (Safari) and on ARCore-compatible Android devices (Chrome), per Google's official list.

Why AR changes conversion figures

AR reduces one of the main barriers to online purchase: uncertainty about dimensions and how a product fits in a space. For furniture, decorative objects, lighting, rugs : categories where returns are frequent and costly : WebAR lets customers visually verify the product fits their environment before ordering.

Measured results: product pages with AR show on average +20 to +35% add-to-cart rates and a significant reduction in return rates for large-size products.

Integration on your CMS

The 3DVue configurator integrates on all major e-commerce CMS platforms. Here are the details for the four main ones.

Shopify

Integration requires no Shopify app from the App Store. It is done directly in the theme code.

Step 1 : Load the script in theme.liquid, before </head>:

<script type="module" src="https://cdn.jsdelivr.net/npm/@3dvue/viewer@latest/dist/viewer.js"></script>

Step 2 : Place the tag in your product template or a Liquid section:

<viewer-3dvue
  name="{{ product.handle }}"
  src="{{ product.metafields.configurateur.src }}">
</viewer-3dvue>

To connect native Shopify color swatches, the data-viewer-3dvue-* attributes are added directly to the buttons generated by your theme. Compatible with all Shopify 2.0 themes (Dawn, Sense, Origin…) and legacy themes.

→ See the dedicated Shopify integration page

WooCommerce

On WordPress + WooCommerce, the script is loaded via wp_enqueue_script() in your child theme's functions.php file:

add_action('wp_enqueue_scripts', function() {
    wp_enqueue_script(
        '3dvue-viewer',
        'https://cdn.jsdelivr.net/npm/@3dvue/viewer@latest/dist/viewer.js',
        [], null, false
    );
    wp_scripts()->add_data('3dvue-viewer', 'type', 'module');
});

Then place the <viewer-3dvue> tag in your product template (single-product.php), an Elementor HTML widget, a Gutenberg block or a custom shortcode.

To connect native WooCommerce variations, attributes are placed directly on variation <select> elements or swatch buttons. No WooCommerce plugin required.

→ See the dedicated WooCommerce integration page

PrestaShop

On PrestaShop 1.7 and 8.x, integration is done via native hooks in a custom module or directly in the theme's Smarty templates:

{* In product.tpl : before </body> *}
<script type="module"
  src="https://cdn.jsdelivr.net/npm/@3dvue/viewer@latest/dist/viewer.js">
</script>
<viewer-3dvue
  name="{$product.link_rewrite}"
  src="{$product.configurateur_src|escape:'html'}">
</viewer-3dvue>

No PrestaShop module to install, no back-office activation. Compatible with PS 1.7.x and PS 8.x.

→ See the dedicated PrestaShop integration page

WordPress (without WooCommerce)

For a WordPress showcase site, script loading is identical to WooCommerce. The tag can be placed in any block editor:

• Gutenberg: "Custom HTML" block
• Elementor: "HTML" widget
• Divi, Bricks, Oxygen: HTML code module

No WordPress plugin to install, no dependency on a specific page builder.

→ See the dedicated WordPress integration page

JavaScript API: advanced use cases

For more complex integrations : render capture, connection to an order flow, ERP synchronisation : the Web Component exposes a JavaScript API:

const viewer = document.querySelector('viewer-3dvue');

// Capture the current render as base64 (to store with the order)
const imageBase64 = await viewer.captureToBase64();

// Listen for configuration changes
viewer.addEventListener('config-change', (e) => {
    console.log('Configuration:', e.detail);
    // Update price, stock, shareable URL...
});

// Set a configuration programmatically
viewer.setParam('color', 'white');
viewer.setParam('fabric', 'velvet');

Accepted 3D file formats

To create your configurator, you can provide existing files or simply photos of your products.

If you have no 3D files, 3DVue creates the models from:

• Your product photos (front, side, top, bottom : 4 angles minimum)
• Your technical drawings (PDF, DXF, dimensioned diagrams)
• A physical sample, send it to us

Indicative modeling times by complexity:

• Simple product (mug, cushion, pen): 2 to 3 days
• Intermediate product (chair, handbag, t-shirt): 4 to 6 days
• Complex product (modular armchair, technical shoe, bicycle): 8 to 15 days

Impact on your site's performance

A poorly implemented 3D configurator can hurt your Core Web Vitals. Properly implemented, its impact is negligible. Here are the optimizations applied by default on all 3DVue projects.

3D asset optimization

• Draco compression: reduces 3D geometry weight by 60–80% with no visible quality loss
• KTX2 textures: GPU-compressed texture format, loads 3× faster than PNG
• LOD (Level of Detail): the low-resolution model appears immediately, the high-resolution version loads in the background
• GLTF 2.0 format: binary format optimized for the web, compatible with partial streaming

Non-blocking asynchronous loading

The 3DVue script loads as type="module" : it is non-blocking by nature. The configurator renders in an HTML <canvas> that does not interfere with the rest of the page. For optimal LCP, use the lazy loading attribute:

<!-- The configurator only loads when it becomes visible -->
<viewer-3dvue name="chair" src="..." loading="lazy"></viewer-3dvue>

Core Web Vitals targets

How much does a 3D configurator cost?

The cost of a 3D configurator depends on three main variables: the geometric complexity of the product, the number of materials to integrate, and the features required (proof generation, advanced AR, API…). For a detailed article on pricing, see our complete guide on 3D configurator pricing.

Production costs (one-off investment)

A custom 3DVue project (modeling, materials, integration) starts from €5,000 excl. VAT, depending on the number of products, materials and options. You receive a free, detailed quote after a 30-minute call.

Monthly subscription (recurring cost)

A subscription covers hosting of 3D models on the 3DVue CDN, WebGL platform updates and support: it only starts once the configurator is live, on quote depending on the number of products and traffic. No commission on your sales.

ROI: what it delivers

• Returns reduced by 20–40% : the customer sees exactly what they are ordering
• Average basket up 15–30% : personalization creates attachment and justifies a higher price
• Fewer customer service requests : "does this fabric come in blue?" disappears when customers can see it in real time
• Competitive differentiation : very few e-retailers currently offer a real interactive 3D experience

Public benchmarks. Mobile accounts for 58.99% of worldwide web traffic (Statcounter, September 2026), so a 3D experience has to be designed for the phone first. On results, vendor Threekit reports up to 35% fewer returns with a 3D configurator (the vendor's own figure, not independent), and Shopify reports, for the merchant Gunner Kennels, a 40% rise in order conversion and a 5% drop in returns after adding 3D and augmented reality. Results vary with the catalog and the product.

3D configurator examples by sector

Furniture and home decor

Furniture is the sector where 3D configurators deliver the most value. Customers hesitate over dimensions, colors and materials : and returns are costly. A furniture configurator lets them choose frame color and upholstery, select legs, add optional elements (headrest, armrests, ottoman) and visualize the product in AR in their living room.

→ See our furniture 3D configurator page

Textile and fashion

For clothing, bags and accessories, the configurator enables real-time personalization: fabric color, embroidery, panelling, logo. Textile render simulation (folds, materials, stitching) reaches photorealistic quality. A typical use case: a custom bag retailer who automatically generates an SVG production proof for the workshop.

→ See our textile and fashion 3D configurator page

Jewelry and luxury

In the jewelry sector, visual quality is paramount. A 3D configurator lets the customer personalize a piece (metal, stone, engraving) with photorealistic rendering. AR is particularly valuable here: seeing a ring "on" your hand before ordering dramatically reduces the return rate.

→ See our jewelry and luxury 3D configurator page

Promotional items

A sector where personalization is the core of the business. A configurator for promotional items lets customers visualize a logo on a pen, mug or tote bag : changing background color, print color and logo position in real time. The production proof is generated automatically.

→ See our promotional items 3D configurator page

Sports kits and equipment

Kit personalization (club colors, number, name) is an ideal use case. The user sees their personalized kit in real time : front, back : before ordering. The production file goes directly to the printing supplier.

→ See our sports kit 3D configurator page

Comparison table: 3D configurator vs alternatives

Comparing 3D configurator providers

The market is fragmented between players with very different models. Here is an honest analysis of each solution : strengths and limitations : to help you choose with full information.

3DVue 🇫🇷 : self-service software or custom studio (France, 2022)

Strengths: the only player on this list offering both models: self-service software from €49 excl. VAT/month for e-retailers who already have their 3D files, and a custom studio from €5,000 excl. VAT for those starting from photos or drawings. Modeling, integration and continuous human support included on custom projects; 14-day free trial, no credit card, on the software.

Limitations: the self-service software, launched recently, offers fewer simultaneous products and materials than established players like Zakeke on entry plans; the interface is only available in French and English.

Zakeke 🇮🇹 : Self-service SaaS (Italy, 2017)

Strengths: the most accessible on the market, from €29/month. Intuitive interface, easy integration on Shopify and WooCommerce via their app. Ideal if you already have your 3D files and a developer available.

Limitations: Zakeke is a tool, not a service. You must provide your own 3D models : without which you cannot start. No modeling included, no integration support. The 3D render is generic and hard to fine-tune. Support is ticket-based. For a complex product or a large catalog, the platform quickly shows its limits.

→ Detailed comparison: 3DVue vs Zakeke

Emersya 🇫🇷 : SaaS + 3D services (France, Montpellier, 2012)

Strengths: solid French player with real 3D expertise, clients including Samsonite, Salomon and Vitra. Mature platform, quality rendering, AR presence.

Limitations: designed for brands with existing internal resources (digital team, project manager, access to 3D assets). The platform is powerful but complex to take on without a dedicated team. Pricing is on request and largely inaccessible to SMEs without significant volume. The 3D creation service is an optional add-on, not the core of the model.

→ Detailed comparison: 3DVue vs Emersya

Threekit 🇺🇸 : Enterprise (USA, 2005)

Strengths: the best photorealistic rendering on the market, Salesforce CPQ integration, Fortune 500 clients. For a large brand with a significant budget, it is the benchmark.

Limitations: completely out of reach for SMEs. Minimum budget of $50,000/year, deployment time of 3 to 6 months, requires a dedicated in-house 3D team. English-only support, focused on the US market. For a mid-sized e-retailer, this is a disproportionate solution.

→ Detailed comparison: 3DVue vs Threekit

Roomle 🇦🇹 : Furniture SaaS (Austria, 2014, HOMAG Group)

Strengths: very strong on modular furniture configuration and room planning. Advanced rules logic for products with many structural combinations.

Limitations: almost exclusively furniture-focused : unusable for textile, jewelry, promotional items or sportswear. Minimum €850/month for a basic plan. You must provide your own 3D files and manage integration yourself. Acquired by HOMAG (industrial woodworking machinery group), the product roadmap is drifting away from pure e-commerce.

VividWorks 🇫🇮 : CPQ SaaS (Finland, 2006)

Strengths: excellent for truly modular products with complex CPQ logic (configuration rules, dynamic pricing, ERP integration). Well-suited for B2B manufacturers.

Limitations: designed for technical teams capable of managing the platform autonomously. Setting up a project takes several weeks of configuration. No modeling service included. For a B2C e-retailer looking for a turnkey solution, the tool is over-engineered and complex to exploit without dedicated resources.

Salsita 🇨🇿 : Full-service studio (Czech Republic, Prague, 2010)

Strengths: full-service approach close to 3DVue's : they manage the project end-to-end with real 3D expertise. Good for complex, bespoke projects.

Limitations: 100% custom development = long lead times (several months per project) and costs that are hard to predict. No standardised product, no foreseeable subscription pricing. Based in Czech Republic, client communication is in English. After delivery, any change requires a new service negotiation : there is no continuous after-sales support built into a monthly subscription.

Hapticmedia 🇫🇷 : Luxury full-service studio (France, Paris/Strasbourg)

Strengths: another French full-service studio, with genuine expertise on complex materials (crystal, leather, precious metals) for major luxury houses (Longchamp, Baccarat, Guerlain, De Beers).

Limitations: geared towards enterprise-scale luxury brands : average lead time of 3 to 6 months per their own documentation, no public pricing. For an SME needing a configurator in days rather than months, the project format does not match.

→ Detailed comparison: 3DVue vs Hapticmedia

Cylindo 🇩🇰 : Product visualization (Denmark, 2012, acquired by Chaos)

Strengths: very high-quality photorealistic product images, good for large-scale visual asset management.

Limitations: Cylindo is not really a real-time 3D configurator : it is a visualization system based on pre-rendered images. No free WebGL rotation, no native WebAR, limited personalization. Acquired by Chaos (publisher of V-Ray), the product is evolving towards studio use rather than e-commerce. Quote-based pricing, accessible only to large accounts.

Questions to ask before signing

1. Who creates the 3D models? : If the provider does not offer modeling, you will need to outsource it or do it in-house. Check the total real cost.

2. Who handles integration on my site? : Some platforms document integration but do not perform it. If you have no developer available, clarify this before signing.

3. Do the 3D files belong to me? : Essential to avoid being locked into a single provider and to use the assets on other channels.

4. What happens after delivery? : Who responds if a model needs updating, a new material must be added, or the configurator stops displaying after a theme update? Responsive human after-sales support is worth its weight in gold.

5. Are there hidden fees? : Per-render charges, sales commissions, undocumented session limits. Read the terms of service before signing.

Frequently asked questions

Conclusion: where to start?

The 3D configurator is no longer a luxury reserved for large brands. The technology is mature, prices have come down, and the impact on conversions and returns is documented across dozens of projects.

If you sell customizable products : furniture, textile, jewelry, promotional items, sportswear : a 3D configurator is probably the highest-return investment available in 2026.

The next step is simple: describe your product and variants in 15 minutes. Thibaut will reply within 24 hours with a precise estimate of cost, lead time and the recommended technical approach for your case : no commitment.