L’art de digitaliser sa marque personnelle
Développer sa communication digitale, son personal branding, peut passer par l’intégration de visites virtuelles à l'aide de photos 360 originales dans votre site web ou sur les réseaux sociaux. Notre article met à votre disposition un “Savoir-Faire" : Comment intégrer du contenu de réalité virtuelle 360° pour agrémenter et enrichir notre site internet?
Pour cela, nous avons des projets abouties en pour les webmaster, et pour les community manager des plates-formes d’intégration.Les projets de VR pour le web sont de plus en plus aboutis, le tout quasiment normalisé afin de ne pas trop se compliquer la tâche. Les projets à destination des webmasters/intégrateurs sont nombreux : A-Frame, Embed 360, WebGL, Facebook, etc..
Les CMS comme WordPress sont aussi de la fête et permettent l’intégration de visites virtuelles photos et vidéos : WP VR – 360 Panorama and Virtual Tour Builder, MomentoPress for Momento360, Algori 360 Image, etc…
Par ailleurs, Mozilla très actif dans ce domaine propose d’autres projets si vous souhaitez aller plus loin(3D animation, jeux, stories VR,etc..). Tous ces projets sont “open” et donc modifiables selon vos envies et vos connaissances.
A-Frame
L’exemple de cet article intègrera A-Frame, le plus complet! Il permet même le développement d’une interface de navigation complète en VR. A-Frame est un canva web pour construire et publier des expériences de réalité virtuelle avancée ou non.
Quelques éléments de cette bibliothèque VR :
- Réalité virtuelle simplifiée: A-Frame gère la configuration 3D et WebVR requise pour le multi plates-formes, y compris le mobile, le bureau, Vive et Rift en déclarant <a-scene>.
- HTML déclaratif: A-Frame peut être utilisé à partir de HTML, A-Frame est accessible à tous: développeurs web, fans de VR, éducateurs, artistes, fabricants, enfants.
- Cross-Platform: Créez des applications VR pour Vive, Rift, Daydream, GearVR et Cardboard. Vous n’avez pas un casque ou des contrôleurs? Pas de problème! A-Frame fonctionne toujours sur les ordinateurs de bureau et les smartphones standard.
Architecture de l”entité-composante: A-Frame est un canvas, fournissant une structure composant déclarable, réutilisable pour three.js. Les développeurs ont un accès à JavaScript, API DOM, tree.js, WebVR et WebGL.- Performance: Optimisé au départ pour WebVR. Il utilise le HTML, donc il ne touche pas le moteur de rendu du navigateur. Tous les objets 3D sont alloués en mémoire.
- Tool Agnostic: A-Frame fonctionne avec les API de JavaScript JavaScript normales et donc avec toutes les bibliothèques telles que React, Vue.js, jQuery ou d3.js. Les développeurs Web sont chez eux.
- Inspecteur visuel: A-Frame fournit un inspecteur 3D visuel intégré similaire aux outils de développement d’un navigateur et à une interface similaire à Unity. Ouvrez toute scène A-Frame et appuyez sur + + i.
- Registre: Réutilisez les composants de la communauté créés et partagés. Branchez les composants directement à partir du HTML.
- Caractéristiques: intègre des composants tels que des formes géométriques, les matériaux, les lumières, les animations, les modèles, de la réflexion, les ombres, l”audio positionnel, les commandes Vive / Touch / Cardboard. Avec les composants de la communauté, rajoutez des éléments tels que les systèmes de particules, de la physique, du multi-utilisateurs, des océans, des montagnes, la reconnaissance vocale…
Sur le site de A-Frame, vous avez différent exemple d’intégration selon vos desiderata. Fini la simple photo/vidéo d’agrément d’un site, interagissez avec vos internautes, offrez-leur de la profondeur, une expérience différente et démarquez-vous de la concurrence. Votre Personal Branding se portera mieux ! Vous proposez à vos interlocuteurs une expérience innovante.
Pour commencer, il vous faut le package délivré via Github. Après l’avoir récupéré, vous déployez sur vote site, le répertoires suivant “panorama”, trouvé ici :
- Z:\~MONSTOCKAGE~\aframe-master\aframe-master\examples\boilerplate\panorama
Puis vous retournez dans le répertoire “dist” à la racine du projet, et vous récupérez le fichier “aframe-master.js”, et vous le collez dans le répertoire que nous avons précédemment récupéré,“panorama”.
Votre répertoire doit être comme-ci :
Mettez cette page en ligne et constatez le résultat, car cela ne fonctionne pas en local sur votre ordinateur.
Vous pouvez en profiter pour modifier la photo à afficher. Vous publiez le tout, et hop! Votre première photo 360 est en ligne!
Le code est basique. Un peu de familiarisation. Dans mon, nous connaissons déjà.
Dans mon, de nouvelles balises déclaratives. le canvas qui va afficher notre contenu dynamique 2D/3D. le contenu de mon “ciel”, il s’agit d’un image 360 une balise au même titre qu’un Chaque balise possède plusieurs attributs classiques (width, height, border, etc…) et de nouveaux (position, rotation, etc…). Toutes les informations sont à retrouver sur le site de A-frame.
Rien de plus! Avec quelques
Autres solutions vr 360°
Pour les Community Manager qui souhaitent intégrer de la 360, il existe une solution “quasi” prête à l’emploi, Delight VR .Vous vous inscrivez, vous obtenez une clé et un bout de code à insérer, et hop! C’est prêt! Moins de code à faire, moins gourmand en ressource, il peut être une bonne alternative. Delight permet lui de traiter différents types de photo VR selon leur format de sortie brute (formats stéréo / mono 360/180 équidistants et sphériques courants). Le produit est devenu payant mais la solution est de loin la meilleure.
STEREO 180 LR: Une photo “equi-rectangulaire” stéréo à 180 degrés, l’œil gauche et droit distincts.
STEREO_180_LR_SPHERICAL: Une photo sphérique stéréo à 180 degrés, l’œil gauche et droit distincts.
STEREO 180 TB: une photo “equi-rectangulaire” stéréo à 180 degrés, l’œil gauche et droit étant respectivement en haut et en bas.
STEREO_180_TB_SPHERICAL: Une photo sphérique stéréo à 180 degrés, l”œil gauche et droit étant respectivement en haut et en bas.
STEREO 360 TB: Une photo “equi-rectangulaire” stéréo à 360 degrés, l”œil gauche et droit étant respectivement en haut et en bas.
STEREO 360 LR: Une photo “equi-rectangulaire” stéréo à 360 degrés, l’œil gauche et droit distincts.
MONO 360: Un photo mono amine mono de 360 degrés.
STEREO CUBEMAP: une zone cubique stéréo à 360 degrés. 6 côtés pour chaque œil (src-left et src-right pour ce format). Ce format est généralement exporté depuis le processeur Octane VR.
CARDBOARD PHOTO: photo prise avec l’application Carton Camera. Il s’agit généralement d’un
Youtube, Dailymotion, Facebook, Flickr VR propose des solutions de publications inscrutable dans les contenu de votre site. Là, c’est simple. Publiez, partargez, et hop! En ligne.
Une solution pour se démarquer, faire prospérer sa marque personnelle, de développer une approche originale pour le personal branding. Pourquoi de ne pas faire des « little planet », avec Weer.tv (casque nécessaire dans certains cas), sur Instagram si votre domaine de compétence vous le permet
Comme vous pouvez le constater l’intégration est prévue pour la présentation de contenu photo ou vidéo 360 pour de la réalité virtuelle avec ou sans casque. La documentation des solutions vr est assez bien faite et le tout reste accessible. Ma préférence va vers A-Frame… Les mains dans le cambouis pour un résultat à la hauteur de nos attentes, et offrant de nombreuses possibilités en 2D, 3D et scénique.
Pour WordPress, je vous conseille pour le même résultat l’extension Algori 360 Image.
Cette extension intègre un bloc <360° image> à glisser/déposer dans le corps du texte. Un must de rapidité en termes d’intégration, par contre laissez tomber les options de paramétrages.
Pour mettre une photo 360 dans le contenu de WordPress à destination de votre webmarketing, il suffit d’installer l’extension Algori 360. Et maintenant dans les bloc à ajouter vous aurez le bloc 360 Image. Intégrer le simplement du monde.
Pour conclure, trouvez la solutions qui convient à votre environnement de développement et de votre domaine de compétence pour mettre en place de cette solution qui boostera votre personal branding.