<viewer-3dvue> ist eine native Web Component. Keine Abhängigkeiten, kein Framework nötig. Funktioniert überall, wo Sie HTML einfügen können — ein Liquid-Abschnitt, theme.liquid oder eine Produktvorlage.
<!-- In <head> oder vor </body> --> <script src="https://cdn.jsdelivr.net/gh/3dvue/api@v4/viewer-3dvue-min.js"></script>
<viewer-3dvue name="meinViewer" src="https://app.3dvue.fr/view?p=AB01-CD02" ></viewer-3dvue> <!-- Das ist alles. -->
Eine native Web Component — kein React, Vue oder Bundler nötig. Funktioniert in jeder Umgebung, die HTML akzeptiert.
Fügen Sie das Script in Ihre theme.liquid ein, innerhalb von <head> oder direkt vor </body>. Eine einzige Einbindung deckt alle Ihre Produktseiten ab.
src-Attribut in der <viewer-3dvue>-Komponente ist die spezifische URL Ihres Konfigurators — von 3DVue bei Projektlieferung bereitgestellt.
<script src="https://cdn.jsdelivr.net/gh/3dvue/api@v4/viewer-3dvue-min.js"></script>
Fügen Sie das <viewer-3dvue>-Tag dort ein, wo Sie den Konfigurator anzeigen möchten — in Ihrem Liquid-Produktabschnitt, einem benutzerdefinierten Block oder einem dedizierten Abschnitt. Zwei Attribute sind erforderlich: name (eindeutiger Bezeichner) und src (URL Ihres Konfigurators).
name wird verwendet, um diesen Viewer von HTML-Buttons oder der JS-API aus anzusprechen. Verwenden Sie einen eindeutigen Bezeichner pro Seite, wenn Sie mehrere Viewer haben.
<!-- Erforderliche Attribute --> <viewer-3dvue name="meinViewer" src="https://app.3dvue.fr/view?p=AB01-CD02" ></viewer-3dvue> <!-- Optional: aktiviert Konsolen-Logs --> <viewer-3dvue name="meinViewer" src="https://app.3dvue.fr/view?p=AB01-CD02" debug ></viewer-3dvue>
Fügen Sie viewer-3dvue-Attribute an Ihren bestehenden Buttons oder Selects hinzu, um Materialwechsel auszulösen. Kein JavaScript zu schreiben — die Komponente hört automatisch auf click- und change-Events.
<!-- Button, der bei Klick Stoff wechselt --> <button viewer-3dvue="meinViewer" viewer-3dvue-clic="setMaterial" viewer-3dvue-meshs-materials='{"1":"0n","2":"1a"}' > Mitternachtsblau </button> <!-- Select, der die Farbe wechselt --> <select viewer-3dvue="meinViewer" viewer-3dvue-change="setMaterial" viewer-3dvue-mesh="2,4" > <option value="0n">Rot</option> <option value="1a">Blau</option> <option value="2b">Grün</option> </select>
Die Komponente hört automatisch auf click- und change-Events an jedem Element mit den richtigen Attributen. Ideal für die Verbindung mit Ihren bestehenden Shopify-Swatches.
<button viewer-3dvue="meinViewer" viewer-3dvue-clic="setMaterial" viewer-3dvue-meshs-materials='{"1":"0n","3":"2b","5":"1c"}' > Natürliches Holz-Thema </button> // {"meshIndex": "materialId"} // Index 0 ist reserviert — beginnt bei 1
viewer-3dvue-mesh aufgeführten Meshes angewendet.<select viewer-3dvue="meinViewer" viewer-3dvue-change="setMaterial" viewer-3dvue-mesh="2,4" > <option value="0n">Rot</option> <option value="1a">Blau</option> </select> // viewer-3dvue-mesh="2,4" // wird auf Mesh 2 UND Mesh 4 angewendet
Wenn Sie programmatische Kontrolle benötigen — dynamisches Laden von Modellen, Bilderfassung, SVG-Export. Alle Methoden prüfen, ob der Viewer bereit ist, bevor sie ausgeführt werden.
const viewer = document.querySelector('viewer-3dvue[name="meinViewer"]'); // Alle Methoden prüfen, ob der Viewer geladen ist (LOAD_COMPLETE) // Nicht bereit → Konsolenwarnung, Aufruf ignoriert
// Auf Objekt 0 (Standard) viewer.setMaterial({ "1": "0n", "3": "2b" }); // Auf ein spezifisches Objekt (Multi-Segment) viewer.setMaterial({ "1": "1a" }, 1); // setMaterial(materialList, objectIndex = 0)
// Neues Modell laden (ersetzt aktuelles) viewer.loadModel("AB01-CD02"); // Segment zum vorhandenen Modell hinzufügen viewer.addModel("EF03"); viewer.addModel("EF03-GH04"); // Segment per Index entfernen viewer.removeModel(1); // ⚠ Das letzte verbleibende Segment kann nicht entfernt werden
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; });
// Kamera auf Ausgangsposition zurücksetzen viewer.resetCamera(); // Manuelle Pause (GPU sparen) viewer.pauseRenderer(); viewer.startRenderer(); // ℹ Diese Methoden werden automatisch verwaltet // wenn die Komponente den Viewport verlässt/betritt
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 — Branding, Textgravur, Kunden-Logo-Upload.
| Methode | Beschreibung |
|---|---|
addSVGText(text, opts) |
Fügt Text zu einer Platzierungszone hinzu. Optionen: fill, fontFamily, selectable |
addSVGImage(source, opts) |
Fügt ein Bild (File oder ArrayBuffer) zu einer Platzierungszone hinzu. Kein Kopieren via Transferable Objects. |
setSVGElementParam(param, value, id) |
Ändert einen Parameter eines vorhandenen SVG-Elements. id=null zielt auf das ausgewählte Element. |
exportSVG() |
Generiert die SVG-Datei des konfigurierten Produkts — druckfertiger Proof. |
// 1. Text auf dem Produkt hinzufügen viewer.addSVGText("Mein Text", { fill: "#ffffff", fontFamily: "Arial", dropzone: "dropzone001", selectable: true }); // 2. Logo aus einem Datei-Input laden const file = input.files[0]; await viewer.addSVGImage(file, { dropzone: "dropzone001" }); // 3. SVG-Proof exportieren viewer.exportSVG(); viewer.addEventListener("onSVGExportComplete", (e) => { const { path, error } = e.detail; // path = URL der generierten SVG-Datei });
API-Referenz, HTML-Attribute, Events, Shopify Liquid-Beispiele. Alles ist dokumentiert und wird aktuell gehalten.
Dokumentation ansehenKein automatisiertes Ticket-System. Sprechen Sie direkt mit Matthieu, dem Entwickler, der die API entworfen hat. Antwort innerhalb von 24 Stunden.
Gespräch buchenTesten Sie den Konfigurator unter realen Bedingungen, bevor Sie ihn integrieren. Sehen Sie genau, was Ihre Kunden in Ihrem Shop sehen werden.
Demo ansehenSie verwalten den Code auf der Shopify-Seite, wir kümmern uns um alles andere — Modellierung, Materialien, Konfiguration. In 30 Minuten zeigen wir Ihnen, was wir mit Ihrem Katalog machen können.