Création d’une galerie d’images avec A-frame

Elliott Chiaradia |08-01-2016

A-frame ? Qu’est-ce que c’est ? Pour faire court, A-frame est un framework javascript dédié à la VR (réalité virtuelle), si vous voulez plus d’informations sur le sujet, je vous invite à lire l’article « Présentation de A-Frame, un framework dédié à la VR ».

Dans cet article, je vais vous montrer comment créer une galerie d’images avec A-frame. Je n’ai pas la prétention d’avoir créé une galerie parfaite, celle-ci n’est finalement qu’un prétexte pour tester quelques fonctionnalités du framework.

Bon, passons aux choses sérieuses, voici ce que nous obtiendrons comme résultat final :

(Vous pouvez visionner le résultat final ici)

Création de la galerie

Après avoir créé notre fichier "index.html" et y avoir rajouté le squelette HTML de base (doctype, html, head, etc.), nous allons commencer par charger A-frame et la librairie JQuery via leur CDN.

<script src="https://aframe.io/releases/latest/aframe.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

Dans notre <body>, nous allons créer une nouvelle scène. A l’intérieur de celle-ci, nous allons rajouter une caméra qui aura un curseur rouge et qui désactivera les contrôles de déplacement en profondeur. Nous allons aussi y rajouter une couleur de fond, à l’aide de l’attribut color de la balise <a-sky>. En plus de cela, nous allons placer 5 images différentes (aux dimensions 2x1) que nous allons légèrement incliner via l’attribut « rotation ».

<body>
    <a-scene>
      <a-camera fov="80" position="0 0.6 0" near="0.2" cursor-color="red" wasd-controls-enabled="false"></a-camera>
      <a-sky id="sky" color="#010014"></a-sky>

        <a-image class="miniature" src="images/aquaman1.png" width="20" height="10" position="-36 -17 -60" rotation="0 20 0"></a-image>
        <a-image class="miniature" src="images/aquaman2.png" width="20" height="10" position="-36 -6 -60" rotation="0 20 0"></a-image>
        <a-image class="miniature" src="images/aquaman3.png" width="20" height="10" position="-36 5 -60" rotation="0 20 0"></a-image>
        <a-image class="miniature" src="images/aquaman4.png" width="20" height="10" position="-36 16 -60" rotation="0 20 0"></a-image>
        <a-image class="miniature" src="images/aquaman5.png" width="20" height="10" position="-36 27 -60" rotation="0 20 0"></a-image>

    </a-scene>
</body>

A la suite de ces 5 images, nous allons placer l'image principale, la grande image du milieu.

<a-image id="main" src="images/aquaman1.png" width="134" height="68" position="30 6 -80" rotation="0 0 0" >
</a-image>

Il vous faut maintenant rajouter l'évènement permettant de changer l'image principale. Pour cela, nous allons créer une petite fonction en utilisant du JQuery (la fonction est placée à la suite du code html, rien ne vous empêche de séparer le javascript de l'html mais j'estime que ce n'est pas nécessaire pour une petite démonstration de cette envergure).

Cette fonction va créer un évènement clic sur chaque balise ayant la classe "miniature". Puis, après avoir récupéré l'attribut "src" de la miniature sur laquelle l'utilisateur a cliqué et la balise de l'image principale, elle va tout simplement modifier l'attribut "src" de cette image principale.

    <script type="text/javascript">

      $( ".miniature" ).click(function()
      {
        var image =  $(this).attr('src');
        var main =  document.querySelector('#main');
        main.setAttribute('src', image);
      });
       
    </script>

La galerie est maintenant fonctionnelle. Cependant, sans animation elle n'est pas franchement "sexy", remédions à la situation grâce au chapitre suivant.

Animation et son

Notre but est de rajouter un effet à l'image principale. Quand on clique sur une des miniatures, l'image principale doit se rapprocher de nous. Avec A-frame, les animations se placent à l'intérieur des balises, comme ceci :

<a-image >
  <a-animation>
  </a-animation>
</a-image>

Rajoutez cette animation dans la balise de l'image principale.

 <a-animation begin="toTheFront" attribute="position" from="30 6 -8000" to="30 6 -80" dur="600">
 </a-animation>

Voyons un peu plus en détail ces différents attributs :

begin : L'animation doit commencer quand ? Ici elle commence quand on appelle "toTheFront".
attribute : On définit le genre d'animation, ici on veut que ça soit un déplacement, donc un changement de position.
from : La position de base de notre objet.
to : La position d'arrivée de notre objet
dur : La durée de l'animation

Il ne vous reste plus qu'à appeler l'animation, qui je vous rappelle se lance à l'appel de "toTheFront". Nous allons rajouter dans notre fonction javascript, juste avant de setter l'attribut "src" à l'image principale, la ligne suivante.

 main.emit('toTheFront');

L'animation est dorénavant fonctionnelle, mais il nous reste une dernière chose à faire, rajouter un effet sonore. Je vous invite à télécharger ce fichier audio que nous allons renommer "camera.mp3 et que nous allons placer dans un dossier "sounds".

Les sons peuvent être placés comme attribut d'une balise. Nous allons donc modifier la balise de l'image principale en y rajouter l'attribut suivant :

sound="src: sounds/camera.mp3; on: toTheFront; volume: 100"

Voyons un peu plus en détail ces différentes propriétés :

src : le chemin de notre fichier audio
on : quand démarre le son, ici il démarre quand on appelle "toTheFront"
volume : le volume du son, à noter que le son provient directement de l'objet, donc si celui-ci est éloigné, le son qu'il va émettre va être très faible.

Si vous avez suivi toutes les étapes, vous devriez arriver à un résultat similaire à celui-ci.

Conclusion

Avec ce petit travail pratique, vous êtes en mesure de maitrisé quelques fonctionnalités offertes par A-frame. Vous avez pu voir qu'avec peu de lignes de code, on peut arriver à un résultat tout à fait correct. Bref, vivement que cet outil se développe pour qu'on puisse faire des choses encore bien plus folles !

Si vous voulez approfondir vos connaissances en ce framework dédié à la VR, je ne peux que vous invite à aller jeter un oeil à la documentation officielle : https://aframe.io/docs/guide/