Ein 3D-Konfigurator
auf WordPress.
2 Zeilen Code.
<viewer-3dvue> ist ein natives Web Component. Es funktioniert in jedem WordPress-Kontext : HTML-Widget Elementor, Gutenberg-Block, Shortcode, benutzerdefiniertes PHP-Template, CPT mit ACF. Kein dediziertes Plugin, keine Abhängigkeiten.
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> <!-- 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 auf einer Seite, in einer E-Mail oder einem sozialen Netzwerk.
- Einen iFrame-Code: zum Einfügen in einen benutzerdefinierten HTML-Block des Block-Editors (Gutenberg) oder ein HTML-Widget in Elementor.
- Ein Widget: ein Skript, das einmalig über ein Plugin wie Insert Headers and Footers eingefügt wird und einen Button „In 3D ansehen" auf Ihren Seiten hinzufügt.
14 Tage kostenlos, danach ab 49 € zzgl. MwSt. pro Monat, ohne Provision auf Ihre Verkäufe.
In 3 Schritten bereit. Mehrere Integrationsmethoden.
WordPress ist flexibel : die Komponente passt sich Ihrem Stack an. Über wp_enqueue_script(), ein Elementor-Widget, einen Shortcode oder direkt in einem PHP-Template. Ihre Wahl.
-
1Skript laden : 3 Methoden
Die empfohlene Methode ist
wp_enqueue_script()infunctions.php. Sie können es aber auch über WPCode (globales Snippet) einbinden, oder direkt in einem HTML-Widget Elementor, wenn Sie die Dateien nicht anfassen möchten.Bei WPCode erstellen Sie ein Snippet vom Typ „HTML" mit dem<script>-Tag und aktivieren es auf allen Seiten oder nur auf Produktseiten.3 Methoden zur Auswahl// 1. Via functions.php (empfohlen) 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); }); // 2. Via WPCode : globales HTML-Snippet <script src="https://cdn.jsdelivr.net/gh/3dvue/api@v4/viewer-3dvue-min.js"></script> // 3. In einem HTML-Widget Elementor <script src="https://cdn.jsdelivr.net/gh/3dvue/api@v4/viewer-3dvue-min.js"></script> <viewer-3dvue name="meinViewer" src="..."></viewer-3dvue>
-
2Komponente platzieren
Fügen Sie das Tag in Ihr PHP-Template, ein HTML-Widget Elementor oder über einen Shortcode ein. Für CPTs mit ACF können Sie die Anzeige nach dem Wert eines benutzerdefinierten Feldes konditionieren.
3DVue verwendet auf dieser Website genau diese Methode : HTML-Widget Elementor, kein Plugin, kein PHP-Code. Das Tag wird direkt in das Widget eingefügt.produkt-template.php : mit ACF<?php // Konfigurator-ID aus ACF-Feld abrufen $viewer_id = get_field('configurateur_3d_id'); ?> <?php if ($viewer_id) : ?> <viewer-3dvue name="meinViewer" src="https://app.3dvue.fr/view?p=<?php echo esc_attr($viewer_id); ?>" ></viewer-3dvue> <?php endif; ?>
-
3Varianten-Selektoren verbinden
WordPress hat kein natives Variationssystem : alles läuft über Ihre benutzerdefinierten HTML-Komponenten. Fügen Sie die
viewer-3dvue-Attribute auf Ihren Produkt-Konfigurations-Buttons oder -Selects hinzu. Kein JS zu schreiben.Farbselektor : reines HTML<!-- Benutzerdefinierte Farb-Buttons --> <button viewer-3dvue="meinViewer" viewer-3dvue-clic="setMaterial" viewer-3dvue-meshs-materials='{"1":"0n","2":"1a"}' >Natureiche</button> <!-- Oberflächen-Select --> <select viewer-3dvue="meinViewer" viewer-3dvue-change="setMaterial" viewer-3dvue-mesh="1" > <option value="0n">Schwarz lackiert</option> <option value="1a">Weiß lackiert</option> <option value="2b">Eiche</option> </select>
Shortcode, Gutenberg
oder Elementor-Widget.
Die Komponente lässt sich in alle WordPress-Kontexte integrieren. Wählen Sie die Methode, die zu Ihrem Stack passt.
functions.php, um ihn überall im Editor einfügen zu können.// In functions.php add_shortcode('configurateur3d', function($atts) { $id = $atts['id'] ?? ''; return '<viewer-3dvue name="v" src="https://app.3dvue.fr/view?p=' . esc_attr($id) . '"></viewer-3dvue>'; } ); // Im Editor: // [configurateur3d id="AB01-CD02"]
<!-- Benutzerdefinierter HTML-Block für Gutenberg --> <viewer-3dvue name="meinViewer" src="https://app.3dvue.fr/view?p=AB01-CD02" ></viewer-3dvue> <!-- Variations-Buttons im gleichen Block --> <button viewer-3dvue="meinViewer" viewer-3dvue-clic="setMaterial" viewer-3dvue-meshs-materials='{"1":"0n"}' >Schwarz</button>
Für erweiterte Anwendungsfälle.
Vollständige programmatische Steuerung aus Ihrem WordPress-JS : kompatibel mit allen auf WordPress verwendeten Buildern und Frameworks.
// functions.php : ACF-Daten an JS übergeben wp_localize_script('mein-script', 'ViewerConfig', [ 'viewerId' => get_field('configurateur_id'), 'materials' => get_field('materials_map'), ]); // mein-script.js const viewer = document.querySelector('viewer-3dvue'); viewer.setMaterial(ViewerConfig.materials);
const viewer = document.querySelector('viewer-3dvue[name="meinViewer"]'); // Materialien ändern viewer.setMaterial({ "1": "0n", "3": "2b" }); // Anderes Modell laden viewer.loadModel("AB01-CD02"); // Rendering aufnehmen (z.B. Bestellvorschau) viewer.captureToBase64(); viewer.addEventListener("onCaptureBase64Complete", (e) => { console.log(e.detail.base64); });
Häufige Fragen
Brauche ich ein Plugin, um den 3D-Konfigurator in WordPress einzubinden?+
Ist er mit Elementor und Gutenberg kompatibel?+
Kann ich ihn mit eigenen Beitragstypen und ACF verwenden?+
Was kostet ein 3D-Konfigurator für WordPress?+
À lire aussi
Dieser Konfigurator für Ihren Sektor
API-Referenz, HTML-Attribute, PHP WordPress-Beispiele, Shortcodes. Alles dokumentiert und aktuell gehalten.
Dokumentation ansehenKein automatisiertes Ticketing. Sie sprechen direkt mit Matthieu, dem Entwickler der API. Antwort innerhalb von 24h.
Termin buchenTesten Sie den Konfigurator vor der Integration. Sehen Sie, was Ihre Kunden auf Ihrer WordPress-Website sehen werden.
Demo ansehenBereit zur Integration?
Wir kümmern uns um die 3D-Modelle.
Sie verwalten den Code auf der WordPress-Seite, wir kümmern uns um alles andere : Modellierung, Materialien, Konfiguration. In 30 Minuten sagen wir Ihnen, was wir tun können.