Les hotspots représentent des zones d'interactivité dans un panorama. Ils peuvent avoir pour but le déplacement de pièces en pièces, l'affichage d'informations, le lancement d'une vidéo, etc...

Pour démarrer en douceur , nous allons commencer par ajouter des hotspots sur une des visionneuses du post précédent.
Ceux-ci afficheront un simple texte lorsque l'on clique dessus.

I> Création des hotspots

Pour réaliser nos hotspots, nous allons ajouter un simple plan transparent devant chaque élément qui nous intéresse dans le panorama.
Cet exemple se base sur la visionneuse qui projete les 6 images (512*512) d'une pièce sur un cube (cf exemple ici).
Les images se trouvent ici, et le code source là.

Commençons par décider quels seront nos objets interactifs. Par exemple, j'ai choisi le radiateur qui est sur l'image de la
face droite :

et l'armoire de la face gauche:

Les dimensions de ces zones sont respectivement de 221*124 et 332*329. Elles nous serviront un peu plus tard.

Pour ajouter nos plans qui serviront de zone sensible, rien de plus facile, cette méthode a d'ailleurs été vue dans un précédent billet. On crée un plan grâce à l'objet 'Plane' avec une texture et une taille puis on le dispose sur la scène.

Comme texture, on peut utiliser une simple texture couleur, puisque le plan sera transparent par la suite.

Pour calculer la taille du plan, il suffit de faire une règle de trois. Les images de 512*512 sont appliquées sur des plans
de 5000*5000 donc notre zone interactive qui fait 221*124 sur l'image sera représenté par un plan de 2158*1210 pour le radiateur et de 3242*3212 pouyr l'armoire. Pour les coordonnées x,y ont fait pareil.

Etant donnée que cette solution est assez lourde , un des prochains billets expliquera comment mettre en place un éditeur de hotspots.

Il ne reste plus qu'à placer les plans sur la scène. Il faut les placer un peu en dedans du cube pour que nos hotspots ne se
trouvent pas 'collés' sur celui-ci et que l'interaction avec la souris puisse fonctionner.

Vous devriez obtenir quelque chose comme ceci pour le moment.

On peut remarquer par certains moments, selon l'orientation de la caméra, que le plan tend à disparaitre. Cela est du à
l'algorithme d'affichage du moteur qui utilise le z-sorting pour des questions de rapidité. Lorsque 2 objets sont très
rapprochés , il peut arriver que certaines faces passent derrière d'autres alors qu'il ne le faudrait pas.(Plus d'infos
sur cette démo)
Il faut faire recours à un petit hack afin de forcer les zones sensibles à être rendus en dernier. Ca devrait fonctionner.

II> Ajout des événements souris

Il ne reste maintenant plus qu'à gérer les évenements souris sur nos plans. L'utilisation de la classe 'MovieScene3D' permet de créer une scène ou tous les objets sont rendus dans un container unique. Il suffit de faire référence à ce container et
d'y ajouter notre évenement :

de définir les fonctions onMouseDown et onMouseUp et de rendre notre plan transparent

La version finale avec le code source. A venir, l'éditeur de hotspots.