Guide développeur — WordPress

Un configurateur 3D
sur WordPress.
2 lignes de code.

<viewer-3dvue> est un Web Component natif. Il fonctionne dans n'importe quel contexte WordPress — widget HTML Elementor, bloc Gutenberg, shortcode, template PHP custom, CPT avec ACF. Aucun plugin dédié, aucune dépendance.

Compatible WordPress 6+

Widget HTML Elementor

Bloc Gutenberg natif

Shortcode PHP

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="monViewer"
  src="https://app.3dvue.fr/view?p=AB01-CD02"
></viewer-3dvue>

<!-- C'est tout. -->

Charger le script — 3 façons

La méthode recommandée est wp_enqueue_script() dans functions.php. Mais vous pouvez aussi l'inclure via WPCode (snippet global), ou directement dans un widget HTML Elementor si vous ne voulez pas toucher aux fichiers.

Si vous utilisez WPCode, créez un snippet de type "HTML" avec la balise <script> et activez-le sur toutes les pages ou uniquement les pages produit.

// 1. Via functions.php (recommandé)
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 — snippet HTML global
<script src="https://cdn.jsdelivr.net/gh/3dvue/api@v4/viewer-3dvue-min.js"></script>

// 3. Dans un widget HTML Elementor
<script src="https://cdn.jsdelivr.net/gh/3dvue/api@v4/viewer-3dvue-min.js"></script>
<viewer-3dvue name="monViewer" src="..."></viewer-3dvue>

Placer le composant

Collez la balise dans votre template PHP, dans un widget HTML Elementor, ou via un shortcode. Pour les CPT avec ACF, vous pouvez conditionner l'affichage selon la valeur d'un champ personnalisé.

Sur ce site, 3DVue utilise exactement cette méthode — widget HTML Elementor, pas de plugin, aucun code PHP. La balise est collée directement dans le widget.

<?php
// Récupérer l'ID configurateur depuis un champ ACF
$viewer_id = get_field('configurateur_3d_id');
?>

<?php if ($viewer_id) : ?>
<viewer-3dvue
  name="monViewer"
  src="https://app.3dvue.fr/view?p=<?php echo esc_attr($viewer_id); ?>"
></viewer-3dvue>
<?php endif; ?>

Brancher vos sélecteurs de variantes

WordPress n'a pas de système de variations natif — tout se fait via vos composants HTML custom. Ajoutez les attributs viewer-3dvue sur vos boutons ou selects de configuration produit. Aucun JS à écrire.

<!-- Boutons couleur custom -->
<button
  viewer-3dvue="monViewer"
  viewer-3dvue-clic="setMaterial"
  viewer-3dvue-meshs-materials='{"1":"0n","2":"1a"}'
>Chêne naturel</button>

<!-- Select de finition -->
<select
  viewer-3dvue="monViewer"
  viewer-3dvue-change="setMaterial"
  viewer-3dvue-mesh="1"
>
  <option value="0n">Laqué noir</option>
  <option value="1a">Laqué blanc</option>
  <option value="2b">Chêne</option>
</select>

Via un shortcode PHP

Enregistrez un shortcode dans functions.php pour pouvoir l'insérer n'importe où depuis l'éditeur.

// Dans 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>';
  }
);

// Dans l'éditeur :
// [configurateur3d id="AB01-CD02"]

Bloc Gutenberg HTML personnalisé

Sans aucun code PHP — collez directement dans un bloc "HTML personnalisé" Gutenberg. Le script doit être déjà chargé globalement.

<!-- Bloc HTML personnalisé Gutenberg -->
<viewer-3dvue
  name="monViewer"
  src="https://app.3dvue.fr/view?p=AB01-CD02"
></viewer-3dvue>

<!-- Boutons de variation dans le même bloc -->
<button
  viewer-3dvue="monViewer"
  viewer-3dvue-clic="setMaterial"
  viewer-3dvue-meshs-materials='{"1":"0n"}'
>Noir</button>

Intégration avec wp_localize_script() Passer des données PHP (ID configurateur depuis ACF) vers le JS du viewer

// functions.php — passer les données ACF au JS
wp_localize_script('mon-script', 'ViewerConfig', [
  'viewerId' => get_field('configurateur_id'),
  'materials' => get_field('materials_map'),
]);

// mon-script.js
const viewer = document.querySelector('viewer-3dvue');
viewer.setMaterial(ViewerConfig.materials);

setMaterial() / loadModel() / addModel() Même API que sur toutes les plateformes — la référence complète est dans la documentation

const viewer = document.querySelector('viewer-3dvue[name="monViewer"]');

// Changer les matériaux
viewer.setMaterial({ "1": "0n", "3": "2b" });

// Charger un autre modèle
viewer.loadModel("AB01-CD02");

// Capturer le rendu (ex: preview de commande)
viewer.captureToBase64();
viewer.addEventListener("onCaptureBase64Complete", (e) => {
  console.log(e.detail.base64);
});

Un configurateur 3D
sur WordPress.
2 lignes de code.

Prêt en 3 étapes. Plusieurs façons de l'intégrer.

Shortcode, Gutenberg
ou widget Elementor.

Pour les cas avancés.

Prêt à intégrer ?
On s'occupe des modèles 3D.

Un configurateur 3D sur WordPress. 2 lignes de code.

Prêt en 3 étapes. Plusieurs façons de l'intégrer.

Shortcode, Gutenbergou widget Elementor.

Pour les cas avancés.

Prêt à intégrer ?On s'occupe des modèles 3D.

Un configurateur 3D
sur WordPress.
2 lignes de code.

Shortcode, Gutenberg
ou widget Elementor.

Prêt à intégrer ?
On s'occupe des modèles 3D.