Ein 3D-Konfigurator
in WooCommerce.
2 Codezeilen.
<viewer-3dvue> ist eine native Web Component. Keine Abhängigkeiten, kein zusätzliches Plugin. Integriert in jede WooCommerce-Vorlage : single-product.php, einen Shortcode oder einen benutzerdefinierten Gutenberg-HTML-Block.
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="meinViewer" src="https://app.3dvue.fr/view?p=AB01-CD02" ></viewer-3dvue> <!-- Fertig. -->
Bereit in 3 Schritten. Kein dediziertes Plugin.
Eine native Web Component : keine Abhängigkeit von React, Vue oder jQuery. Kompatibel mit allen WordPress-Themes und Page-Buildern (Elementor, Divi, Bricks).
Verwenden Sie wp_enqueue_script() in Ihrer functions.php, um die Komponente zu laden. Das abschließende true lädt es im Footer : empfohlen, um das Rendering nicht zu blockieren.
src-Attribut der Komponente die spezifische URL Ihres Konfigurators, die 3DVue bei der Lieferung bereitstellt.
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 ); }); // Oder über WPCode : HTML-Snippet // <script src="https://cdn.jsdelivr.net/gh/3dvue/api@v4/viewer-3dvue-min.js"></script>
Fügen Sie das Tag in Ihre Produktvorlage, einen PHP-Shortcode oder einen Gutenberg-HTML-Block ein. Zwei Pflichtattribute: name (eindeutige Kennung) und src (die von 3DVue bereitgestellte Konfigurator-URL).
<viewer-3dvue name="meinViewer" src="https://app.3dvue.fr/view?p=AB01-CD02" ></viewer-3dvue> <!-- Mit aktiviertem Debug --> <viewer-3dvue name="meinViewer" src="https://app.3dvue.fr/view?p=AB01-CD02" debug ></viewer-3dvue>
Fügen Sie die viewer-3dvue-Attribute direkt zu Ihren nativen WooCommerce-Variations-<select>-Elementen oder Ihren benutzerdefinierten Mustern hinzu. Die Komponente hört automatisch zu : kein JS zu schreiben.
<!-- In einem bestehenden WooCommerce-Select --> <select name="attribute_pa_colour" viewer-3dvue="meinViewer" viewer-3dvue-change="setMaterial" viewer-3dvue-mesh="1,2" > <option value="0n">Schwarz</option> <option value="1a">Weiß</option> <option value="2b">Natureiche</option> </select> <!-- Oder in einem benutzerdefinierten Muster-Button --> <button viewer-3dvue="meinViewer" viewer-3dvue-clic="setMaterial" viewer-3dvue-meshs-materials='{"1":"2b","3":"0n"}' >Natureiche / Schwarz</button>
Kein JavaScript.
Alles in HTML-Attributen.
Die Komponente hört automatisch auf click- und change-Events auf jedem Element mit den richtigen Attributen. Kompatibel mit nativen WooCommerce-Selects und Muster-Plugins (Variation Swatches, etc.).
<button viewer-3dvue="meinViewer" viewer-3dvue-clic="setMaterial" viewer-3dvue-meshs-materials='{"1":"0n","3":"2b"}' > Grauer Samtstoff </button> // {"meshIndex": "materialId"} // Index 0 reserviert : beginnt bei 1
<select> hinzu. Der Viewer synchronisiert sich automatisch.<select name="attribute_pa_colour" viewer-3dvue="meinViewer" viewer-3dvue-change="setMaterial" viewer-3dvue-mesh="1,3" > <option value="0n">Schwarz</option> <option value="1a">Weiß</option> </select> // viewer-3dvue-mesh="1,3" // wird auf Mesh 1 UND Mesh 3 angewendet
Für fortgeschrittene Anwendungsfälle.
Vollständige programmatische Kontrolle : nützlich zur Synchronisierung des Viewers mit WooCommerce-Variationen über JS oder für fortgeschrittene Anwendungsfälle wie Bilderfassung oder BAT-Export.
const viewer = document.querySelector('viewer-3dvue[name="meinViewer"]'); // Mit WooCommerce-Variationen synchronisieren document.querySelector('.variations select') .addEventListener('change', (e) => { viewer.setMaterial({ "1": e.target.value }); });
// Auf Objekt 0 (Standard) viewer.setMaterial({ "1": "0n", "3": "2b" }); // Auf einem bestimmten Segment (mehrteiliges Produkt) viewer.setMaterial({ "1": "1a" }, 1); // setMaterial(materialList, objectIndex = 0)
// Anderes Modell laden (z.B. Formwechsel) viewer.loadModel("AB01-CD02"); // Komponente zum bestehenden Modell hinzufügen // Bsp: Armlehne, Regal, Bein hinzufügen viewer.addModel("EF03"); // Komponente entfernen (Index beginnt bei 0) viewer.removeModel(1); // ⚠ Das letzte verbleibende Segment kann nicht entfernt werden
viewer.captureToBase64(); viewer.addEventListener("onCaptureBase64Complete", (e) => { const { base64, error } = e.detail; if (error) return; // In verstecktem Feld für WC-Bestellung speichern document.querySelector('input[name="config_preview"]').value = base64; });
Texte, Logos, Druckvorschauen.
Alles in SVG.
Die SVG-API ermöglicht es Ihnen, Text und Bilder direkt auf das 3D-Produkt über im Modell definierte Platzierungszonen hinzuzufügen. Sie wird für personalisierbare Produkte verwendet : Markierung, Logo-Upload, Textgravur.
| Methode | Beschreibung |
|---|---|
addSVGText(text, opts) |
Fügt Text zu einer Platzierungszone hinzu. Optionen: fill, fontFamily, selectable |
addSVGImage(source, opts) |
Fügt ein Bild hinzu (File oder ArrayBuffer). Ohne Kopie via Transferable Objects. |
setSVGElementParam(param, value, id) |
Ändert einen Parameter eines SVG-Elements. Ohne 3. Argument: gilt für das ausgewählte Element. |
removeSVGElement(id) |
Entfernt ein SVG-Element (Text oder Bild). Ohne Argument: entfernt das ausgewählte Element. |
exportSVG() |
Generiert die SVG-Datei des konfigurierten Produkts : druckfertige Vorlage für die Produktion. |
// 1. Logo aus einem WooCommerce-Datei-Input laden const file = input.files[0]; viewer.addSVGImage(file, { dropzone: "dropzone001", selectable: true }); // 2. Benutzerdefinierter Text (Gravur, Markierung) viewer.addSVGText("Mein Text", { fill: "#ffffff", fontFamily: "Arial" }); // 3. SVG-Druckvorlage für die Produktion exportieren viewer.exportSVG(); viewer.addEventListener("onSVGExportComplete", (e) => { const { path } = e.detail; // path = URL der druckfertigen SVG-Datei });
À lire aussi
Dieser Konfigurator für Ihren Sektor
API-Referenz, HTML-Attribute, Events, WooCommerce-PHP-Beispiele. Alles ist dokumentiert und wird aktuell gehalten.
Dokumentation ansehenKein automatisches Ticket-System. Sie sprechen direkt mit Matthieu, dem Entwickler, der die API entworfen hat. Antwort in weniger als 24 Stunden.
Einen Anruf buchenTesten Sie den Konfigurator unter realen Bedingungen, bevor Sie ihn integrieren. Sehen Sie genau, was Ihre Kunden in Ihrem WooCommerce-Shop sehen werden.
Demo ansehenBereit zur Integration?
Wir übernehmen die 3D-Modelle.
Sie verwalten den Code auf WooCommerce-Seite, wir übernehmen alles andere : Modellierung, Materialien, Konfiguration. In 30 Minuten zeigen wir Ihnen, was wir mit Ihrem Katalog tun können.