<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. -->
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>
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
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; });
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. id=null zeigt auf 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]; await 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 });
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 ansehenSie 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.