Entwicklerhandbuch — WordPress

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.

Kompatibel WordPress 6+

HTML-Widget Elementor

Nativer Gutenberg-Block

PHP-Shortcode

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. -->

Skript laden — 3 Methoden

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.

Bei WPCode erstellen Sie ein Snippet vom Typ „HTML" mit dem <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>

Komponente 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.

<?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; ?>

Varianten-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.

<!-- 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>

Via PHP-Shortcode

Registrieren Sie einen Shortcode in 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

Ohne PHP-Code — fügen Sie direkt in einen „Benutzerdefinierter HTML"-Block in Gutenberg ein. Das Skript muss bereits global geladen sein.

<!-- 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>

Integration mit wp_localize_script() PHP-Daten (Konfigurator-ID aus ACF) an das Viewer-JS übergeben

// 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);

setMaterial() / loadModel() / addModel() Gleiche API auf allen Plattformen — vollständige Referenz in der Dokumentation

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);
});

Ein 3D-Konfigurator
auf WordPress.
2 Zeilen Code.

In 3 Schritten bereit. Mehrere Integrationsmethoden.

Shortcode, Gutenberg
oder Elementor-Widget.

Für erweiterte Anwendungsfälle.

Bereit zur Integration?
Wir kümmern uns um die 3D-Modelle.

Ein 3D-Konfigurator auf WordPress. 2 Zeilen Code.

In 3 Schritten bereit. Mehrere Integrationsmethoden.

Shortcode, Gutenbergoder Elementor-Widget.

Für erweiterte Anwendungsfälle.

Bereit zur Integration?Wir kümmern uns um die 3D-Modelle.

Ein 3D-Konfigurator
auf WordPress.
2 Zeilen Code.

Shortcode, Gutenberg
oder Elementor-Widget.

Bereit zur Integration?
Wir kümmern uns um die 3D-Modelle.