Comment créer une page produit 3D et AR avec BASE 3D-AR Studio
Pour créer une page produit 3D et AR, ajoutez votre produit à BASE 3D-AR Studio sous forme de modèle 3D, en important un fichier .GLB ou en le générant avec l’IA : le Studio lui attribue sa propre page 3D-AR en ligne. Vous peaufinez ensuite les matériaux, la scène et le design de la page, cliquez sur Save, puis partagez la page par lien, QR code ou code d’intégration. Sur iPhone, iPad et smartphones Android, la page s’ouvre en AR, sans application.
À retenir
- Chaque modèle du Studio dispose d’une seule et unique page 3D-AR : aucun outil de création de pages ni hébergement à mettre en place.
- Partez de votre propre fichier .GLB (jusqu’à 50 Mo) ou générez un modèle avec six moteurs d’IA : tous fonctionnent à partir de photos, et quatre d’entre eux aussi à partir de texte.
- Vos modifications restent un aperçu privé tant que vous n’avez pas cliqué sur Save ; un seul clic sur Save suffit à mettre à jour la page en ligne.
- L’AR s’ouvre depuis la page : Apple AR Quick Look avec un fichier USDZ sur iPhone et iPad, WebXR dans Chrome sur Android, un QR code sur ordinateur.
- L’offre Free comprend 3 modèles en ligne et 3 nouveaux modèles par mois ; Pro coûte 0,50 $ par modèle et par mois, avec un minimum de 20 $.
Qu’est-ce qu’une page produit 3D et AR ?
Une page produit 3D et AR est une page web qui présente le produit sous forme de modèle 3D interactif : les acheteurs le font pivoter, zooment et l’examinent en détail. Sur leur téléphone, ils peuvent aussi le poser sur une vraie surface chez eux, à l’échelle réelle, grâce à la réalité augmentée.
Dans le Studio, conçu par BASE BROS, chaque modèle possède une seule page, et toute modification du modèle met à jour cette même page. Les pages s’affichent dans le navigateur grâce au BASE 3D Viewer, une visionneuse WebGPU avec basculement automatique vers WebGL2, et intègrent nativement un bouton Augmented Reality.
De quoi avez-vous besoin pour commencer ?
- Un compte Studio. L’offre Free sur studio.basebros.com ne demande aucune carte bancaire.
- Une source pour votre modèle. Un fichier .GLB de 50 Mo maximum, des photos du produit (PNG, JPG, WebP, AVIF ou HEIC, 20 Mo maximum chacune) ou une description textuelle de 10 à 500 caractères. Les formats FBX, OBJ et STL ne sont pas pris en charge : convertissez-les d’abord en GLB.
- En option : un logo au format PNG, JPG ou WebP de 5 Mo maximum.
Pour vérifier un fichier GLB avant de l’importer, ouvrez-le dans Quick View : il s’affiche dans la visionneuse du Studio sans être envoyé sur un serveur.
Comment créer une page produit 3D et AR, étape par étape ?
Le processus tient en quatre étapes, entièrement dans le navigateur :
- Modèle : importez un fichier .GLB ou générez un modèle avec l’IA.
- Édition : ajustez les matériaux, l’éclairage, la caméra et l’échelle dans le Model Editor.
- Publication : mettez en forme la page dans Page Designer, puis cliquez sur Save.
- Partage et AR : diffusez le lien, le QR code ou le code d’intégration ; les visiteurs ouvrent l’AR depuis la page.
Étape 1 : ajoutez votre produit sous forme de modèle 3D
Si vous disposez déjà d’un fichier 3D, importez-le. Cliquez sur Upload Model dans la barre supérieure de la visionneuse ou faites glisser un fichier .glb sur le Model Editor. Lorsque vous importez un seul fichier, il s’ouvre en mode Preview : vous pouvez le vérifier avant de cliquer sur Confirm & Upload, et le nouveau modèle est aussitôt mis en ligne avec sa page. Pour alléger le fichier avant de l’importer, consultez notre guide sur la préparation des modèles 3D pour le web et l’AR.
Si vous n’avez que des photos ou une idée, passez par le 3D Generator, l’écran sur lequel s’ouvre le Studio. Choisissez Image to 3D (le mode par défaut) ou Text to 3D, puis l’un des six moteurs d’IA : Meshy (par défaut), Tripo, Rodin, Hunyuan, TRELLIS ou Pixal3D. TRELLIS et Pixal3D fonctionnent uniquement à partir d’images. En génération multivue, Meshy, Tripo et Hunyuan Pro acceptent jusqu’à 4 images et Rodin jusqu’à 5, dans l’ordre suivant : face, dos, gauche, droite.
Le Studio prépare automatiquement les modèles générés par IA pour le web : réduction des triangles en mode Balanced, textures WebP en 2K et compression Draco. Qu’il soit importé ou généré, chaque nouveau modèle n’est comptabilisé qu’une seule fois dans votre offre.
Étape 2 : modifiez les matériaux et la scène en temps réel
Le panneau de droite du Model Editor comporte trois onglets :
- Scene : sept préréglages intégrés (Default, Factory, Studio, Spotlight, Showroom, Cinematic, Outdoor), 20 environnements HDRI, des arrière-plans, l’exposition, les lumières et des ombres douces.
- Controls : activation de la rotation automatique, du zoom et du déplacement, avec des limites de zoom avant et arrière, une Start View enregistrée qui fixe le premier angle de vue des visiteurs, et Model Scale, la taille réelle en centimètres utilisée en AR.
- Material : sélectionnez une partie du modèle à la pipette et modifiez Base Color, Roughness, Metalness, Normal, Emissive et Occlusion (chacun pouvant recevoir une texture), ainsi qu’Alpha (opacité, mode de fusion et double face). Chaque réglage peut être réinitialisé.
Les modifications de matériaux forment une couche non destructive : le fichier GLB d’origine n’est jamais modifié. Cinq modes d’affichage (UV Checker, Solid, Render, Wireframe, Normals) font ressortir les défauts de texture et de maillage. Pour les fichiers lourds, l’onglet Optimize de la fenêtre More Details d’un modèle réduit le nombre de triangles d’environ 25, 50 ou 75 %, avec des options pour les textures et la compression Draco. Rien n’est rendu public tant que vous n’avez pas cliqué sur Save dans la carte Unsaved changes.
Étape 3 : concevez et publiez la page 3D-AR en ligne
Page Designer affiche un aperçu de la page dans un cadre d’ordinateur portable et un cadre de téléphone, côte à côte. L’onglet AR Button règle le libellé du bouton (40 caractères maximum), sa position, sa police, ses couleurs, l’arrondi des angles et l’opacité, ainsi que la fenêtre du QR code affichée aux visiteurs sur ordinateur. L’onglet Toolbars réunit votre logo et les boutons Photo, Light/Dark, Fullscreen et, en option, Performance.
Personnalisez séparément l’affichage sur ordinateur et sur mobile, appliquez le même style aux deux en cochant une seule case, ou choisissez l’un des huit Page Themes intégrés (Minimal, Neon, Elegant, Retro, Glass, Brutal, Azure, Cherry). Pour l’iPhone, vous pouvez importer votre propre fichier .usdz ; à défaut, le Studio génère le fichier USDZ à partir de votre GLB.
Cliquez sur Save pour publier : il n’y a pas d’étape de publication distincte. Pour mettre une page hors ligne temporairement sans la supprimer, utilisez Set Offline dans la fenêtre More Details du modèle. Les visiteurs voient alors un écran de maintenance jusqu’à ce que vous choisissiez Set Live, et rien n’est supprimé.
Étape 4 : partagez la page et ouvrez-la en AR
Share Page ouvre la fenêtre Share & Embed, qui regroupe le QR code (Download PNG), le lien public, le code d’intégration prêt à coller et Open live page. Ce code d’intégration est une iframe standard à coller dans votre propre site ; pour que l’AR fonctionne dans l’iframe, le site doit être en HTTPS.
Sur téléphone, le visiteur appuie sur le bouton AR, intitulé View in AR par défaut. L’iPhone et l’iPad ouvrent Apple AR Quick Look avec le fichier USDZ, et Android ouvre l’AR avec WebXR dans Chrome, en reprenant vos derniers réglages de matériaux. Dans les deux cas, le suivi de surfaces pose le produit sur une vraie surface, à l’échelle réelle définie par Model Scale. Sur ordinateur, le bouton ouvre une fenêtre avec un QR code pour poursuivre sur téléphone. Pour aller plus loin, lisez notre article sur la WebAR dans l’e-commerce (article en anglais).
Quelle option de partage choisir ?
Les quatre options mènent à la même page en ligne : vous pouvez donc les combiner.
| Option | Ce que vous obtenez | Idéal pour |
|---|---|---|
| Lien public | L’URL de la page en ligne, copiée en un clic | E-mails, messageries et réseaux sociaux |
| QR code | Un fichier PNG à télécharger depuis Share & Embed | Emballages, supports imprimés et présentoirs en magasin |
| Code d’intégration | Une iframe de la page, prête à coller | Votre propre fiche produit ou boutique en ligne |
| Bouton AR | View in AR sur téléphone, une fenêtre avec un QR code sur ordinateur | Permettre aux acheteurs de voir le produit chez eux |
Comment mesurer les performances de la page ?
Analytics 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. Quick Stats affiche 12 indicateurs, dont Total Views, Unique Sessions, QR Scans, AR Activations, 3D Interactions, Avg View Duration et Bounce Rate. Un entonnoir de conversion suit le parcours des visiteurs, de la consultation à l’interaction 3D, puis à la fenêtre du QR code et à l’AR, et Export PDF enregistre un rapport. Consultez la documentation Analytics.
Quels outils gratuits utiliser avant de vous connecter ?
BASE BROS propose deux outils gratuits qui ne demandent aucun compte et n’envoient jamais votre fichier sur un serveur :
- Quick View ouvre instantanément un fichier .GLB de 50 Mo maximum dans la visionneuse du Studio, avec le panneau Material pour l’inspecter.
- Model Optimizer affiche un fichier .GLB de 150 Mo maximum (50 Mo sur les écrans de 1024 px de large ou moins) à quatre niveaux de détail, avec le nombre réel de triangles, convertit les textures en WebP ou PNG en 1K ou 2K, ajoute la compression Draco et télécharge le fichier allégé.
Combien coûte BASE 3D-AR Studio ?
La tarification se fait par modèle, et un modèle généré par IA coûte le même prix qu’un fichier .GLB importé :
- Free : 0 $, sans carte bancaire, jusqu’à 3 modèles en ligne et 3 nouveaux modèles par mois, avec un filigrane Powered by BASE sur les pages et les intégrations. L’édition, l’AR, la publication et les téléchargements sont inclus.
- Pro : 0,50 $ par modèle et par mois (tarif de lancement), avec un minimum de 20 $ par mois pour 40 modèles. Choisissez une capacité de 40 à 2 000 modèles, facturée chaque mois et à l’avance, sans filigrane.
- Enterprise : tarif et capacité personnalisés, projets 3D sur mesure réalisés par l’équipe BASE BROS et support dédié.
La page des tarifs indique le prix mensuel en fonction du nombre de modèles dont vous avez besoin.
Questions fréquentes
Les acheteurs ont-ils besoin d’une application pour voir le produit en AR ?
Non. Sur iPhone et iPad, le bouton AR ouvre Apple AR Quick Look avec un fichier USDZ, et sur Android, il ouvre l’AR avec WebXR dans Chrome ; dans les deux cas, le produit est posé sur une vraie surface, à l’échelle réelle. Sur ordinateur, un QR code s’affiche pour ouvrir la page sur un téléphone.
Quel format de fichier 3D peut-on importer dans BASE 3D-AR Studio ?
Le Studio accepte les fichiers .GLB de 50 Mo maximum. Les formats FBX, OBJ et STL ne sont pas pris en charge : convertissez ces fichiers en GLB dans votre logiciel 3D avant de les importer.
Peut-on créer une page produit 3D sans fichier 3D ?
Oui. Le 3D Generator crée un modèle à partir d’un prompt textuel ou de photos du produit, avec six moteurs d’IA : Meshy, Tripo, Rodin, Hunyuan, TRELLIS et Pixal3D. Le nouveau modèle obtient automatiquement sa propre page 3D-AR en ligne.
Peut-on intégrer la page 3D-AR à sa boutique en ligne ?
Oui. Copiez le code d’intégration depuis la fenêtre Share & Embed et collez-le dans votre site sous forme d’iframe standard. Pour que l’AR fonctionne dans l’iframe, le site doit être en HTTPS.
BASE 3D-AR Studio est-il gratuit ?
Oui. L’offre Free ne demande aucune carte bancaire et comprend 3 modèles en ligne et 3 nouveaux modèles par mois, avec un filigrane Powered by BASE sur les pages et les intégrations. Pro coûte 0,50 $ par modèle et par mois, avec un minimum mensuel de 20 $ pour 40 modèles.
Conclusion
Avec le Studio, une page produit 3D et AR se crée en quatre étapes : ajoutez un modèle, peaufinez-le, cliquez sur Save, puis partagez le lien, le QR code ou le code d’intégration. Commencez gratuitement, découvrez les cas d’usage par secteur et le Showcase des projets de marques, ou contactez l’équipe BASE BROS pour un projet 3D sur mesure ou une capacité Enterprise. Pour comparer les solutions BASE BROS, lisez Solutions BASE BROS : visionneuse 3D, configurateur, IA et AR.