Un configuratore 3D permette ai vostri clienti di personalizzare i prodotti in tempo reale, direttamente nel vostro negozio online. Scelgono un colore, un materiale o un componente: il modello 3D si aggiorna istantaneamente nel browser, senza installazioni, senza ricaricare la pagina.
Questa tecnologia, riservata ai grandi brand cinque anni fa, è oggi accessibile a qualsiasi commerciante online, qualunque sia la sua dimensione. Questa guida completa spiega come funziona, come integrarlo nel vostro CMS, quanto costa e quali benefici concreti apporta.
Che cos'è un configuratore 3D?
Un configuratore 3D è un'applicazione web interattiva che permette a un utente di personalizzare un prodotto in tempo reale direttamente nel browser. A differenza di una galleria di foto che cambia in base alle opzioni, un configuratore 3D genera le viste da un modello digitale 3D, sfruttando la scheda grafica del dispositivo tramite WebGL.
In concreto: il vostro cliente arriva sulla scheda prodotto. Vede un modello 3D interattivo che può ruotare a 360° e ingrandire. Se sceglie "pelle cognac" invece di "pelle nera", il modello si aggiorna in millisecondi. Se clicca su "visualizza in realtà aumentata", il suo telefono mostra il prodotto a grandezza naturale nel suo salotto.
Differenza con le foto per variante e le immagini 360°
- Foto per variante: per ogni combinazione colore/materiale, una sessione fotografica in studio. 5 colori × 4 materiali = 20 foto da mantenere. Costoso, lento da aggiornare, impraticabile con un catalogo ampio.
- Foto 360°: migliori delle foto statiche, ma sempre immagini pre-catturate. Nessuna personalizzazione reale, nessuna AR, sempre con costo di studio.
- Configuratore 2D: mostra immagini piatte che cambiano in base alle opzioni. Rapido da implementare, ma senza rotazione, senza AR, e un'immagine per ogni combinazione.
- Configuratore 3D: un unico modello digitale, tutte le combinazioni generate in tempo reale. Aggiungere un colore richiede poche ore, non una sessione fotografica. Rotazione 360°, zoom e realtà aumentata inclusi.
💡 Definizione breve: un configuratore 3D è un'applicazione interattiva che permette a un utente di personalizzare un prodotto in tempo reale direttamente in un browser web, tramite WebGL, senza plugin né installazione.
Come funziona un configuratore 3D?
WebGL: il motore del rendering in tempo reale
WebGL (Web Graphics Library) è un'API JavaScript standardizzata che permette il rendering 3D nel browser usando direttamente la GPU (processore grafico) del dispositivo. Senza WebGL, mostrare contenuti 3D interattivi senza plugin sarebbe impossibile.
WebGL è compatibile nativamente con il 98% dei browser moderni (Chrome, Firefox, Safari, Edge) su desktop e mobile. Senza installazione, senza plugin. Per un configuratore 3D di e-commerce, è la base tecnologica che rende tutto possibile.
I modelli 3D e le texture PBR
Un configuratore 3D si basa su due tipi di asset digitali:
1. I modelli 3D (la geometria): la forma del prodotto, creata in un software di modellazione 3D (Blender, Cinema 4D, SolidWorks…) ed esportata in formato GLTF/GLB o OBJ.
2. Le texture PBR (Physically Based Rendering): immagini che definiscono l'aspetto di ogni materiale. Il PBR è un insieme di mappe di texture:
- Albedo (colore base)
- Roughness (rugosità: opaco o lucido)
- Metallic (aspetto metallico)
- Normal map (rilievo della superficie simulato)
- Ambient Occlusion (ombre di contatto)
Il Web Component: l'elemento HTML universale
Il configuratore 3DVue è distribuito come Web Component: una tecnologia nativa del browser che permette di creare tag HTML personalizzati riutilizzabili. Integrare il configuratore in una pagina prodotto richiede due cose:
1. Caricare lo script CDN una sola volta (nel <head>):
<script type="module" src="https://cdn.jsdelivr.net/npm/@3dvue/viewer@latest/dist/viewer.js"></script>2. Inserire il tag del configuratore dove volete mostrarlo:
<viewer-3dvue name="il-mio-configuratore" src="https://app.3dvue.fr/c/xxx"></viewer-3dvue>La realtà aumentata WebAR
La realtà aumentata è inclusa in tutti i progetti 3DVue, senza costi aggiuntivi. Permette ai clienti di collocare virtualmente il prodotto nel loro spazio reale, il salotto, l'ufficio o il giardino, dallo smartphone.
Il WebAR funziona direttamente nel browser:
- Su iOS: tramite Safari, usando il formato USDZ nativo di Apple (Quick Look AR)
- Su Android: tramite Chrome, usando WebXR e Scene Viewer di Google
Copertura: oltre il 95% degli smartphone attuali supporta WebAR (tutti gli iPhone dal 2017 con iOS 12+, tutti gli Android recenti con Chrome).
Integrazione nel vostro CMS
Il configuratore 3DVue si integra in tutti i CMS di e-commerce del mercato.
Shopify
L'integrazione non richiede nessuna app Shopify dall'App Store. Si realizza direttamente nel codice del tema.
Passo 1: caricare lo script in theme.liquid, prima di </head>.
Passo 2: inserire il tag nel template prodotto o in una sezione Liquid personalizzata.
Compatibile con tutti i temi Shopify 2.0 (Dawn, Sense, Origin…).
→ Vedere la pagina dedicata all'integrazione con Shopify
WooCommerce
Su WordPress + WooCommerce, lo script si carica tramite wp_enqueue_script() nel file functions.php del tema figlio. Il tag <viewer-3dvue> si inserisce nel template prodotto, in un widget HTML di Elementor o in un blocco Gutenberg. Senza plugin WooCommerce da installare.
→ Vedere la pagina dedicata all'integrazione con WooCommerce
PrestaShop
Su PrestaShop 1.7 e 8.x, l'integrazione avviene tramite gli hook nativi o direttamente nei template Smarty del tema. Senza modulo PrestaShop da installare. Compatibile con PS 1.7.x e PS 8.x.
→ Vedere la pagina dedicata all'integrazione con PrestaShop
WordPress (senza WooCommerce)
Per un sito vetrina in WordPress, il tag si può inserire in qualsiasi editor di blocchi: blocco "HTML personalizzato" di Gutenberg, widget "HTML" di Elementor, modulo di codice HTML di Divi, Bricks o Oxygen. Senza plugin WordPress da installare.
→ Vedere la pagina dedicata all'integrazione con WordPress
API JavaScript: usi avanzati
const viewer = document.querySelector('viewer-3dvue');
// Catturare il rendering corrente in base64
const imageBase64 = await viewer.captureToBase64();
// Ascoltare i cambiamenti di configurazione
viewer.addEventListener('config-change', (e) => {
console.log('Configurazione:', e.detail);
});
// Impostare una configurazione programmaticamente
viewer.setParam('colore', 'bianco');
viewer.setParam('tessuto', 'velluto');Formati di file 3D accettati
| Formato | Software sorgente tipico | Note |
|---|---|---|
| GLTF / GLB | Blender, Unity, Unreal | Formato web consigliato, caricamento ottimizzato |
| OBJ + MTL | Tutti i software 3D | Universale, molto diffuso |
| FBX | Autodesk (3ds Max, Maya) | Animazioni supportate |
| STL | SolidWorks, Fusion 360 | Stampa 3D, geometria precisa |
| STEP / STP | SolidWorks, Catia, CREO | Precisione industriale |
| SketchUp (SKP) | SketchUp | Architettura, arredamento |
Se non avete file 3D, 3DVue crea i modelli a partire da:
- Le vostre foto prodotto (fronte, profilo, superiore, inferiore: minimo 4 angoli)
- I vostri disegni tecnici (PDF, DXF, schemi quotati)
- Un campione fisico (se siete vicini a Montpellier)
Impatto sulle performance del sito
Un configuratore 3D mal implementato può degradare i Core Web Vitals. Implementato correttamente, il suo impatto è trascurabile.
Ottimizzazione degli asset 3D
- Compressione Draco: riduce il peso delle geometrie 3D del 60-80%
- Texture KTX2: formato texture compresso per GPU, caricamento 3× più veloce del PNG
- Formato GLTF 2.0: formato binario ottimizzato per il web
Caricamento asincrono non bloccante
<!-- Il configuratore si carica solo quando diventa visibile -->
<viewer-3dvue name="sedia" src="..." loading="lazy"></viewer-3dvue>| Metrica | Obiettivo Google | Impatto del configuratore (ben integrato) |
|---|---|---|
| LCP | < 2,5 s | Nessuno con loading="lazy" |
| CLS | < 0,1 | Nessuno se il contenitore ha dimensioni CSS fisse |
| INP | < 200 ms | Basso: il rendering è gestito dalla GPU |
Quanto costa un configuratore 3D?
Per un articolo dettagliato sui prezzi, consultate la nostra guida completa sul costo di un configuratore 3D.
Costi di produzione (investimento una tantum)
| Elemento | Tariffa indicativa | Note |
|---|---|---|
| Modello 3D | 50 € – 200 € | Per oggetto. Varia con la geometria. |
| Texture PBR | ~30 € | Per materiale. Un prodotto con 20 colori = 20 texture. |
| Scena, illuminazione, ombre | 500 € | Una tantum per progetto. |
| Template file produzione SVG | 100 € | Per progetti con personalizzazione e file di produzione. |
| Integrazione nel sito | Inclusa o su preventivo | Compatibile con Shopify, WooCommerce, PrestaShop, WordPress. |
Abbonamento mensile (costo ricorrente)
| Profilo | Fascia mensile |
|---|---|
| 1 prodotto, traffico basso | 50 – 100 €/mese |
| 5-10 prodotti, traffico medio | 150 – 250 €/mese |
| Catalogo ampio, traffico elevato | 300 – 500 €/mese |
Esempi di configuratori 3D per settore
Arredamento e decorazione
L'arredamento è il settore in cui i configuratori 3D portano più valore. I clienti esitano per le dimensioni, i colori e i materiali, e i resi sono costosi. Un configuratore di arredamento permette di scegliere il colore della struttura e della tappezzeria, selezionare i piedi, aggiungere elementi opzionali e visualizzare il prodotto in AR nel salotto.
→ Vedere la pagina configuratore 3D arredamento
Tessile e moda
Per abbigliamento, borse e accessori, il configuratore permette la personalizzazione in tempo reale: colore del tessuto, ricamo, applicazioni, logo. La simulazione di rendering tessile raggiunge un livello fotorealistico. Il caso d'uso tipico: un venditore di borse personalizzate che genera automaticamente il file SVG per il laboratorio.
→ Vedere la pagina configuratore 3D tessile e moda
Gioielleria e lusso
Nel settore della gioielleria, la qualità visiva è fondamentale. Un configuratore 3D permette al cliente di personalizzare un gioiello (metallo, pietra, incisione) con un rendering fotorealistico. La realtà aumentata è particolarmente utile: vedere un anello "sul" proprio dito prima di acquistarlo riduce drasticamente il tasso di reso.
→ Vedere la pagina configuratore 3D gioielleria e lusso
Gadget promozionali
Un settore in cui la personalizzazione è il cuore del business. Un configuratore per gadget promozionali permette di visualizzare un logo su una penna, una tazza o una borsa, cambiando il colore di sfondo, il colore di stampa e la posizione del logo in tempo reale. Il file di produzione si genera automaticamente.
→ Vedere la pagina configuratore 3D gadget promozionali
Maglie sportive e divise
La personalizzazione di maglie (colori del club, numero, nome) è un caso d'uso ideale. L'utente vede la propria maglia personalizzata in tempo reale, fronte e retro, prima di acquistare. Il file di produzione va direttamente al fornitore di stampa.
→ Vedere la pagina configuratore 3D maglie sportive
Domande frequenti
Che cos'è un configuratore 3D?
Un configuratore 3D è un'applicazione web interattiva che permette a un visitatore di personalizzare un prodotto in tempo reale direttamente nel browser. L'utente sceglie un colore, un materiale o un componente: il modello 3D si aggiorna istantaneamente, senza ricaricare la pagina, senza plugin da installare. Tutto si basa su WebGL, un'API nativa dei browser moderni.
Qual è la differenza tra un configuratore 3D e le foto per variante?
Con le foto per variante, ogni combinazione colore/materiale richiede una sessione fotografica. 5 colori × 4 materiali = 20 foto da mantenere. Un configuratore 3D genera tutte le viste in tempo reale da un unico modello digitale: aggiungere un colore richiede poche ore, non una sessione in studio. La qualità visiva è paragonabile a una foto di studio professionale.
Il configuratore 3D funziona su mobile?
Sì. Il configuratore 3DVue funziona su tutti i dispositivi recenti: iOS Safari e Android Chrome, senza app da installare. La realtà aumentata WebAR è disponibile direttamente dal browser mobile. Oltre il 95% degli smartphone attuali supporta WebGL e WebAR.
Quali formati di file 3D accettate?
3DVue accetta tutti i formati standard: GLTF/GLB, OBJ, FBX, STL, STEP, nonché file provenienti da SolidWorks, Blender, 3ds Max, SketchUp e Cinema 4D. Se non avete file 3D esistenti, creiamo i modelli a partire dalle vostre foto prodotto o dai vostri disegni tecnici. Non è necessario alcun file 3D per iniziare.
Quanto costa un configuratore 3D?
Il costo dipende dalla complessità del prodotto e dal numero di varianti. Un progetto completo parte da circa 1.500 € per un prodotto semplice, e può raggiungere 6.000-8.000 € per un configuratore tessile con generazione automatica del file di produzione. Un abbonamento mensile da 50 a 500 € copre l'hosting e gli aggiornamenti della piattaforma.
Quanto tempo ci vuole per integrare il configuratore nel mio sito?
L'integrazione tecnica richiede 2-4 ore per uno sviluppatore. Il configuratore è un Web Component: un tag HTML da inserire nella pagina prodotto, compatibile con Shopify, WooCommerce, PrestaShop e WordPress senza moduli da installare. 3DVue può occuparsi dell'integrazione se non avete uno sviluppatore disponibile.
Il configuratore 3D è compatibile con Shopify?
Sì. Il Web Component 3DVue si integra in qualsiasi tema Shopify: Shopify 2.0, Dawn, Sense e tutti i temi OS 2.0. L'integrazione avviene tramite il file theme.liquid o una sezione Liquid personalizzata, senza alcuna app Shopify dall'App Store.
Che cos'è WebGL e perché è importante per un configuratore 3D?
WebGL è un'API JavaScript nativa che permette il rendering 3D nel browser utilizzando direttamente la GPU del dispositivo. Senza WebGL, mostrare contenuti 3D interattivi senza plugin sarebbe impossibile. WebGL è supportato dal 98% dei browser moderni su desktop e mobile, garantendo compatibilità universale senza nulla da installare.
La realtà aumentata è inclusa nel configuratore?
Sì. La realtà aumentata WebAR è inclusa in tutti i progetti 3DVue senza costi aggiuntivi. Funziona su iOS tramite Safari e Android tramite Chrome, senza app da scaricare. Lo stesso modello 3D serve sia per il configuratore che per la AR: nessun lavoro aggiuntivo.
Il configuratore 3D rallenterà il mio e-commerce?
No, se l'implementazione è corretta. Lo script 3DVue si carica in modo asincrono e non blocca il rendering della pagina. I modelli 3D sono ottimizzati (compressione Draco, texture KTX2) per minimizzare il tempo di caricamento. Con l'attributo loading="lazy", il configuratore non impatta il LCP della pagina.
Qual è la differenza tra un configuratore 3D e uno 2D?
Un configuratore 2D mostra immagini piatte che cambiano in base alle opzioni: rapido da implementare ma limitato: nessuna rotazione, nessuna AR, un'immagine per ogni combinazione. Un configuratore 3D genera tutte le viste in tempo reale da un unico modello, consentendo rotazione 360°, zoom e realtà aumentata.
I modelli 3D creati per il configuratore mi appartengono?
Sì, integralmente. Tutti i file sorgente (GLB, OBJ, FBX, texture PBR) vengono consegnati alla consegna. Potete utilizzarli su altre piattaforme, per il marketing, la stampa 3D, o affidarli a un altro fornitore. Nessuna clausola di esclusiva sui vostri asset.
Il configuratore può generare un file di produzione?
Sì. Per i progetti che richiedono un file di produzione (tessile, gadget promozionali, incisione, ricamo), il configuratore può generare automaticamente un file in SVG o PDF che riflette esattamente la configurazione scelta dal cliente. Questo file va direttamente in produzione.
Quante varianti e combinazioni può gestire il configuratore?
Non c'è limite tecnico. Un configuratore con 10 zone di personalizzazione e 20 materiali per zona genera milioni di combinazioni senza rallentamenti. Solo le combinazioni che voi autorizzate vengono proposte ai clienti. Il rendering rimane fluido indipendentemente dalla complessità.
Qual è il ROI di un configuratore 3D per un e-commerce?
Effetti misurati nei nostri clienti: riduzione dei resi del 20-40%, aumento del carrello medio del 15-30%, riduzione significativa delle richieste al servizio clienti. L'ammortamento avviene generalmente in 6-18 mesi a seconda del volume degli ordini. Per un rivenditore di mobili online con 200 ordini/mese, una riduzione del 25% dei resi rappresenta spesso 800-1.000 €/mese di risparmio.
Conclusione: da dove iniziare?
Il configuratore 3D non è più un lusso riservato ai grandi brand. La tecnologia è matura, i prezzi sono scesi e l'impatto sulle conversioni e sui resi è documentato in decine di progetti.
Se vendete prodotti personalizzabili, arredamento, tessile, gioielleria, gadget promozionali, divise sportive, un configuratore 3D è probabilmente l'investimento con il miglior ritorno disponibile nel 2026.
Descrivete il vostro prodotto, le varianti, la piattaforma. Stima precisa in meno di 24h, senza impegno.
Configuratore 3D per settore