Comment ajouter la 3D et l’AR à votre site web sans application

Pour ajouter la 3D et l’AR à votre site web sans application, publiez votre produit sous forme de page 3D-AR dans BASE 3D-AR Studio, puis collez son code d’intégration dans votre site. Les visiteurs font pivoter le modèle et zooment directement sur votre page. Sur iPhone et iPad, le bouton AR ouvre Apple AR Quick Look ; sur Android, il lance l’AR avec WebXR dans Chrome ; sur ordinateur, il affiche un QR code qui permet au visiteur de poursuivre sur son téléphone.

Que signifie « la 3D et l’AR sans application » ?

Ajouter la 3D et la réalité augmentée (AR) à un site web sans application signifie que les visiteurs consultent un modèle 3D interactif dans leur navigateur, puis le placent chez eux grâce à la caméra de leur téléphone, sans rien télécharger ni installer au préalable.

Dans BASE 3D-AR Studio, conçu par BASE BROS, cette expérience prend la forme d’une page 3D-AR hébergée. Chaque modèle dispose d’une page unique, qui s’appuie sur le 3D Viewer de BASE (WebGPU avec basculement automatique vers WebGL) et intègre un bouton Augmented Reality. La consultation d’une page ne demande aucun compte : toute personne disposant du lien ou du QR code, ou consultant la page de votre site qui l’intègre, peut l’ouvrir.

Comment l’AR s’ouvre-t-elle sur chaque appareil ?

La même page s’adapte automatiquement à l’appareil de chaque visiteur. Voici ce qui se passe lorsqu’il appuie ou clique sur le bouton AR, intitulé View in AR par défaut :

Sur iPhone, iPad et Android, le suivi de surfaces pose le produit sur une vraie surface, à l’échelle réelle, et les visiteurs le déplacent et le font pivoter par gestes tactiles. Lorsqu’une taille réelle est définie, l’échelle reste fixée à cette taille. Si un navigateur Android ne prend pas en charge WebXR, la page invite le visiteur à l’ouvrir dans Chrome. Pour comprendre pourquoi l’iPhone et Android ont besoin de fichiers différents, lisez GLB ou USDZ : préparer vos modèles 3D pour le web et l’AR.

Comment ajouter la 3D et l’AR à votre site, étape par étape ?

Toute la configuration se fait dans votre navigateur, et le seul code à manipuler est un extrait à coller :

Étape 1 : ajoutez votre produit au Studio sous forme de modèle 3D

Importez un fichier .GLB de 50 Mo maximum, ou créez un modèle à partir de photos du produit ou d’un prompt textuel dans le 3D Generator. Un modèle nouvellement importé ou généré par IA est mis en ligne sur sa propre page 3D-AR sans passer par Save. Le guide complet de l’import, de la génération et de l’édition se trouve dans Comment créer une page produit 3D et AR avec BASE 3D-AR Studio, et nos conseils pour choisir des photos qui donnent de bons résultats sont réunis dans Image en 3D : transformer vos photos produits en modèles 3D avec l’IA.

Étape 2 : définissez la taille réelle et la première vue

Dans le Model Editor, ouvrez l’onglet Controls et réglez Model Scale : saisissez la plus grande dimension du produit en centimètres ou utilisez le multiplicateur. La vue 3D ne change pas, mais en AR, le modèle apparaît exactement à cette taille. Dans le même onglet, Set Start View fixe l’angle que les visiteurs voient en premier. Pour que la visionneuse se fonde dans votre page, choisissez la vignette No Background dans l’onglet Scene afin d’obtenir un arrière-plan transparent.

Étape 3 : personnalisez le bouton AR dans Page Designer

Dans Page Designer, l’onglet AR Button contient l’option Show AR button, qui détermine si le bouton s’affiche, ainsi que son libellé (40 caractères maximum), sa position, sa police, ses couleurs, l’arrondi des angles et l’opacité. Le QR Popup Editor règle le titre, le texte et les quatre couleurs de la fenêtre que voient les visiteurs sur ordinateur. Personnalisez séparément l’affichage sur ordinateur et sur mobile, ou gardez-les identiques en cochant la case Use the same on desktop and mobile. Cliquez sur Save pour publier. Dans le Studio, enregistrer revient à publier, et aucune modification n’atteint la page en ligne tant que vous n’avez pas enregistré.

Étape 4 : copiez le code d’intégration depuis Share & Embed

Ouvrez Share & Embed depuis le menu à trois points du modèle, depuis la Library, ou avec Share Page dans Page Designer ou More Details. Cette fenêtre réunit tout : le QR code avec Download PNG, le lien public avec Copy, le code d’intégration prêt à coller avec Copy embed code, ainsi que le bouton Open live page.

Étape 5 : collez le code d’intégration dans une page servie en HTTPS

Collez l’iframe à l’endroit où la visionneuse 3D doit apparaître, par exemple dans une description de produit ou une section de page d’atterrissage. Conservez l’extrait exactement tel que le Studio le fournit :

