Quels sont les prérequis ?
Pour réaliser la visite virtuelle, vous aurez besoin :
- d’un smartphone (ou d’une tablette) avec un appareil de bonne qualité pour prendre les photos sphériques ;
- de l’application Google Street View sur votre smartphone ;
- d’un ordinateur équipé du navigateur Chrome ou Firefox ;
- d’une quarantaine de minutes pour créer la visite virtuelle ;
- d’un espace sur le web en parallèle de votre site pour mettre en ligne votre visite virtuelle et la rendre visible à vos visiteurs (par exemple accessible en FTP).
Pour quoi faire ?
La visite virtuelle permettra à vos visiteurs depuis leur smartphone, tablette ou ordinateur de se déplacer virtuellement dans un lieu, tout en suivant les flèches de navigation que vous aurez choisies. Ils accèderont également à des informations que vous pouvez ajouter pour décrire une pièce ou un objet.
Voici un exemple réalisé en une petite heure : environ 2 minutes pour chacune des sept photos sphériques, quelques minutes pour les charger sur l’ordinateur et une demi-heure de création de la visite virtuelle.
Consultez la visite virtuelle réalisée par le lycée Alfred de Musset de Villeurbane
1. Scénariser la visite virtuelle
Pour gagner du temps, il faut réfléchir à plusieurs éléments importants avant de se lancer :
- quelles pièces voulez-vous présenter ? Dans quel ordre ?
- à quel(s) endroit(s) de la pièce souhaitez-vous prendre la prise de vue ?
- quelle sera la position de départ de la visite virtuelle ?
- quelle sera l’image affichée lors de l’entrée dans chacune des pièces ?
- sur les photos sphériques : où positionner les flèches de navigation pour changer de pièce ?
- où placer les bulles d’information (pour décrire une pièce, une machine ou autre) ?
2. Prendre les photos sphériques
Une photo sphérique est composée d’une cinquantaine de photographies. Ces photos iront du sol au plafond sur 360 degrés pour permettre à l’utilisateur d’avoir une vue complète de la pièce, dans toutes les directions.
L’application Google Street View permet de réaliser ces photos très facilement. Il faut compter environ deux à trois minutes par photo.
2.1 Télécharger l’application
Télécharger l’application dans le magasin d’application de votre téléphone ou tablette.
2.2 Lancer l’application
Lancer l’application Google Street View, appuyer en bas sur le bouton et choisir "Prendre une photo-sphère".
Vous devez maintenant suivre les instructions de l’application et prendre une cinquantaine de photos.
Vous devez orienter le smartphone dans toutes les directions en plaçant les ronds oranges dans le rond blanc affiché sur l’écran. L’application prendra environ 50 photos. Il faut éviter de changer de place et juste tourner sur soi-même. L’application vous demandera de prendre des photos tout autour de vous, ainsi que vers le plafond et vers le sol (en se déplaçant légèrement lors de la dernière photo au centre du sol, pour éviter de voir vos pieds).
Une fois toutes les photos nécessaires prises, le rond en bas de l’application devient vert. Il faut appuyer dessus pour que la photo s’enregistre.
L’application Google Street View propose dans le menu (en haut à droite sur iOS) une option pour "Détecter et flouter les visages".
3. Transférer les photos-sphériques sur un ordinateur
Il ne faut surtout pas publier votre photo sur Google Street View sinon, elle sera visible de tous. Il faut cliquer sur l’icône noire "Partager" et choisir "Partager en privé".
Ensuite, vous devez choisir une méthode pour transférer les photos sur votre ordinateur, par exemple :
- par courriel ;
- via une messagerie instantanée ;
- sur un cloud ;
- avec un système de partage rapide de fichiers, comme Apple Airdrop.
Ce fichier correspond à une photo classique au format JPEG, proportion 2:1 mais dont l’image est déformée. Vous pouvez y apporter de légères modifications, par exemple flouter des zones. Evitez de la recadrer ou d’y apporter des annotations sinon elles seront déformées et illisibles dans le résultat final.
4. Créer la visite virtuelle
4.1 Lancer l’application Marzipano Tool
Maintenant que vous avez les photos sphériques, vous pouvez accéder à l’application en ligne MarziPano Tool.
Il s’agit d’une application qui s’exécute uniquement dans le navigateur. Aucune photo ne sera envoyée en ligne mais uniquement traitée par votre navigateur.
Attention : il n’est pas possible d’enregistrer votre travail : si vous fermez le navigateur, vous perdrez le travail en cours et vous devrez le recommencer. Soit il faut conserver le navigateur ouvert, soit l’achever en une seule fois. Vous pouvez aussi réaliser plusieurs visites virtuelles.
Vous pourrez cependant apporter de légères modifications (corrections orthographiques par exemple) dans le fichier "data.js" généré.
4.2 Charger les photos
Lors de l’ouverture de Marzipano Tool, vous devez charger une première photo sphérique.
4.3 Paramétrer et organiser la visite virtuelle
Il vous reste maintenant à configurer la visite virtuelle :
- définir son nom en cliquant sur le crayon.
- choisir les paramètres :
- conserver le mode "Drag" activé qui permet un déplacement plus lent que QTVR mais avec un déplacement à la souris ;
- conserver "Autorotate" activé ;
- désactiver éventuellement "View control buttons" pour alléger l’interface ;
- conserver "Fullscreen button" activé pour permettre aux utilisateurs de passer en plein écran.
Ensuite, vous pouvez ajouter autant de photos-sphériques que vous souhaitez, tout en pensant à les renommer et à les organiser dans l’ordre souhaité.
4.4 Organiser les déplacements dans la visite virtuelle
4.4.1 L’image de départ
Vous devez définir l’image de départ de la visite virtuelle dans chaque pièce. Il faut juste positionner la visite virtuelle à l’endroit souhaité et cliquer sur "Set initial view". Vous pouvez désactiver l’option "Autorotate" pour éviter les mouvements.
4.4.2 Définir les flèches de navigation
En cliquant sur "Link Hotspot", vous pouvez positionner des flèches dans votre visite virtuelle pour changer de pièce ou de vue (si vous avez plusieurs photo-sphérique pour une même pièce).
Vous pouvez réaliser plusieurs actions :
- déplacer la flèche pour la positionner à l’endroit désiré ;
- orienter la flèche pour la diriger dans la direction souhaitée ;
- supprimer la flèche ;
- définir la cible vers laquelle va mener cette flèche.
4.4.3 Définir des points d’information
En cliquant sur "Info hotspot", vous ajouter un élément sur le photo qui apportera une information au visiteur, pour décrire une pièce, une machine... ou apporter toute autre précision au visiteur.
Vous pouvez réaliser plusieurs actions :
- déplacer le point d’information pour la positionner à l’endroit désiré ;
- définir le titre de ce point d’information ;
- définir la description de ce point d’information ;
- supprimer le point d’information.
4.5 Exporter la visite virtuelle
Attention : Je vous rappelle qu’il n’est pas possible d’enregistrer votre travail, par conséquent il vaut mieux créer la visite virtuelle en une seule fois et de conserver les textes utilisés.
Vous pouvez enfin exporter votre visite virtuelle. Vous obtiendrez alors un fichier ZIP qui contiendra l’ensemble des photos, des titres et des scripts javascript.
5. Mettre en ligne votre visite virtuelle
5.1 Héberger votre visite virtuelle
A ce stade, il ne reste plus qu’à décompresser le fichier ZIP et placer son contenu en ligne. Pour cela vous devez disposer d’un hébergement sur le web dans lequel vous déposez ces fichiers.
Si vous êtes un établissement scolaire, les services de la DSI de votre académies doivent pouvoir héberger ces fichiers de visite virtuelle. Il faut alors leur demander un hébergement statique d’environ 100 Mo pour des pages HTML, Javascript et des images JPEG.
Sinon, vous pouvez vous orienter vers des hébergeurs gratuits et sans publicité. Liste non exhaustive et non testé :
5.2 Intégrer votre visite virtuelle
Une fois les fichiers de votre visite virtuelle hébergés, vous pouvez :
- soit donner le lien direct, par exemple : http://monsite.fr/marzipano/visite-du-college/app-files/index.html
- soit intégrer la visite virtuelle directement dans une page web avec un code de ce type-là :
<iframe src="http://monsite.fr/marzipano/visite-du-college/app-files/index.html" width="100%" height="600px"></iframe>
6. Personnalisation et modifications ultérieures
Comme vous avez pu le constater en transférant les fichiers en ligne, l’application Marzipano génère un fichier de configuration "data.js" qui contient l’ensemble du paramétrage de votre visite virtuelle ainsi que tout le texte saisi. Cela peut donc permettre de modifier ou corriger certains éléments sans refaire entièrement la visite virtuelle.
Dans mon exemple, les 7 photos sphériques ont été automatiquement découpées en 449 photos "à plat" de dimensions moindre.
L’ensemble de l’apparence peut être personnalisée en modifiant le fichier "style.css".