26 avril 2022

Le guide complet de l’intégration web 3D et comment l’utiliser

Un aperçu détaillé de l’intégration WebAR 3D et de son utilisation.

L’une des fonctionnalités phares de Vectary est l’intégration web en AR. Voici un aperçu détaillé de ce qu’est l’intégration WebAR 3D et de la manière de l’exploiter pour atteindre vos objectifs commerciaux.

Si vous ne maîtrisez aucun langage de programmation, l’intégration web ne fait peut-être pas encore partie de votre vocabulaire, mais cela va changer. Une intégration web, ou fichier intégré, correspond à tout type de média s’insérant simplement sur votre site web via un copier-coller de code HTML ou de script.

Que vous souhaitiez enrichir un article de blog, ajouter un élément interactif à votre site, faire essayer vos produits en AR à vos clients ou valoriser un passage d’article grâce à un élément graphique issu de réseaux sociaux populaires, l’intégration web apporte une immense valeur ajoutée à votre site et à vos visiteurs.

Aujourd’hui, les internautes croisent des intégrations web au quotidien. Elles prennent la forme de publications sur les réseaux sociaux, d’encadrés sur des sites d’actualités et bien d’autres. YouTube est sans doute l’un des exemples d’intégration les plus connus : pour insérer une vidéo dans un article de blog, on copie-colle généralement un bout de code disponible sous la vidéo. Les projets 3D prennent désormais exactement le même chemin.

Exemple d’intégration web en 3D et AR

L’image ci-dessous est un viewer 3D interactif de Vectary : on l’appelle WebAR car il combine l’élément web 3D et l’expérience en réalité augmentée. Faites-le pivoter ou cliquez sur l’icône AR pour le voir en réalité augmentée :

Comment préparer une intégration WebAR dans Vectary

Étape 1 : créez un objet 3D ou une scène 3D

Pour intégrer un objet sur un blog ou un site web, déterminez d’abord l’emplacement souhaité pour l’élément. Vous pourrez ainsi préparer votre intégration pour qu’elle s’insère harmonieusement au design de votre page. Il existe plusieurs façons de créer un projet 3D adapté au web.

Importez votre propre modèle 3D

Si vous avez déjà de l’expérience en modélisation 3D, vous disposez sûrement déjà de modèles et de fichiers prêts pour votre intégration web 3D. Importez-les simplement dans Vectary et attendez qu’ils se chargent. Nous prenons actuellement en charge plus de 60 formats de fichiers, dont : .obj, .dae, .stl, .gltf, .glb, .jpg, .png, .svg. Découvrez la liste complète de tous les formats pris en charge ici.

Utilisez la bibliothèque et accédez à des répertoires 3D ou à des collections prêtes à l’emploi

Pour les débutants en modélisation 3D, nous avons conçu des collections thématiques regroupant des assets, des matériaux et des environnements. Une fois votre choix fait, glissez-déposez l’élément sur la scène et lancez la génération de l’intégration.

Créez un projet à partir de zéro

Pour les utilisateurs chevronnés, Vectary propose une modélisation de maillage intuitive en mode Edit. Tout comme pour l’importation de projets, créez votre modèle de toutes pièces ou modifiez un élément existant, qu’il soit importé ou issu de la bibliothèque. Une fois votre modélisation 3D terminée, lancez la génération de votre code d’intégration.

Étape 2 : comment générer un code d’intégration web 3D

Une fois votre projet et votre objet 3D prêts, la création du code d’intégration WebAR est un jeu d’enfant. Vectary s’occupe de tout : cliquez simplement sur le bouton Share, puis activez l’option Share to web. Un code iframe est alors généré, prêt à être inséré dans votre code HTML.

Paramètres d’intégration web 3D de Vectary

Personnalisez le rendu de votre intégration depuis le menu avancé :

Qualité des textures

La qualité des textures est le paramètre le plus déterminant pour votre intégration. Des textures très détaillées demandent plus de temps de génération et risquent de ralentir les performances de votre site web. À l’inverse, des textures de résolution inférieure se chargent plus rapidement. Réduisez au besoin la qualité de chaque texture utilisée dans vos matériaux de manière individuelle.

