Kova dans votre page, en quelques lignes de code.

Le SDK JavaScript place une scène Kova Secure dans une iframe, et vous la pilotez depuis votre propre interface. L’image est calculée sur nos serveurs.

Voir le SDK à l’œuvre

index.html

<div id="viewer"></div>
<script type="module">
  import { Kova3D }
    from 'https://kova3d.com/sdk/kova3d.js';
  Kova3D.embed(document.getElementById('viewer'), {
    model: 'demo:config-car'
  });
</script>

Référence.

Kova3D.embed(element, options) crée l’iframe et renvoie un viewer. Chaque commande attend viewer.ready et renvoie une promesse.

Options d’intégration

model: L’identifiant du modèle.
ui: none : la 3D seule (par défaut). configurator : le panneau d’options intégré.
theme: showroom, sombre (par défaut), ou studio, clair.
turn: true (par défaut) : le modèle tourne lentement. false : il reste immobile.
host: L’adresse du moteur. Par défaut, celle d’où le SDK est chargé.
loading: lazy (par défaut) : démarre quand l’iframe approche de l’écran. eager : démarre tout de suite.
title: Le titre de l’iframe, lu par les lecteurs d’écran.

Modèles

demo:config-car: La voiture de démonstration.
Vos modèles: Sur entente avec Kova.

Exemple

app.js

const viewer = Kova3D.embed(document.getElementById('viewer'), {
  model: 'demo:config-car'
});

viewer.on('change', (config) => {
  console.log(config.groups);
});

await viewer.setOption('wheels', 'turbine');

Méthodes

ready: Promesse résolue quand le modèle est affiché : { model, config }.
getConfig(): La configuration en cours.
setOption(): Affiche l’option optionId du groupe groupId.
focus(): Amène la caméra sur le groupe groupId ; null revient à la vue d’ensemble.
setSlider(): Règle le curseur sliderId de 0 à 1 : portes, vue éclatée, animation.
setColor(): Teinte la pièce part en #rrggbb ; null lui rend sa couleur.
setMaterial(): Applique le matériau presetId à la pièce part ; null lui rend le sien.
setTheme(): studio ou showroom.
setTurn(): Lance ou arrête la rotation.
screenshot(): Une image PNG rendue sur le serveur, à la taille { width, height } demandée.
on(), off(): Ajoute ou retire un écouteur d’événement.
destroy(): Retire l’iframe et les écouteurs.

Événements

change: Émis après chaque changement, qu’il vienne de votre page, de la 3D ou du panneau intégré. Reçoit la configuration.
select: Un clic sur une pièce : { part, name, group }.
hover: Le pointeur sur une pièce : { part, name }, ou null.
error: Une erreur : { message }.

Le SDK à l’œuvre.

Ce configurateur est fait uniquement avec le SDK. Pour l’utiliser avec vos modèles, écrivez-nous.

Vous parlez directement à ceux qui font votre 3D, ici au Québec.

La voiture

Réserver un appel découverte