Cours Webmaster

Cours webmaster : Créer un panorama 3D pour votre site web


Télécharger Cours webmaster : Créer un panorama 3D pour votre site web

★★★★★★★★★★3.5 étoiles sur 5 basé sur 1 votes.
Votez ce document:

Télécharger aussi :


Créer un panorama 3D pour votre site web

Vous cherchez à présenter un lieu, un objet ou un événement ? Avec Photosynth, vous pouvez convertir vos photos en un panorama 3D à 360 degrés directement intégrable dans vos pages web. Une belle occasion de vous différentier des autres sites !

Voici un exemple de site avec un panorama 3D :

Voici quelques exemples d’application de cet atelier :

•    Les hôtels et restaurants peuvent ainsi facilement présenter tant leurs ambiances intérieures que leurs situations extérieures 

•    Les villes peuvent promouvoir leur paysage, monuments,… 

•    Les musées et galeries peuvent présenter un aperçu de leurs collections

Ceci se fait en 3 étapes assez simples : prendre les photos, créer le diaporama et enfin l’intégrer à votre page web.

1. Présentation de l’outil gratuit Microsoft Photosynth

Pour réaliser ce diaporama, vous allez utiliser: il vous permettra de convertir votre collection de photos en un panorama 3D à 360 degrés.  

Créé par , est un service gratuit de Microsoft qui lie vos photos ensemble de façon à créer un modèle 3D de la scène et à fournir une navigation interactive dans celle-ci. 

Photosynth est capable de créer deux types de modèle 3D : des « panoramas » et des « synths » :

•    Un « panorama » fournit  une vue continue de photos pris depuis un même point (c’est par exemple le cas lorsque que vous prenez un grand paysage en photo). Exemple de panoramadans un hall d’hôtel. 

•    Un « synth » permet quant à lui de vous donner une représentation d’un objet ou de la scène sous des angles de vue différents (exemple le même objet pris sous toutes ses coutures). Cela permet aussi de naviguer sur chaque photo individuellement. Exemple de «synth» dansun salon de thé.

Dans cet atelier, nous créerons un « synth » à intégrer dans votre site web. A noter que l’intégration d’un « synth » dans votre site demandera à l’utilisateur d’avoir installé Microsoft Silverlight, un plugin gratuit tournant sur Windows et sur Mac.

Passons à l’action : il ne reste plus qu’à suivre les étapes suivantes pour obtenir un panorama 3D à 360° sur votre site !

2. Etape 1 : faire des prises de vue

La première chose à faire pour créer votre « synth » est donc de prendre de photos – beaucoup de photos ! La qualité de vos photos va déterminer la qualité du résultat final. Je ne peux donc que vous recommander de vous équiper d’un pied. Si vous n’avez pas d’appareil photo reflex sous la main, vous pouvez vous contenter d’un compact. Néanmoins, les meilleurs résultats – notamment en intérieur – seront obtenus avec un tel appareil muni d’un flash orientable.

Au-delà des réglages habituels de votre appareil photo, il vous faudra garder à l’esprit les schémas suivant :

1-    Restez au centre de la scène, et prenez des photos de la scène en tournant à chaque fois. Sur chaque photo, au moins 50% de la scène doit être présente sur la précédente ou sur la suivante.



2-    Déplacez-vous autour de la scène, et prenez des photos des différents angles. Gardez toujours à l’esprit que plus vous aurez de vues sous différentes orientations, meilleur sera  le résultat final.

3-    Quand vous prenez un objet, essayez de prendre une photo tous les 15/25 degrés

Si vous souhaitez connaître tous les secrets pour prendre les meilleures photos pour votre « synth », vous pouvez aussi vous référer au guide de photographie de Photosynth(en anglais) ou visualiser une (en anglais).

Une fois vos photos prises, importez-les sur votre ordinateur et surtout veillez à ne pas les recadrer ou les redimensionner.

3. Etape 2 : créer un panorama 3D (= un « synth »)