Réalité augmentée

Ajoutez la réalité augmentée depuis le menu Advanced du panneau des propriétés de projet dans Vectary Studio. Les fichiers requis pour les différentes plateformes (Android, iOS) sont générés automatiquement en arrière-plan.

Centrer la vue de la caméra

Pour centrer la caméra sur votre objet principal, assurez-vous d’abord d’avoir activé la caméra (indiquée par l’icône “+” à côté du nom de la caméra). Cliquez ensuite sur l’objet (ou le groupe d’objets), puis sur l’icône de cadrage de la vue dans la barre d’outils du bas (raccourci clavier “a”). Cela centrera le point de pivot de la caméra sur les objets sélectionnés (si aucun élément n’est sélectionné, la caméra se centrera au milieu de la scène). Zoomez, utilisez le panoramique et pivotez pour ajuster la vue.

Vue caméra limitée

Ajoutez une caméra à votre scène depuis la barre d’outils. Votre projet pouvant inclure plusieurs caméras, vous devez “entrer” dans celle de votre choix pour appliquer ses paramètres au projet partagé. Sélectionnez votre caméra et modifiez ses réglages dans le panneau de droite. Activez l’option View Limits (interrupteur) pour restreindre les angles de vue, le panoramique et le zoom. Cliquez sur Preview pour tester vos nouveaux réglages. Pour centrer la caméra sur votre objet principal, assurez-vous d’abord d’avoir activé la caméra (indiquée par l’icône “+” à côté du nom de la caméra). Cliquez ensuite sur l’objet (ou le groupe d’objets), puis sur l’icône de cadrage de la vue dans la barre d’outils du bas (raccourci clavier “a”). Cela centrera le point de pivot de la caméra sur les objets sélectionnés (si aucun élément n’est sélectionné, la caméra se centrera au milieu de la scène). Zoomez, utilisez le panoramique et pivotez pour ajuster la vue.

Effets (web uniquement)

Si vous avez activé le Ground plane ou un éclairage projetant des ombres, ajoutez l’effet Soft Shadows depuis la liste des effets. L’effet Ambient Occlusion apporte également des ombres et du relief à vos objets 3D : il est calculé en temps réel, tout comme Reflections.

Étape 3 : prévisualisez l’intégration WebAR

Il est parfois utile de prévisualiser votre viewer WebAR avant de l’intégrer, ou de simplement partager l’aperçu en réalité augmentée avec vos collègues et vos clients. Allez dans Share, cliquez sur Share to web, copiez le lien direct et ouvrez-le dans un nouvel onglet.

Étape 4 : insérez l’intégration web dans le code de votre site

Copiez et collez simplement l’intégration web sur votre site depuis la section Share. Le principe est le même que pour le code d’intégration YouTube. Intégrez également vos fichiers sur des plateformes comme Squarespace, Wix, Shopify, Weebly, ou d’autres plateformes similaires.

https://www.vectary.com/uploads/media-library/embeding.jpg-0u5XFVh92xgWzs0qWjbuvb.jpeg

Comment modifier le code d’intégration web 3D

Les utilisateurs familiers avec le code HTML peuvent modifier le code de l'iframe généré. Pour l'instant, seuls les paramètres de base tels que la largeur, la hauteur et la bordure peuvent être modifiés. À l'avenir, le code d'intégration offrira davantage d'options de personnalisation et de modification. Elles seront accessibles sans aucune compétence en programmation. Par exemple, si vous souhaitez redimensionner votre intégration pour qu'elle s'adapte parfaitement à votre site web, modifiez les attributs “width” et “height” selon vos besoins. Nous vous recommandons de conserver framerborder à la valeur “0” pour que l'objet s'intègre parfaitement à l'arrière-plan.

Étape 4 : Comment modifier la visionneuse 3D sur votre site web

Les objets intégrés sur le site web sont le résultat final de designs 3D créés dans l'éditeur Vectary. Cependant, Vectary va plus loin et vous permet de modifier vos projets WebAR déjà intégrés en temps réel. Ouvrez le projet dans Vectary, effectuez vos modifications et actualisez-le à côté des paramètres Share to web. Toutes les modifications s'appliqueront instantanément.