Visionneuse 3D pour site web : intégrez vos modèles 3D et la réalité augmentée sans coder

Pour afficher un modèle 3D sur votre site sans coder, importez votre fichier GLB ou USDZ dans Visuality, copiez le code iframe généré, puis collez-le dans un bloc HTML de votre page. La visionneuse apparaît aussitôt : rotation, zoom et bouton de réalité augmentée sur iPhone et Android, sans application à installer.

Par l'équipe Visuality Publié le Mis à jour le 8 min de lecture

Créer mon compte gratuit Voir la démo en réalité augmentée

Quelles sont les façons d'intégrer un modèle 3D sur un site ?

Visuality héberge vos modèles 3D et vous propose plusieurs façons de les afficher. Choisissez selon votre plateforme et vos compétences techniques :

Méthodes d'intégration de la visionneuse 3D Visuality
Méthode Idéal pour Ce que vous faites Compétence requise
Code iframe Tout site ou CMS qui accepte du HTML Copier-coller une ligne de code dans la page Aucune
Lien ou QR code E-mails, réseaux sociaux, supports imprimés, salons Partager l'URL de la visionneuse ou imprimer son QR code Aucune
Application Shopify Boutiques Shopify Associer un objet à chaque produit, puis ajouter le bloc au thème Aucune
Module PrestaShop Boutiques PrestaShop 1.7 à 8.x Installer le module gratuit, coller la clé API, associer les objets aux produits Accès au back-office
API REST Applications et catalogues sur mesure Créer et lister vos objets par programme, puis récupérer l'URL de leur visionneuse Développeur

Comment intégrer la visionneuse 3D avec une iframe ?

  1. Créez votre compte Visuality : l'essai gratuit ne demande pas de carte bancaire.
  2. Importez votre modèle 3D : dans la Librairie d'objets 3D, cliquez sur « Ajouter un Objet », choisissez « Je possède déjà mon objet en 3D » et importez un fichier GLB ou USDZ. Pas encore de fichier ? Choisissez « Mon objet n'est pas modélisé » pour le générer à partir d'une photo.
  3. Réglez l'objet : taille réelle, placement au sol ou au mur, image de fond et miniature se règlent depuis la fiche de l'objet.
  4. Copiez le code : cliquez sur « Visualiser / Partager » puis, dans la rubrique « Intégration directe sur votre site (Iframe) », sur « Copier dans le presse-papier ».
  5. Collez le code dans votre page : ajoutez un bloc HTML (ou « embed ») à l'endroit voulu, collez le code, publiez, puis testez la page sur un smartphone.
Rubrique Intégration directe sur votre site (Iframe) de la page Visualiser / Partager, avec le code à copier

Le code généré tient sur une ligne ; l'identifiant à la fin de l'adresse est propre à chaque objet :

<iframe src='https://visuality.fr/viewer/object/VOTRE-ID'></iframe>

Pour une intégration plus soignée, nous conseillons d'ajouter une taille, un titre accessible et le chargement différé :

<iframe src="https://visuality.fr/viewer/object/VOTRE-ID"
        title="Visionneuse 3D du produit"
        width="100%" height="500"
        style="border: 0;"
        loading="lazy"
        allow="xr-spatial-tracking; fullscreen"
        allowfullscreen></iframe>
  • width et height réservent la place de la visionneuse et évitent que la page se décale pendant le chargement.
  • title décrit le contenu de l'iframe pour les personnes qui utilisent un lecteur d'écran.
  • loading, réglé sur lazy, ne charge la visionneuse qu'à l'approche de son emplacement, ce qui accélère l'affichage initial de la page.
  • allow autorise la réalité augmentée WebXR et le plein écran depuis l'iframe.

Le guide complet, avec la vidéo de démonstration, se trouve dans la documentation : intégrer la visionneuse 3D sur une page.

Sur quels sites et CMS fonctionne la visionneuse ?

Le code iframe fonctionne sur tout CMS qui accepte un bloc HTML ou une iframe. Selon l'outil, ce bloc s'appelle « HTML personnalisé », « Embed » ou « Code » :

  • WordPress : ajoutez un bloc HTML personnalisé dans l'éditeur, puis collez le code.
  • Wix, Webflow, Squarespace : utilisez l'élément d'intégration de code (embed) proposé par l'éditeur de pages.
  • Site sur mesure : collez le code dans le gabarit HTML de la page produit, à côté des photos.
  • Shopify et PrestaShop : préférez l'application Shopify ou le module PrestaShop, qui affichent automatiquement le bon objet sur chaque fiche produit.

Certaines offres d'entrée de gamme des créateurs de sites limitent l'ajout de code personnalisé : si le bloc n'apparaît pas, vérifiez les conditions de votre abonnement.

Lien, QR code ou iframe : lequel choisir ?

L'iframe affiche le modèle directement dans votre page. Le lien et le QR code ouvrent la visionneuse en plein écran : ils servent quand vous ne pouvez pas modifier la page, ou pour faire passer un visiteur de l'ordinateur au smartphone.

  • Lien de partage : dans un e-mail, un message ou une publication sur les réseaux sociaux.
  • QR code : sur un catalogue imprimé, une étiquette en magasin, un stand de salon, ou à côté de la visionneuse pour les visiteurs sur ordinateur.
  • Code HTML du QR code : Visuality fournit aussi un code prêt à coller qui affiche un QR code cliquable sur votre page.

