Qu’est-ce qu’un viewer AR pour site web ?
Un viewer AR est une expérience de visualisation qui permet d’observer un modèle 3D dans l’environnement capté par un appareil compatible. Depuis votre site, le visiteur explore d’abord l’objet en 3D, puis ouvre le mode de réalité augmentée proposé par son téléphone.
Le viewer 3D permet de tourner autour du modèle, de zoomer et d’examiner sa forme dans une page web. Le mode AR utilise les capacités du téléphone pour présenter l’objet dans son environnement. Les photos restent utiles pour les détails, les matières et les situations que vous souhaitez montrer précisément.
Avec DevXR, vous préparez la présentation dans Studio, publiez le modèle, puis diffusez son URL ou intégrez le viewer à votre site. La transition vers l’AR dépend de l’appareil et du navigateur ; le visiteur conserve un accès à la 3D web lorsque son appareil le permet.
Un même modèle, trois façons d’aider à se projeter
E-commerce & marques
Montrer le volume du produit
Un meuble, un objet décoratif ou un équipement : ajoutez une vue 3D à votre fiche produit pour laisser examiner sa forme. Proposez ensuite l’AR sur mobile pour le voir dans un environnement réel.
À préparer : dimensions vérifiées, photos complémentaires et bouton d’accès visible à proximité du produit.
Agences & intégrateurs
Livrer un point d’accès simple
Associez un modèle publié à une page client, une landing page ou un catalogue. Utilisez un lien pour une mise en place rapide, puis une iframe si le site accepte ce contenu.
À préparer : intégration responsive, lien de secours et recette sur les téléphones visés.
Architecture & design
Présenter une proposition à distance
Partagez une maquette ou un élément d’aménagement sans imposer un logiciel de conception à votre interlocuteur. La 3D facilite l’examen des volumes et l’AR apporte un autre contexte de présentation.
À préparer : échelle cohérente et scène allégée. Cette visualisation ne remplace pas une mesure professionnelle.
Créer votre expérience 3D et AR avec DevXR Studio
Importez votre modèle GLB
Connectez-vous à Studio, ouvrez votre projet et importez le modèle préparé pour le web. Attendez la fin du traitement et l’état prêt avant de le présenter.
Vérifiez la présentation
Contrôlez les matériaux, l’orientation, les proportions et l’échelle. Réglez la présentation du viewer puis enregistrez. Le rendu AR peut différer du rendu web : prévoyez aussi une vérification sur téléphone.
Publiez explicitement le modèle
Dans Livraison, utilisez Publier pour une version prête. La publication nécessite les droits appropriés et un compte avec une adresse e-mail vérifiée. Un aperçu privé n’est pas un lien public.
Récupérez votre lien ou votre iframe
Dans Accès → Liens et code d’intégration, copiez l’URL publique ou le code iframe. Testez le lien sans session, puis le parcours AR sur vos appareils cibles.
Comment ouvrir le viewer AR sur un téléphone ?
Depuis un ordinateur : passez par le QR code
- Ouvrez la page du modèle publié et attendez son chargement.
- Cliquez sur la commande AR du viewer pour afficher le panneau de transfert.
- Scannez le QR code avec l’appareil photo du téléphone, puis ouvrez le lien.
- Sur le téléphone compatible, touchez la commande AR pour lancer le mode proposé.
Depuis le téléphone : ouvrez directement le lien
- Ouvrez le lien public dans le navigateur du téléphone.
- Attendez l’affichage du modèle 3D.
- Touchez AR lorsque la commande est disponible. Sur iOS, une étape de préparation peut précéder Quick Look.
- Accordez les permissions demandées si vous souhaitez poursuivre, puis observez le modèle. Revenez à la page pour continuer la consultation 3D.
Ouvrez cette démonstration sur un téléphone compatible pour essayer le parcours disponible sur votre appareil.
Viewer AR sur iOS, Android et ordinateur : quelles différences ?
| Appareil | Parcours AR | À vérifier |
|---|---|---|
| iPhone et iPad compatibles | AR Quick Look, préparé à partir du modèle GLB. | Ouvrir dans Safari, attendre la préparation et déclencher l’AR par un geste explicite. |
| Android compatible | Session WebXR en réalité augmentée. | Navigateur WebXR, appareil pris en charge par ARCore, services AR disponibles et permissions accordées. |
| Ordinateur | Consultation 3D et QR code vers le téléphone. | Modèle publié, téléphone compatible et accès au lien public. |
| Appareil sans AR | Consultation 3D web si WebGL est disponible. | Prévoir photos, description et informations essentielles à côté du viewer. |
Une page sécurisée en HTTPS et les permissions du navigateur sont nécessaires au parcours WebXR. Les navigateurs intégrés à une messagerie ou un réseau social peuvent limiter l’accès aux fonctions AR : ouvrez le lien dans Safari ou un navigateur Android compatible.
Les commandes et le placement diffèrent selon la plateforme. Le parcours Android actuel présente le modèle devant l’utilisateur ; ne supposez pas une détection automatique du sol ou les mêmes gestes de placement que dans Quick Look.
Ajouter un viewer 3D et AR à votre site
Un lien pour commencer
Ajoutez un bouton vers l’URL publique du modèle, par exemple « Voir le produit en 3D et AR ». Le visiteur arrive sur une page dédiée. Cette solution convient aussi aux messages, aux QR codes imprimés ou à un CMS qui n’accepte pas les iframes.
Une iframe dans votre fiche produit
Copiez le code généré par Studio dans un bloc HTML autorisant les contenus externes. Le viewer s’affiche au sein de votre page ; le passage à l’AR reste soumis aux capacités de l’appareil et aux permissions de la page hôte.
<iframe
src="https://viewer.devxr.fr/embed/pub_VZivihNIlDZNQPAdbGg7BPEx3x9FQ1X4"
title="Présentation 3D — Frame House"
width="100%"
height="480"
loading="lazy"
allow="fullscreen; xr-spatial-tracking"
allowfullscreen
referrerpolicy="strict-origin-when-cross-origin"
style="border: 0;"
></iframe>Cet exemple utilise le modèle de démonstration. Pour votre modèle, copiez le code généré dans Studio.
Conservez l’autorisation xr-spatial-tracking et le plein écran dans le code fourni. Les politiques du site hôte peuvent aussi limiter ces fonctions. Prévoyez un lien vers la page publique et testez l’ensemble sur le domaine final, avec ses réglages de sécurité.
Sur WordPress, Shopify ou WooCommerce, vérifiez les possibilités du thème, du bloc et de votre compte éditeur. Une galerie prévue uniquement pour des photos doit être adaptée pour accueillir une iframe. Réservez sa hauteur pour éviter les déplacements de mise en page et chargez la vue 3D à la demande si elle se trouve dans une galerie.
Suivre le tutoriel complet d’intégration : lien, iframe et galerie · Vérifier les domaines autorisés et les contraintes iframe
La qualité de l’AR commence avec le fichier 3D
- Unités et échelle : contrôlez une dimension connue dans votre outil de création et vérifiez le résultat sur téléphone.
- Orientation : vérifiez le sens du modèle, son origine et les transformations avant l’export.
- Textures et matériaux : contrôlez leur présence dans le GLB et leur aspect dans les deux parcours. Les moteurs web et natifs peuvent présenter des différences.
- Poids : simplifiez les géométries et adaptez les textures aux détails utiles. Un objet de fiche produit ne nécessite pas forcément toute la précision du fichier de conception.
- Scène : retirez les éléments inutiles à la présentation et gardez un sujet facile à comprendre sur un écran mobile.
- Recette : testez votre véritable fichier sur iOS et Android, avec une connexion mobile représentative, avant de diffuser la page.
Conservez les dimensions, caractéristiques et informations d’achat en texte dans votre fiche produit. Le viewer enrichit la présentation sans porter seul les informations nécessaires à la décision.
Le bouton AR manque ou l’expérience ne démarre pas ?
La commande AR n’apparaît pas
Vérifiez l’appareil, son navigateur, la configuration AR du viewer et la disponibilité des services AR. Sur ordinateur, utilisez le panneau de transfert vers téléphone. Un petit écran seul ne signifie pas que l’AR est prise en charge.
Quick Look reste en préparation
Attendez le chargement et la préparation du modèle. Vérifiez la connexion, réessayez depuis Safari et testez un GLB plus léger pour isoler un problème lié au fichier.
L’AR fonctionne par lien, mais pas dans le site
Comparez la page publique et l’iframe sur le même téléphone. Vérifiez HTTPS, les permissions de l’iframe et la politique du site hôte. Gardez le lien public accessible sans désactiver globalement les protections.
Le modèle semble trop grand ou différent
Contrôlez l’échelle, les unités et les matériaux du GLB. Comparez le viewer web au rendu sur appareil réel. Ne validez pas une dimension uniquement à partir d’une capture d’écran.
Le QR code n’ouvre pas le modèle
Testez l’URL publique sans session et vérifiez que le modèle est toujours publié. Un QR code donne accès à un lien ; il ne rend pas un modèle privé accessible et n’ajoute pas l’AR à un téléphone incompatible.
Le lien s’ouvre dans une application sociale
Copiez-le et ouvrez-le dans un navigateur compatible. Si vous refusez une permission nécessaire, vous pouvez revenir à la consultation 3D et réexaminer les autorisations du navigateur.
Questions fréquentes sur les viewers AR pour site web
Faut-il installer une application pour voir le modèle en AR ?
Aucune application DevXR n’est à installer pour ce parcours. iPhone et iPad utilisent Quick Look. Android utilise un navigateur WebXR compatible et les services AR nécessaires au système, qui doivent être disponibles et activés.
Tous les iPhone et téléphones Android sont-ils compatibles ?
Non. Le modèle d’appareil, le système, le navigateur et leurs permissions déterminent la disponibilité. Sur un appareil sans AR compatible, le visiteur peut consulter le modèle dans le viewer 3D web, si WebGL est disponible.
Quel fichier fournir pour créer mon viewer AR ?
Préparez un modèle GLB destiné au web, avec ses matériaux et textures. DevXR prépare le parcours Quick Look depuis ce modèle sur iOS. Vérifiez la qualité, les dimensions et le comportement sur vos appareils cibles avant de diffuser le lien.
Le visiteur doit-il créer un compte DevXR ?
Un modèle publié avec accès public se consulte sans compte. La création, la configuration et la publication du modèle se font depuis votre compte Studio, avec les autorisations nécessaires et une adresse e-mail vérifiée.
Puis-je ajouter un viewer AR à WordPress, Shopify ou WooCommerce ?
Vous pouvez utiliser un lien vers la page du modèle ou un bloc acceptant l’iframe fournie par Studio. L’intégration dépend des droits d’édition, du thème et des politiques du site. Testez le parcours sur la page finale ; un bloc image seul ne suffit pas.
Les dimensions du modèle sont-elles garanties en réalité augmentée ?
Contrôlez les unités et l’échelle de votre fichier, puis vérifiez un repère connu sur appareil réel. L’AR aide à présenter des proportions ; elle ne remplace pas une mesure technique ou une validation d’implantation.
Puis-je garder mon modèle privé ?
Oui, les modèles sont privés par défaut. Le parcours de diffusion décrit ici utilise une publication explicite. Un lien public peut être retransmis. Dépublier retire l’accès public mais ne supprime pas les captures ou copies déjà réalisées.
Ajouter un viewer AR augmente-t-il les ventes ou le référencement ?
L’AR peut aider vos visiteurs à examiner une proposition. Son effet dépend du produit, de la qualité du modèle et du parcours. Mesurez vos résultats sur votre site ; aucun gain de conversion, de trafic ou de classement ne peut être garanti.
Votre prochain produit, en contexte
Commencez avec un modèle. Partagez une nouvelle perspective.
Importez votre GLB, préparez sa présentation et testez le parcours AR sur vos téléphones cibles avant de l’ajouter à votre site.
Créer mon compte DevXR ↗Échanger sur mon intégration