Ein 3D-Konfigurator
in Shopify.
2 Codezeilen.
<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. -->
Erstellen Sie Ihren Konfigurator selbst.
Die obige Anleitung richtet sich an Entwickler, die einen von 3DVue individuell erstellten Konfigurator einbinden. Wenn Sie bereits über die 3D-Dateien Ihrer Produkte verfügen und Ihren Konfigurator selbst erstellen und veröffentlichen möchten, ohne Code zu schreiben, nutzen Sie die 3DVue-Software. Für jedes Produkt erzeugt sie:
- Einen direkten Link: die URL des Konfigurators, zum Einfügen in eine Produktseite, eine E-Mail oder ein soziales Netzwerk.
- Einen iFrame-Code: zum Einfügen in einen Custom-Liquid-Block des Shopify-Theme-Editors, auf der Produktseite.
- Ein Widget: ein Skript, das einmalig in
theme.liquideingefügt wird und einen Button „In 3D ansehen" auf Ihren Produktseiten hinzufügt.
14 Tage kostenlos, danach ab 49 € zzgl. MwSt. pro Monat, ohne Provision auf Ihre Verkäufe.
Bereit in 3 Schritten. Kein Build-Tool.
Eine native Web Component : kein React, Vue oder Bundler nötig. Funktioniert in jeder Umgebung, die HTML akzeptiert.
-
1Script einbinden
Fügen Sie das Script in Ihre
theme.liquidein, innerhalb von<head>oder direkt vor</body>. Eine einzige Einbindung deckt alle Ihre Produktseiten ab.Das CDN-Script ist öffentlich. Dassrc-Attribut in der<viewer-3dvue>-Komponente ist die spezifische URL Ihres Konfigurators : von 3DVue bei Projektlieferung bereitgestellt.theme.liquid<script src="https://cdn.jsdelivr.net/gh/3dvue/api@v4/viewer-3dvue-min.js"></script>
-
2Komponente platzieren
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) undsrc(URL Ihres Konfigurators).Dernamewird 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.product.liquid<!-- 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>
-
3Auswähler verbinden
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 aufclick- undchange-Events.product.liquid : Farbauswähler<!-- 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>
Kein JavaScript.
Alles in HTML-Attributen.
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
Für fortgeschrittene Anwendungsfälle.
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
Text, Logos, Proofs.
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 : 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. 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 : 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]; 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 });
Häufige Fragen
Wie installiere ich den 3D-Konfigurator in Shopify?+
Funktioniert es mit Shopify 2.0 und OS 2.0-Themes?+
Muss ich JavaScript schreiben, um die Farbauswähler zu verbinden?+
Was ist das src-Attribut am viewer-3dvue-Tag?+
Was kostet ein 3D-Konfigurator für Shopify?+
À lire aussi
Dieser Konfigurator für Ihren Sektor
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 ansehenBereit zur Integration?
Wir kümmern uns um die 3D-Modelle.
Sie 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.