• Conservez l’attribut allow. Ses autorisations camera, gyroscope, accelerometer et xr-spatial-tracking sont indispensables au fonctionnement de l’AR. Sans elles, les navigateurs bloquent l’accès aux capteurs.
• Servez la page en HTTPS. L’AR a besoin d’une connexion sécurisée pour accéder à l’appareil photo et ne fonctionne jamais en HTTP.
• Conservez loading="lazy". Le moteur 3D ne démarre alors que lorsque l’intégration apparaît à l’écran, au fil du défilement.
• Évitez une hauteur fixe en pixels sur mobile. Placez plutôt l’iframe dans un conteneur au format 4/3 pour qu’elle s’adapte à l’écran.

Étape 6 : testez sur un iPhone, un smartphone Android et un ordinateur

Ouvrez votre page sur un iPhone ou un iPad et appuyez sur le bouton AR pour vérifier que Quick Look s’ouvre. Sur Android, ouvrez-la dans Chrome pour vérifier que l’AR se lance avec WebXR. Sur ordinateur, cliquez sur le bouton et scannez le QR code. Dans chaque cas, vérifiez que le produit apparaît à la taille définie dans Model Scale.

Lien, QR code ou intégration : lequel choisir ?

Les trois ouvrent la même page en ligne : vous pouvez donc les combiner librement.

Comme l’intégration affiche la page hébergée, chaque clic sur Save dans le Studio met aussi à jour votre site, sans que vous ayez à recoller le code. Pour vos propres imports, Change Model dans More Details remplace le fichier .GLB tout en conservant la page, le lien et les statistiques.

Comment accélérer le chargement de la visionneuse 3D sur votre site ?

Plus un modèle est léger, plus il se charge vite et plus il s’ouvre rapidement en AR, surtout sur téléphone. Le Studio prend en charge une grande partie de ce travail :

• Les modèles générés par IA sont optimisés dès le départ. Juste après la génération, le Studio applique automatiquement une réduction des triangles en mode Balanced, des textures WebP en 2K et la compression Draco.
• Optimisez le fichier publié. More Details > Optimize réduit le nombre de triangles d’environ 25, 50 ou 75 % et propose WebP, PNG ou Keep pour les textures, une taille de texture de 1K ou 2K, ainsi que la compression Draco. Vous voyez la taille finale mesurée avant de cliquer sur Apply. Revert restaure la sauvegarde, et le Studio régénère automatiquement le fichier USDZ destiné à l’iPhone.
• Allégez les fichiers avant l’import. L’outil gratuit Model Optimizer allège un fichier .GLB dans votre navigateur, sans compte et sans l’envoyer sur un serveur.

Pour une liste de contrôle complète sur les triangles, les textures et la compression Draco, consultez notre guide sur la préparation des modèles 3D pour le web et l’AR.

Comment mesurer l’engagement en 3D et en AR ?

Analytics, dans le Studio, présente les statistiques de toutes vos pages ou d’une seule, sur les périodes All Time, 30 days, 7 days ou 24 hours, ou sur une plage personnalisée. Ses 12 Quick Stats comprennent notamment Total Views, Unique Sessions, QR Scans, AR Activations, 3D Interactions, Avg View Duration et Bounce Rate. Distribution répartit les visites par système d’exploitation, appareil, navigateur et localisation, Top Referrers indique la provenance des visiteurs, et Export PDF enregistre un rapport. Consultez la documentation Analytics.

Combien cela coûte-t-il ?

BASE 3D-AR Studio est facturé par modèle, et l’édition, l’AR, la publication ainsi que le partage par lien, QR code ou intégration sont inclus dans toutes les offres :

• Free : 0 $, sans carte bancaire, jusqu’à 3 modèles en ligne et 3 nouveaux modèles par mois. Les pages et les intégrations affichent un petit filigrane Powered by BASE.
• Pro : 0,50 $ par modèle et par mois (tarif de lancement), avec un minimum de 20 $ par mois pour 40 modèles, sans filigrane.
• Enterprise : tarif et capacité personnalisés, projets 3D sur mesure et support dédié.

La page des tarifs indique le prix mensuel en fonction du nombre de modèles dont vous avez besoin.

Conclusion

Ajouter la 3D et l’AR à votre site se résume à une page hébergée et à un extrait de code : créez le modèle dans le Studio, définissez sa taille réelle, personnalisez le bouton AR, cliquez sur Save et collez le code d’intégration dans une page en HTTPS. Les visiteurs profitent d’une vue 3D interactive sur tous les écrans et de l’AR sur leur téléphone, sans application à installer. Commencez gratuitement, lisez la documentation sur l’intégration, découvrez le Showcase des projets de marques, ou contactez l’équipe BASE BROS pour un projet 3D sur mesure ou l’offre Enterprise.

Commencer gratuitement