Aller à : navigation, rechercher

Panotour Tutoriels - Création d'une visite virtuelle simple et mise en ligne sur Google Drive

Introduction

Ce tutoriel a été créé pour vous montrer comment créer une visite virtuelle très simple, et ensuite comment la mettre en ligne.
Puisqu'il existe beaucoup de serveurs webs différents, avec encore plus de variété dans les interfaces virtuels pour y accéder, il serait donc impossible de tous les documenter. Nous avons décidé d'utiliser un serveur gratuit pour ce didacticiel, qui est facile à utiliser et qui vous servira de base pour l'appliquer sur votre propre serveur web : Google Drive.


Veuillez noter que l'utilisation de Google Drive est simplement un exemple, et qu'il existe beaucoup d'autres solutions de serveur web que vous pourrez essayer, certaines gratuites et d'autres payantes, qui seront plus ou moins appropriés à votre utilisation. L'utilisation de Google Drive n'est pas recommandé pour des projets professionnels.

Important: Google Drive cesse d'héberger les pages web à partir du 31 août 2016. If faudra trouver un autre hébergeur d'ici-là.
Si vous n'avez pas de serveur, vous pouvez tester Amazon Simple Storage Servers. Vous en trouverez bien d'autres (payants ou non) à l'aide d'une simple recherche Google.



Pré-requis et fichiers de travail

Pour suivre ce didacticiel, nous vous fournissons les mêmes panoramas utilisés, pour que vous puissiez reproduire à l'identique le résultat.


Pré-requis

Pour suivre ce didacticiel, vous aurez besoin :

  • D'avoir téléchargé le dossier Assets.zip contenant les fichiers de travail et placé son contenu quelque part sur votre ordinateur.
  • D'avoir téléchargé et installé Panotour Pro (la version d'essai suffira amplement pour ce didacticiel)
  • Un compte Google pour avoir accès à Google Drive


Fichiers de travail

  • Téléchargez le dossier Assets.zip.
    • Dans ce dossier, vous trouverez 4 panoramas pris avec le Ricoh Theta.


Limitations de l'utilisation de Google Drive

Puisque c'est un service d'hébergement gratuit, et comme beaucoup de son genre (Dropbox aussi, par exemple), il y a quelques limitations, la principale limitation étant l'affichage du contenu Web externe dans les website box.br> Google Drive héberge votre visite sur un serveur sécurisé, et ne vous permettra pas d'utiliser des website box pour afficher des sites Web externes, car ils sont considérés comme une "faille" de sécurité. Ils s'afficheront en blanc ou vides.

Une solution à ceci serait d'utiliser des fichiers .html en local, avec votre contenu, que vous pouvez également afficher dans le website box. Ce contenu serait à télécharger en plus de la visite. Voir la différence entre http et https.



Création d'une visite virtuelle simple

Etape 1 : Importer les images

Lancez Panotour Pro et ouvrez un explorateur de fichiers contenant les panoramas du Ricoh Théta.
Sélectionnez-les et effectuez un glisser-déposer vers Panotour Pro.

Panotour Tutorials - Simple VR 001.gif


Etape 2 : Préparation de l'interface

Dans l'onglet Style, cliquez sur appliquer un modèle.

Panotour Tutorials - Simple VR 002.PNG

Sélectionnez le modèle Ricoh Theta. Vous pouvez supprimer les styles de spots Display an Image et Open a Website car nous ne les utiliseront pas dans ce tutoriel.

Etape 3 : Placement des spots

De retour dans l'onglet Visite, sélectionnez chaque panorama un à un pour y placer un spot dans l'éditeur de spots qui vous permettra de naviguer entre les panoramas.

Panotour Tutorials - Simple VR 003.gif

Etape 4 : Générer la visite

Vous pouvez maintenant aller dans l'onglet Génération, définir les répertoires et nom de fichier de sortie et cliquer sur Générer.

Panotour Tutorials - Simple VR 004.PNG