Ajouter un QR code de réalité augmentée sur une fiche produit

Visuality ou le composant gratuit model-viewer de Google ?

model-viewer est un composant web open source publié par Google sous licence Apache 2.0. Il est gratuit et très complet, et la visionneuse Visuality repose d'ailleurs sur lui. La différence tient à tout ce qu'il faut construire autour.

Comparaison entre model-viewer et Visuality (vérifié le 15/10/2026)
Critère model-viewer (open source) Visuality
Prix Gratuit Abonnement mensuel
Hébergement des fichiers 3D À votre charge (serveur ou CDN) Inclus, vues illimitées
Mise en place Écrire le HTML et le JavaScript de la page Copier-coller un code iframe
Fichier USDZ pour l'iPhone À fournir (attribut ios-src) ou généré dans le navigateur au lancement de la réalité augmentée Généré sur le serveur, échelle intégrée, modèles lourds allégés
QR code et lien de partage À mettre en place vous-même Inclus
Création de modèles 3D Non incluse IA à partir d'une photo, modélisation sur devis
Personnalisation de l'affichage Totale, par le code Réglages proposés dans l'interface

Choisissez model-viewer si vous avez un développeur, des modèles déjà optimisés et l'envie de contrôler chaque détail de l'affichage, sans abonnement.

Choisissez Visuality si vous voulez publier vite, sans gérer l'hébergement, la version USDZ ni les QR codes, ou si vous n'avez pas encore de modèles 3D.

Comment garder une page rapide avec un modèle 3D ?

  • Allégez le fichier GLB : limitez le nombre de polygones et la taille des textures. Un modèle léger se charge plus vite, surtout sur mobile.
  • Laissez Visuality optimiser la version iPhone : le fichier USDZ généré pour AR Quick Look plafonne les textures à 2048 pixels et réduit les modèles très lourds à environ 200 000 triangles.
  • Chargez la visionneuse à la demande : l'attribut loading de l'iframe, réglé sur lazy, retarde son chargement jusqu'à ce que le visiteur s'en approche.
  • Réservez l'espace : une largeur et une hauteur fixées évitent les décalages de mise en page pendant le chargement.
  • Testez sur un vrai smartphone : vérifiez le temps de chargement et la réalité augmentée sur un appareil d'entrée de gamme, pas seulement sur ordinateur.

Pour bien préparer vos fichiers : GLB ou USDZ : quel format 3D pour la réalité augmentée ?

Questions fréquentes

Importez le fichier GLB dans Visuality, ouvrez « Visualiser / Partager » et copiez le code iframe proposé. Collez-le dans un bloc HTML de votre page : le modèle s'affiche dans une visionneuse 3D interactive, avec la réalité augmentée sur mobile. Vous n'avez ni serveur ni JavaScript à gérer.

Oui, dès lors que l'outil accepte un bloc HTML ou une iframe : bloc HTML personnalisé sur WordPress, élément d'intégration de code sur Wix, Webflow ou Squarespace. Certaines offres d'entrée de gamme limitent le code personnalisé ; vérifiez les conditions de votre abonnement.

Oui, sur smartphone et tablette, avec Safari, Chrome ou Edge : le bouton de réalité augmentée ouvre AR Quick Look sur iPhone et iPad, et Scene Viewer ou WebXR sur Android. Sur ordinateur, la visionneuse reste en 3D ; ajoutez le QR code pour que le visiteur continue sur son téléphone.

Non. Les modèles importés sont hébergés par Visuality, avec un nombre de vues illimité et sans frais par affichage. Les formules se distinguent par le nombre d'objets 3D publiés et par le quota mensuel de conversions IA.

model-viewer est un composant open source gratuit : vous hébergez les fichiers, écrivez le code et gérez la version USDZ pour l'iPhone. Visuality, qui repose sur ce composant, fournit tout cela clé en main, avec en plus les QR codes, les liens de partage et la génération de modèles 3D par IA.

Oui. Les groupes d'objets réunissent plusieurs modèles derrière un même lien, un QR code et un code iframe : le visiteur passe d'un modèle à l'autre via un sélecteur, un objet à la fois. C'est utile pour présenter un ensemble de mobilier, une vitrine ou une gamme de produits. Plusieurs objets simultanés en réalité augmentée nécessitent l'application Android.

Les liens d'accès sont désactivés tant que la licence est inactive : la visionneuse intégrée cesse alors de s'afficher sur votre site. Elle fonctionne de nouveau dès la réactivation de l'abonnement, sans que vous ayez à modifier le code de vos pages.

Sources

  1. google/model-viewer (licence Apache 2.0) — Google, Vérifié le 15/10/2026
  2. Documentation de model-viewer (attributs ios-src et ar-modes) — Google, Vérifié le 15/10/2026
  3. <iframe> : attributs loading, allow et title — MDN Web Docs, Vérifié le 15/10/2026

Prêt à passer à la réalité augmentée ?

Créez votre compte Visuality et commencez à visualiser vos produits en 3D et en réalité augmentée en quelques minutes. Essai gratuit de 7 jours, sans engagement.

Lire aussi