L’objet de cette étape est de créer un « synth » sur votre machine locale et de l’envoyer vers le service Photosynth en utilisant un plugin dans votre navigateur. Créer et publier un « Synth » revient à lancer l’application Photosynth, sélectionner les photos, régler les différents attributs et publier votre « synth ».

3.1. Installer Photosynth

Avant de commencer la création de vos « Synths », vous devez au préalable créer un compte gratuit sur le site de Photosynth puis télécharger l’application.

Un compte vous permet de télécharger vos photos  vers le service Photosynth ; un compte gratuit fourni 20Go de stockage pour vos « Synths ». Pour créer votre compte :

•    Allez sur et cliquez sur le bouton « Create Account » en haut à droite de la page

•    Connectez-vous avec votre compte Windows Live ID (si vous n’en avez pas encore, vous pouvez créer un Windows Live IDavec une adresse email existante en cliquant sur le bouton « Sign Up Now »)

•    Saisissez un nom d’utilisateur et éventuellement une description à propos de vous. Puis cliquez sur le bouton « Create Account »

•    Une fois ceci fait, vous êtes redirigé vers la page d’accueil de Photosynth.

L’application Photosynth, appelée aussi « synther », est un plugin pour votre navigateur qui convertit une collection de photo en un « Synth », et ensuite envoie le résultat vers le site Photosynth. L’application nécessite pour créer des « Synths » que vous utilisiez le système d’exploitation Windows (pour les utilisateurs MAC, le plugin fonctionnera au travers de Boot Camp). Pour installer l’application Photosynth :

•    Cliquez sur le bouton « Upload » en haut du site.

•    Cliquez sur le bouton « Install Photosynth ». 

Vous êtes maintenant prêt pour commencer à créer vos « Synths » !

3.2. Lancer l’application Photosynth

•    Allez sur le site de Photosynth et cliquez sur le bouton « Upload » situé en haut de la page.

•    Cliquez sur le bouton « Create Synth ». [Si vous n’avez pas encore installé l’application, vous ne verrez que le bouton « Install Photosynth ». Suivez les étapes de la section précédente avant de continuer.]

Remarque : Si vous êtes sur Internet Explorer, vous aurez peut-être une fenêtre comme cidessous qui apparaîtra et qui vous demandera l’autorisation d’installer l’application. Cliquez sur « Allow ». Et si vous ne souhaitez pas que ce warning apparaisse à chaque fois que vous laissez Photosynth, il suffit de cocher « Do not show me the warning for this program again».



•    Si vous n’êtes pas authentifié, la fenêtre ci-dessous apparaîtra pour vous demander votre Windows Live ID et votre mot de passe.

•    Cliquez sur « Start a new synth » pour démarrer l’application.

3.3. Sélectionner des photos

•     Cliquez sur « Add Photos » pour accéder à la sélection des photos à utiliser. 

•     Allez dans le dossier contenant vos photos, sélectionnez-les et cliquez sur le bouton « Open ».

•      

3.4. Configurer un « synth »

Avant de publier votre « synth », vous pouvez définir les propriétés suivantes: 

•    Name and Thumbnail: ce champ vous permet de donner un nom à votre « synth ». Vous pouvez aussi définir une miniature en sélectionnant une des photos utilisées pour votre « synth » en cliquant sur le bouton « Use Selected Photo » (cette image sera affichée quand votre « synth » apparaîtra dans les recherches Photosynth).

•    Tags: ce champ vous permet de définir les mots-clé permettant aux internautes de trouver votre « synth » sur le site Photosynth.

•    Description: ce champ vous permet de saisir une description de votre « synth ».

•    Visibility: par défaut, les « synths » créés sont publics. Si vous souhaitez que votre synth n’apparaisse pas dans les recherches sur le site, vous devez choisir l’option « Unlisted » (Attention : la limite de stockage pour les « Synths » non listé est fixé à 1 Go).

