Un configuratore 3D
su Shopify.
2 righe di codice.
<viewer-3dvue> è un Web Component nativo. Nessuna dipendenza, nessun framework necessario. Funziona ovunque si possa incollare HTML — una sezione Liquid, theme.liquid o un template di prodotto.
<!-- In <head> o prima di </body> --> <script src="https://cdn.jsdelivr.net/gh/3dvue/api@v4/viewer-3dvue-min.js"></script>
<viewer-3dvue name="mioViewer" src="https://app.3dvue.fr/view?p=AB01-CD02" ></viewer-3dvue> <!-- Tutto qui. -->
Pronto in 3 passi. Senza build tool.
Un Web Component nativo — nessun React, Vue né bundler necessari. Funziona in qualsiasi ambiente che accetta HTML.
Aggiungi lo script nel tuo theme.liquid, dentro <head> o subito prima di </body>. Una sola inclusione copre tutte le tue schede prodotto.
src nel componente <viewer-3dvue> è l'URL specifica del tuo configuratore — fornita da 3DVue alla consegna del progetto.
<script src="https://cdn.jsdelivr.net/gh/3dvue/api@v4/viewer-3dvue-min.js"></script>
Incolla il tag <viewer-3dvue> dove vuoi mostrare il configuratore — nella tua sezione Liquid di prodotto, un blocco personalizzato o una sezione dedicata. Sono richiesti due attributi: name (identificatore unico) e src (URL del tuo configuratore).
name viene usato per puntare a questo viewer dai pulsanti HTML o dall'API JS. Usa un identificatore unico per pagina se hai più viewer.
<!-- Attributi richiesti --> <viewer-3dvue name="mioViewer" src="https://app.3dvue.fr/view?p=AB01-CD02" ></viewer-3dvue> <!-- Opzionale: attiva i log in console --> <viewer-3dvue name="mioViewer" src="https://app.3dvue.fr/view?p=AB01-CD02" debug ></viewer-3dvue>
Aggiungi attributi viewer-3dvue sui tuoi pulsanti o select esistenti per attivare i cambiamenti di materiale. Nessun JavaScript da scrivere — il componente ascolta automaticamente gli eventi click e change.
<!-- Pulsante che cambia tessuto al clic --> <button viewer-3dvue="mioViewer" viewer-3dvue-clic="setMaterial" viewer-3dvue-meshs-materials='{"1":"0n","2":"1a"}' > Blu notte </button> <!-- Select che cambia il colore --> <select viewer-3dvue="mioViewer" viewer-3dvue-change="setMaterial" viewer-3dvue-mesh="2,4" > <option value="0n">Rosso</option> <option value="1a">Blu</option> <option value="2b">Verde</option> </select>
Nessun JavaScript.
Tutto con attributi HTML.
Il componente ascolta automaticamente gli eventi click e change su qualsiasi elemento con gli attributi corretti. Ideale per collegare i tuoi swatch Shopify esistenti.
<button viewer-3dvue="mioViewer" viewer-3dvue-clic="setMaterial" viewer-3dvue-meshs-materials='{"1":"0n","3":"2b","5":"1c"}' > Tema legno naturale </button> // {"meshIndex": "materialId"} // L'indice 0 è riservato — inizia da 1
viewer-3dvue-mesh.<select viewer-3dvue="mioViewer" viewer-3dvue-change="setMaterial" viewer-3dvue-mesh="2,4" > <option value="0n">Rosso</option> <option value="1a">Blu</option> </select> // viewer-3dvue-mesh="2,4" // si applica alla mesh 2 E alla mesh 4
Per i casi d'uso avanzati.
Quando si ha bisogno di controllo programmatico — caricamento dinamico di modelli, cattura immagine, esportazione SVG. Tutti i metodi verificano che il viewer sia pronto prima di eseguirsi.
const viewer = document.querySelector('viewer-3dvue[name="mioViewer"]'); // Tutti i metodi verificano che il viewer sia caricato (LOAD_COMPLETE) // Se non è pronto → avviso in console, chiamata ignorata
// Sull'oggetto 0 (default) viewer.setMaterial({ "1": "0n", "3": "2b" }); // Su un oggetto specifico (multi-segmento) viewer.setMaterial({ "1": "1a" }, 1); // setMaterial(materialList, objectIndex = 0)
// Caricare un nuovo modello (sostituisce il corrente) viewer.loadModel("AB01-CD02"); // Aggiungere un segmento al modello esistente viewer.addModel("EF03"); viewer.addModel("EF03-GH04"); // Rimuovere un segmento per indice viewer.removeModel(1); // ⚠ Non si può rimuovere l'ultimo segmento rimanente
viewer.captureToBase64(); viewer.addEventListener("onCaptureBase64Complete", (e) => { const { base64, error } = e.detail; if (error) { console.error(error); return; } // base64 = "data:image/png;base64,..." document.querySelector("#preview").src = base64; });
// Riporta la camera alla posizione iniziale viewer.resetCamera(); // Pausa manuale (risparmio GPU) viewer.pauseRenderer(); viewer.startRenderer(); // ℹ Questi metodi vengono gestiti automaticamente // quando il componente esce/entra nel viewport
Testo, logo, prove.
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, incisione testo, caricamento logo del cliente.
| 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) a una zona di posizionamento. Senza copia via Transferable Objects. |
setSVGElementParam(param, value, id) |
Modifica un parametro di un elemento SVG esistente. 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 pronta per la stampa. |
// 1. Aggiungere testo sul prodotto viewer.addSVGText("Il mio testo", { fill: "#ffffff", fontFamily: "Arial", dropzone: "dropzone001", selectable: true }); // 2. Caricare logo da un input file const file = input.files[0]; viewer.addSVGImage(file, { dropzone: "dropzone001" }); // 3. Esportare la prova SVG viewer.exportSVG(); viewer.addEventListener("onSVGExportComplete", (e) => { const { path, error } = e.detail; // path = URL del file SVG generato });
Per saperne di più
Questo configuratore nel vostro settore
Riferimento API, attributi HTML, eventi, esempi Liquid di Shopify. 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 24 ore.
Prenota una chiamataProva il configuratore in condizioni reali prima di integrarlo. Vedi esattamente quello che vedranno i tuoi clienti nel tuo negozio.
Vedi la demoPronti a integrare?
Noi ci occupiamo dei modelli 3D.
Voi gestite il codice lato Shopify, noi ci occupiamo del resto — modellazione, materiali, configurazione. In 30 minuti vi mostriamo cosa possiamo fare con il vostro catalogo.