tutorial - creation d`une visite virtuelle avec pano2vr

TUTORIAL - CREATION D’UNE VISITE VIRTUELLE AVEC PANO2VR
Ce tutorial va expliquer comment créer en quelques minutes une visite virtuelle avec le logiciel Pano2VR.
Avant de créer une visite virtuelle, il faut au préalable avoir assemblé plusieurs panoramas sphériques et
disposer pour chaque panorama soit d’une image équirectangulaire soit des 6 faces du cube.
Pour ce tutorial, nous sommes partis de 3 panoramiques sphériques pris dans l'aitre de Brisgaret à
Montivilliers (Seine-Maritime). Pour chaque panoramique sphérique, nous disposons d’une image
équirectangulaire de taille 5996 x 2998 pixels.
1ère étape : Ouvrir un nouveau répertoire
La première chose à faire est la création d’un nouveau répertoire (ou dossier) que nous appellerons
‘aitre_brisgaret’
Glissons dans ce répertoire, nos 3 images équirectangulaires.
Tutorial sur la création d’une visite virtuelle avec Pano2VR
Page 1
2ème étape : Régler les préférences du logiciel Pano2VR
Ouvrir le logiciel Pano2VR et ouvrir les préférences. Vérifier que dans ‘Hotspots’ la case est décochée
Tutorial sur la création d’une visite virtuelle avec Pano2VR
Page 2
3ème étape : Traitement du premier panoramique sphérique
Glisser-déposer la première image équirectangulaire dans la croix
Sélectionner comme format de sortie le Flash (si on veut utiliser le format QuickTime : voir annexe)
Tutorial sur la création d’une visite virtuelle avec Pano2VR
Page 3
La fenêtre suivante s’affiche.
Renseigner les différents champs :
- taille des faces : pour un affichage en plein écran, mettre une valeur entre 1500 et 1900,
- qualité de l’image : mis ici à 70
- sous-titres : 3
- taille de la fenêtre : 800 x 600 pixels
- modèles : sélectionner un modèle. Ici j’ai sélectionné un modèle avec un radar
- format : utiliser le format Flash 9 bien meilleur que le Flash 8
Tutorial sur la création d’une visite virtuelle avec Pano2VR
Page 4
Cliquer sur l’onglet ‘Paramètres avancés’. La fenêtre suivante s’affiche
Ici peu de choses à régler (les valeurs par défaut vont bien). La seule chose éventuellement à régler est le
type de prévisualisation qui permet de déterminer comment s’affichera rapidement le panoramique
sphérique pendant le chargement. Ici on a choisi de faire une prévisualisation en échelle de gris. On peut
choisir un affichage en sépia ou en couleurs.
Reste à cliquer sur l’onglet ‘HTML’.
Sur cet écran, il n’y a qu’à cocher la case ‘Activer le fichier HTML’ et de choisir le modèle permettant
un affichage plein écran ‘fullscreen.ggt’.
Tutorial sur la création d’une visite virtuelle avec Pano2VR
Page 5
Cliquer sur le bouton ‘OK’. Le système affiche le message suivant. Cliquer sur ‘Oui’ pour lancer la
création du fichier Flash.
Le système affiche la taille du fichier Flash créé. Il faut que la taille soit autour de 2 Mo sans dépasser 3
Mo pour un affichage en plein écran. Ici la taille est 2,6 Mo ce qui est correct. Si la taille est supérieure à
3 Mo, cliquer sur l’icône en forme d’outil et diminuer la taille du cube et/ou la qualité.
Renseignons quelques informations générales sur le panoramique.
En cliquant sur le bouton ‘Modifier’, la fenêtre suivante s’affiche
Tutorial sur la création d’une visite virtuelle avec Pano2VR
Page 6
Il nous reste à créer les hotspots
En cliquant sur le bouton ‘Modifier’, la fenêtre suivante s’affiche.
Cliquer sur le bouton ‘Oui’ : il s’affiche alors
Tutorial sur la création d’une visite virtuelle avec Pano2VR
Page 7
Créons notre premier hotspot en renseignant les champs
- Titre : titre du hotspot ‘Vers la chapelle’
- Url : nom du script html permettant de lancer le panoramique vers lequel on veut aller (ici le 2ème
panoramique de la série)
- Cible : mettre toujours ‘_self’ (avec un tiret de soulignement)
Reste à localiser sur l’image équirectangulaire la position du hotspot
Pour ce faire, il est possible d’utiliser divers outils. Ici, on utilise l’outil ‘Rectangle au coin arrondi’.
Tutorial sur la création d’une visite virtuelle avec Pano2VR
Page 8
La position du hotspot est matérialisé par la zone en rouge.
Voilà le premier hotspot est créé !!
Il faut maintenant créer un 2ème hotstop pour pouvoir aller vers notre 3ème panoramique.
Cliquons sur l’icône permettant d’ajouter un nouveau hotspot. Le système affiche alors la fenêtre
suivante.
Entrons les caractéristiques du 2ème hotspot
Et sa localisation. On utilise ici un second outil permettant de dessiner un polygone. A noter que le
premier hotspot n’est plus en rouge mais en bleu (cela indique qu’il n’est pas actif).
Tutorial sur la création d’une visite virtuelle avec Pano2VR
Page 9
Dessinons la position du 2ème hotspot
Le second hotspot est créé. Il reste à cliquer sur le bouton ‘OK’ pour revenir à l’écran principal de
Pano2VR
Tutorial sur la création d’une visite virtuelle avec Pano2VR
Page 10
Important : ne pas oublier de cliquer sur l’icône ‘Tous crée’ pour sauvegarder toutes les modifications
faites.
Cliquer sur le bouton ‘OK’.
Il ne reste plus qu’à sauvegarder le projet (menu ‘Fichier’ et ‘Sauvegarder’) pour pouvoir faire des
modifications éventuelles ultérieurement. Le système affiche la fenêtre. Cliquer sur le bouton ‘Save’
Tutorial sur la création d’une visite virtuelle avec Pano2VR
Page 11
Dans le répertoire créé au début, 5 nouveaux fichiers ont été créés
- aitre_brisgaret1.swf : c’est le panoramique sphérique au format Flash
- aitre_brisgaret1.html : c’est le script html permettant de lancer le panoramique avec affichage en plein
écran
- aitre_brisgaret1_hs.png : c’est le fichier contenant la position des hotspots
- aitre_brisgaret1.p2vr : c’est l’ensemble de la sauvegarde des informations entrées dans Pano2VR
- p2q_embed_object.js : c’est un utilitaire pour lancer le panoramique en Flash
Tutorial sur la création d’une visite virtuelle avec Pano2VR
Page 12
4ème étape : Traitement du second panoramique sphérique
Il reste à faire le même traitement pour le 2ème panoramique
Création du fichier Flash
Création du 1er hotspot
Tutorial sur la création d’une visite virtuelle avec Pano2VR
Page 13
Création du 2ème hotspot
Ne pas oublier de sauvegarder en cliquant sur le bouton :
Contenu du répertoire après la création du 2ème panoramique
Tutorial sur la création d’une visite virtuelle avec Pano2VR
Page 14
5ème étape : Traitement du troisième panoramique sphérique
Il reste à faire le même traitement pour le 3ème panoramique
Création du fichier Flash
Création du 1er hotspot
Tutorial sur la création d’une visite virtuelle avec Pano2VR
Page 15
Création du 2ème hotspot
Ne pas oublier de sauvegarder en cliquant sur le bouton :
Contenu du répertoire après la création du 3ème panoramique
Tutorial sur la création d’une visite virtuelle avec Pano2VR
Page 16
6ème et dernière étape : Mise en ligne sur internet
Parmi les fichiers du répertoire, seuls les fichiers surlignés en bleu sont à mettre en ligne dans un espace
de stockage sur internet
En final, dans le répertoire de l’espace stockage internet, on doit avoir les fichiers suivants
Pour tous questions ou commentaires, laisser un message dans le forum Panophoto.org à cette adresse :
voir lien
Merci.
Gibie – 28 Juin 2008
Tutorial sur la création d’une visite virtuelle avec Pano2VR
Page 17
ANNEXE – Compléments si on désire une sortie au format QuickTime
Pano2VR permet également une sortie en format QuickTime. Dans cette annexe, nous allons voir ce qui
change dans le tutorial précédent si on désire une sortie au format QuickTime.
Le premier changement porte sur la création du fichier QuickTime (lors de la 3ème étape)
Glisser-déposer la première image équirectangulaire dans la croix
Sélectionner comme format de sortie le QuickTime.
Tutorial sur la création d’une visite virtuelle avec Pano2VR
Page 18
La fenêtre suivante s’affiche.
Renseigner les différents champs :
- Taille Face cubique : pour un affichage en plein écran, mettre une valeur entre 1500 et 1900,
- Qualité Image : mis ici à 70
- Sous-Blocs : 3
- Taille Fenêtre : 800 x 600 pixels
- Qualité Mouvement : Haut
- Qualité Statique : Max
- Type Prévisualisation : Echelle de gris. On peut aussi choisir un affichage en sépia ou en couleurs.
Reste à cliquer sur l’onglet ‘HTML’.
Sur cet écran, il n’y a qu’à cocher la case ‘Activer le fichier HTML’ et de choisir le modèle permettant
un affichage plein écran ‘fullscreen.ggt’.
Tutorial sur la création d’une visite virtuelle avec Pano2VR
Page 19
Cliquer sur le bouton ‘OK’. Le système affiche le message suivant.
Cliquer sur ‘Oui’ pour lancer la création du fichier Flash.
Le système affiche la taille du fichier Quicktime créé. Il faut que la taille soit autour de 2 Mo sans
dépasser 3 Mo pour un affichage en plein écran. Ici la taille est 2,7 Mo ce qui est correct. Si la taille est
supérieure à 3 Mo, cliquer sur l’icône en forme d’outil et diminuer la taille du cube et/ou la qualité.
Il reste à renseigner sur les informations générales sur le panoramique et à créer les hotspots. Cela se fait
exactement de la même façon que pour la version Flash.
Après la création des 2 hotspots, il ne reste plus qu’à sauvegarder le projet (menu ‘Fichier’ et
‘Sauvegarder’) pour pouvoir faire des modifications éventuelles ultérieurement. Le système affiche la
fenêtre. Cliquer sur le bouton ‘Save’
Dans le répertoire créé au début, 5 nouveaux fichiers ont été créés
- aitre_brisgaret1.mov : c’est le panoramique sphérique au format QuickTime
- aitre_brisgaret1.html : c’est le script html permettant de lancer le panoramique avec affichage en plein
écran
- aitre_brisgaret1_hs.png : c’est le fichier contenant la position des hotspots
- aitre_brisgaret1.p2vr : c’est l’ensemble de la sauvegarde des informations entrées dans Pano2VR
- p2q_embed_object.js : c’est un utilitaire pour lancer le panoramique en QuickTime
Tutorial sur la création d’une visite virtuelle avec Pano2VR
Page 20
En final après avoir fait le traitement sur les 3 panoramiques, le répertoire contenu au début du tutorial
contiendra les fichiers suivants
Parmi les fichiers du répertoire, seuls les fichiers surlignés en bleu sont à mettre en ligne dans un espace
de stockage sur internet
En final, dans le répertoire de l’espace stockage internet, on doit avoir les fichiers suivants
Voilà c’est fini !!
Tutorial sur la création d’une visite virtuelle avec Pano2VR
Page 21