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. -->
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.
Die empfohlene Methode ist wp_enqueue_script() in functions.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.
<script>-Tag und aktivieren es auf allen Seiten oder nur auf Produktseiten.
// 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>
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.
<?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; ?>
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.
<!-- 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); });
À 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.