Vous pouvez laisser tous les paramètres par défaut, ce qui génèrera une visite en multi-résolution avec les lecteurs Flash et HTML5 intégrés. La visite basculera automatiquement entre les deux lecteurs, en détectant le support de visualisation.

La visite terminée



Mise en ligne dans Google Drive

Google Drive offre la possibilité de mettre en ligne et partager des pages web.
Pour publier la visite sur votre site web, il faudra lire la page de documentation sur la publication web quand vous aurez réussi à récupérer le lien de la visite, à la fin de ce tutoriel.


Etape 1 : Préparer le dossier

  • Créez un dossier publique dans votre Google Drive. Pour ce faire :
    • Créez un nouveau dossier.
    • Faites un clic-droit dessus et cliquez sur Partager.
    • Basculez les paramètres de partage vers Public.
    • Enregistrez les nouveaux paramètres.

Panotour Tutorials - Google Drive 001.PNG

  • Dans ce dossier publique, vous pourrez créer un sous-dossier où placer votre nouvelle visite virtuelle.


Etape 2 : Déposer la visite dans ce fichier

  • Ouvrez l'explorateur de fichiers vers le dossier où vous avez généré votre visite.
  • Sélectionnez tous les fichiers de votre visite (index.html et le dossier data).
  • Effectuez un glisser-déposer de cette sélection dans le sous-dossier publique de votre Drive, et attendez que le téléchargement soit fini.

Panotour Tutorials - Google Drive 002.gif


Note : Pour faire un glisser-déposer de dossiers entiers vers Google Drive, il faut utiliser Google Chrome, d'autres navigateurs ne supportent pas cette fonction et nécessitera la re-création de chaque dossier dans le Drive.
Vous avez aussi la possibilité d'installer Google Drive sur votre ordinateur directement, et copiez le contenu de votre visite dans ce dossier sur votre ordinateur.



Etape 3 : Trouver l'URL de la visite

Ces étapes utilisent le nouvel interface de Google Drive. Ces étapes sont beaucoup moins simples que sur l'ancien interface du Drive, donc veillez bien à suivre ces instructions à la lettre.

  • Une fois le téléchargement terminé, remontez d'un dossier pour sélectionner le dossier contenant votre visite virtuelle (qui sera affichée en bleu une fois sélectionnée), faites un clic-droit pour ouvrir le menu contextuel et cliquez sur Obtenir le lien
  • Une nouvelle fenêtre apparaîtra contenant un lien. Copiez ce lien et collez-le dans un éditeur de textes.
  • Copiez également ce lien dans l'éditeur de textes :https://googledrive.com/host/DOC-ID-ICI/index.html. Renommez index.html si le fichier html de votre visite est nommé différemment .
  • Maintenant il faut trouver le document ID de votre dossier, qui est un long code dans le premier URL (exemple: 0B5uG-tHXXXXXXXXXtNjQ). Sélectionnez-le et copiez-le.
  • Remplacez DOC-ID-ICI dans le 2ème URL avec votre document ID, et collez ce nouveau lien dans votre navigateur.
  • Une fois la page chargée, le lien basculera vers le lien direct d'hébergement. C'est ce lien qu'il faudra utiliser.



Vous pouvez partager ce lien tel quel, ou bien publier la visite sur un site-web (étape 4).


Etape 4 : Publication sur un site web

Maintenant que nous avons récupéré l'URL de la visite, vous pouvez la publier sur votre site web.

La méthode de publication recommandée est l'utilisation d'une iFrame; vous utiliserez alors ce code, à placer sur une page web dans votre site :

<iframe src="http://WWW.MY-DOMAIN.COM/VIRTUAL_TOUR/MY-TOUR.html" width="800" height="600" allowFullScreen></iframe>

Donc, avec notre lien récemment obtenu ce serait :

<iframe src="https://49bc6130e8cd1d9c5acf43941b125e6652644cc2.googledrive.com/host/0B21ztMIr_KkXdTNvcHNOYjNlVGc/index.html" width="800" height="600" allowFullScreen></iframe>


C'est tout!












RETOUR : Documentation / Documentation Panotour