Un configuratore 3D
su WooCommerce.
2 righe di codice.
<viewer-3dvue> è un Web Component nativo. Nessuna dipendenza, nessun plugin aggiuntivo. Si integra in qualsiasi template WooCommerce — single-product.php, uno shortcode o un blocco HTML personalizzato di Gutenberg.
add_action('wp_enqueue_scripts', function() { wp_enqueue_script( 'viewer-3dvue', 'https://cdn.jsdelivr.net/gh/3dvue/api@v4/viewer-3dvue-min.js', [], null, true ); });
<viewer-3dvue name="mioViewer" src="https://app.3dvue.fr/view?p=AB01-CD02" ></viewer-3dvue> <!-- Pronto. -->
Pronto in 3 passi. Senza plugin dedicato.
Un Web Component nativo — nessuna dipendenza da React, Vue o jQuery. Compatibile con tutti i temi e page builder di WordPress (Elementor, Divi, Bricks).
Usa wp_enqueue_script() nel tuo functions.php per caricare il componente. Il true finale lo carica nel footer — raccomandato per evitare di bloccare il rendering.
src del componente è l'URL specifica del tuo configuratore, fornita da 3DVue alla consegna.
add_action('wp_enqueue_scripts', function() { wp_enqueue_script( 'viewer-3dvue', 'https://cdn.jsdelivr.net/gh/3dvue/api@v4/viewer-3dvue-min.js', [], null, true ); }); // O via WPCode — snippet HTML // <script src="https://cdn.jsdelivr.net/gh/3dvue/api@v4/viewer-3dvue-min.js"></script>
Incolla il tag nel tuo template di prodotto, in uno shortcode PHP o in un blocco HTML di Gutenberg. Due attributi obbligatori: name (identificatore unico) e src (l'URL del tuo configuratore fornita da 3DVue).
<viewer-3dvue name="mioViewer" src="https://app.3dvue.fr/view?p=AB01-CD02" ></viewer-3dvue> <!-- Con debug attivato --> <viewer-3dvue name="mioViewer" src="https://app.3dvue.fr/view?p=AB01-CD02" debug ></viewer-3dvue>
Aggiungi gli attributi viewer-3dvue nei tuoi elementi <select> delle variazioni native di WooCommerce o nei tuoi swatch personalizzati. Il componente ascolta automaticamente — nessun JS da scrivere.
<!-- Su un select esistente di WooCommerce --> <select name="attribute_pa_colour" viewer-3dvue="mioViewer" viewer-3dvue-change="setMaterial" viewer-3dvue-mesh="1,2" > <option value="0n">Nero</option> <option value="1a">Bianco</option> <option value="2b">Rovere naturale</option> </select> <!-- O su un pulsante swatch personalizzato --> <button viewer-3dvue="mioViewer" viewer-3dvue-clic="setMaterial" viewer-3dvue-meshs-materials='{"1":"2b","3":"0n"}' >Rovere / Nero</button>
Zero JavaScript.
Tutto con attributi HTML.
Il componente ascolta automaticamente gli eventi click e change su qualsiasi elemento con gli attributi corretti. Compatibile con i select nativi di WooCommerce e plugin swatch (Variation Swatches, ecc.).
<button viewer-3dvue="mioViewer" viewer-3dvue-clic="setMaterial" viewer-3dvue-meshs-materials='{"1":"0n","3":"2b"}' > Tessuto grigio velluto </button> // {"meshIndex": "materialId"} // Indice 0 riservato — inizia da 1
<select> delle variazioni WooCommerce esistente. Il viewer si sincronizza automaticamente.<select name="attribute_pa_colour" viewer-3dvue="mioViewer" viewer-3dvue-change="setMaterial" viewer-3dvue-mesh="1,3" > <option value="0n">Nero</option> <option value="1a">Bianco</option> </select> // viewer-3dvue-mesh="1,3" // si applica a mesh 1 E mesh 3
Per i casi d'uso avanzati.
Controllo programmatico completo — utile per sincronizzare il viewer con le variazioni WooCommerce via JS, o per casi avanzati come cattura immagine o esportazione BAT.
const viewer = document.querySelector('viewer-3dvue[name="mioViewer"]'); // Sincronizzare con le variazioni di WooCommerce document.querySelector('.variations select') .addEventListener('change', (e) => { viewer.setMaterial({ "1": e.target.value }); });
// Sull'oggetto 0 (default) viewer.setMaterial({ "1": "0n", "3": "2b" }); // Su un segmento specifico (prodotto multi-parte) viewer.setMaterial({ "1": "1a" }, 1); // setMaterial(materialList, objectIndex = 0)
// Carica un modello diverso (es. cambio di forma) viewer.loadModel("AB01-CD02"); // Aggiunge un componente al modello esistente // Es: aggiungere un bracciolo, ripiano, gamba viewer.addModel("EF03"); // Rimuove un componente (l'indice inizia da 0) viewer.removeModel(1); // ⚠ Non si può rimuovere l'ultimo segmento rimanente
viewer.captureToBase64(); viewer.addEventListener("onCaptureBase64Complete", (e) => { const { base64, error } = e.detail; if (error) return; // Salvare in un campo nascosto per l'ordine WC document.querySelector('input[name="config_preview"]').value = base64; });
Testi, logo, prove di stampa.
Tutto in SVG.
L'API SVG permette di aggiungere testo e immagini direttamente sul prodotto 3D tramite zone di posizionamento definite nel modello. Viene usata per prodotti personalizzabili — marcatura, caricamento logo, incisione testo.
| Metodo | Descrizione |
|---|---|
addSVGText(text, opts) |
Aggiunge testo a una zona di posizionamento. Opzioni: fill, fontFamily, selectable |
addSVGImage(source, opts) |
Aggiunge un'immagine (File o ArrayBuffer). Senza copia via Transferable Objects. |
setSVGElementParam(param, value, id) |
Modifica un parametro di un elemento SVG. Senza 3° argomento: si applica all'elemento selezionato. |
removeSVGElement(id) |
Rimuove un elemento SVG (testo o immagine). Senza argomento: rimuove l'elemento selezionato. |
exportSVG() |
Genera il file SVG del prodotto configurato — prova di stampa pronta per la produzione. |
// 1. Caricare logo da un input file di WooCommerce const file = input.files[0]; viewer.addSVGImage(file, { dropzone: "dropzone001", selectable: true }); // 2. Testo personalizzato (incisione, marcatura) viewer.addSVGText("Il mio testo", { fill: "#ffffff", fontFamily: "Arial" }); // 3. Esportare la prova SVG per la produzione viewer.exportSVG(); viewer.addEventListener("onSVGExportComplete", (e) => { const { path } = e.detail; // path = URL del file SVG pronto per la stampa });
Per saperne di più
Questo configuratore nel vostro settore
Riferimento API, attributi HTML, eventi, esempi PHP di WooCommerce. Tutto documentato e mantenuto aggiornato.
Vedi la documentazioneNessun sistema di ticket automatizzato. Parli direttamente con Matthieu, lo sviluppatore che ha progettato l'API. Risposta in meno di 24 ore.
Prenota una chiamataProva il configuratore in condizioni reali prima di integrarlo. Vedi esattamente quello che vedranno i tuoi clienti nel tuo negozio WooCommerce.
Vedi la demoPronti a integrare?
Noi ci occupiamo dei modelli 3D.
Voi gestite il codice lato WooCommerce, noi ci occupiamo del resto — modellazione, materiali, configurazione. In 30 minuti vi mostriamo cosa possiamo fare con il vostro catalogo.