•    Photo Rights: ce champ détermine la propriété intellectuelle appliquée à vos photos. Par défaut, la valeur est fixée à « Creative Commons Attribution license ». Vous pouvez sélectionner d’autres licences ou choisir de conserver toute la propriété intellectuelle de votre création en sélectionnant l’option « Copyright ». 

3.4. Publier un «synth »

•    Cliquez sur le bouton « Synth » situé en bas de la fenêtre de création pour le créer et le publier.

•    Maintenant il ne vous reste plus qu’à patienter durant la création de votre « Synth ». Cela peut prendre un peu de temps selon le volume et la complexité des photos. Une barre de statut vous donne un état d’avancement et vous précise quand le processus de création du « synth » est fini.

•    Une fois terminé, cliquez sur « View » pour accéder à votre création.

•    Des attributs complémentaires sont gérables de cette page. Pour finir, vous n’avez plus qu’à cliquer sur le bouton « Exit » (en bas à droite).

4. Etape 3 : Intégrer un « synth » dans une page web

Intégrer un « synth » sur une page web est aussi facile que d’ouvrir votre Synth, copier le code d’intégration et le coller dans votre page web. Le code d’intégration peut être utilisé dans n’importe quelle page HTML supportant l’élément « Iframe ». 

•    Allez sur le site de et cliquez sur le lien « My Photosynths » situé en haut de la page. Comme à chaque fois le site vous demandera de vous authentifier, si vous ne l’êtes pas encore. 



•    Ouvrez le « synth » que vous souhaitez utiliser en cliquant sur son titre.

•    Cliquez sur le lien « Embed » situé en bas à droite de votre « Synth ».  

•    Copiez le code affiché dans la fenêtre pop-up. 

•    Collez le code que vous venez de copier dans votre page web. Voici un exemple de ce à quoi peut ressembler votre page web une fois votre « synth » intégré. 

Si vous utilisez Wordpress,Joomla,Drupal,,DotNetNuke, ouScrewTurn Wiki vous pouvez  obtenir des instructions détaillées sur Code Snippet Embedding Tutorial(en anglais). Plus généralement, dans le cas d’une telle solution web, vous pouvez coller le code de votre « synth » en accédant à la fenêtre html de l’éditeur de texte.

5. Pour aller plus loin : géolocaliser un « synth » et mettre en avant certaines parties

Après avoir publié un « synth », il y a plusieurs façons de l’améliorer : 

•    Vous pouvez le géolocaliser. S’il est géolocalisé et que sa visibilité est publique, votre « synth » apparaitra dans l’application Bing Maps Photosynth , permettant à vos clients potentiels de découvrir votre activité ou votre organisation. 

•    Vous pouvez définir une zone d’intérêt sur votre « synth » et fournir un lien d’accès direct à cette zone. Les zones d’intérêts apparaissent sous forme d’image dans la barre verticale située à droite le long de votre « synth ».

Toutes ces options sont accessibles via la page d’édition des « synths ».

5.1. Ouvrir la page d’Edition

•    Allez sur le site cliquez sur le lien « My Photosynths » en haut de la page.

•    Ouvrez le « Synth » que vous souhaitez éditer en cliquant sur son titre.

•    Cliquez sur le bouton « Edit this Photosynth » situé en dessous de votre « synth »

5.2. Géolocaliser un synth

? Cliquez sur l’onglet « Geotag » et glissez la punaise sur la carte. Vous pouvez zoomer sur la carte pour le positionner plus précisément ou rechercher un lieu en utilisant le champ « Location » puis en cliquant sur « Go ».  

5.3. Mettre en valeur des parties de votre synth

•    Cliquez sur l’onglet « Highlights », puis naviguez dans votre « Synth » jusqu’à la partie que vous souhaitez mettre en valeur. 

•    Cliquez sur « New Highlights ».

•    Retaillez la zone de sélection autour la partie de l’image à mettre en valeur. 

•    Entrez un titre (« Title ») et une description (« Caption ») pour la zone à mettre en valeur. Puis appuyez sur le bouton « Add ».

•    Quand vous avez terminé, cliquez sur le bouton « Save ». 



189