Les photos sphériques et la VR

Elliott Chiaradia | 25-01-2016

Visionner une simple photo ne vous intéresse plus ? Vous avez envie de quelque chose de plus immersif ? Pourquoi ne pas utiliser de la VR avec des photos sphériques ? Vous aurez l’impression d’être littéralement dans la photo !

Tout d’abord, vous devrez prendre une photo sphérique, il existe différents appareils pouvant prendre ce genre de photo, mais n’ayez crainte, vous pourrez tout aussi bien utiliser votre smartphone ! Diverses applications, comme l’appli Google Camera, offrent cette option « photosphere ». Il ne vous reste plus qu’à prendre une jolie photo.

google_camera_photosphere

Si vous vous demandez ce que cela peut donner, je vous invite à tester la démo que j'ai concoctée spécialement pour vous.

Pour afficher la photo, nous allons utiliser le framework A-Frame, mais avant de passer au code, vous devez faire quelques petites retouches à votre photo. Premièrement, votre photo doit avoir une longueur qui fait exactement deux fois la hauteur, sinon l’image risque d’être déformée. Deuxièmement, les dimensions de votre photo doivent être une puissance de deux, sans quoi vous allez obliger A-Frame à la redimensionner, ce qui n’a rien de catastrophique en soi, mis à part que vous allez forcer A-Frame à travailler pour rien. Et un dernier conseil, utilisez des outils de compression d’images comme TinyPng, afin d’éviter que le chargement de votre page prenne beaucoup de temps.

Afficher la photo avec A-Frame

Pour afficher la photo, vous devez tout simplement définir l'attribut "src" de la balise "<a-sky>". Au préalable, nous allons bien entendu charger "aframe.min.js" et définir une caméra.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script src="https://aframe.io/releases/latest/aframe.min.js"></script>
  </head>
  <body>
    <a-scene>
      <a-camera fov="80" position="0 0.6 0" near="0.2" cursor-color="#33CCFF" wasd-controls-enabled="false"></a-camera>  
      <a-sky id="sky" src="images/panorama3.jpg"></a-sky>   
    </a-scene>
  </body>
</html>

Vous n'avez rien besoin de plus, vous pouvez dorénavant vous "déplacer" dans votre photo comme bon vous semble.

photosphere_vr

Changer la photo de fond

Si vous voulez offrir la possibilité à l'utilisateur de changer la photo de fond et arriver à un résultat similaire au mien (que vous pouvez visualiser ici), vous allez devoir rajouter un peu de javascript. Voici mon code source, vous pouvez vous en inspirer comme bon vous semble. J'ai placé les miniatures tout en bas, car j'avais quelques bugs visuels au niveau des pieds, donc autant les cacher !

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <script src="https://aframe.io/releases/latest/aframe.min.js"></script>

  </head>
  <body>
    <a-scene>

      <a-camera fov="80" position="0 0.6 0" near="0.2" cursor-color="#33CCFF" wasd-controls-enabled="false">
      </a-camera>
       
      <a-image class="miniature" id="panorama1" position="0 -3 -0.5" src="images/min1.jpg"  rotation="-90 0 0" scale="6 6 6" width="0.2" height="0.1">
      </a-image>
      <a-image class="miniature" id="panorama2" position="0 -3 0.1" src="images/min2.jpg"  rotation="-90 0 0" scale="6 6 6" width="0.2" height="0.1">
      </a-image>
      <a-image class="miniature" id="panorama3" position="0 -3 0.7" src="images/min3.jpg"  rotation="-90 0 0" scale="6 6 6" width="0.2" height="0.1"></a-image>
      
      <a-sky id="sky" src="images/panorama3.jpg"></a-sky>  

    </a-scene>
  </body>
  
  <script type="text/javascript">

      var sky = document.getElementById("sky");
      var miniatures = document.getElementsByClassName("miniature");

      var changeSky = function() {
           var picturePath = 'images/'+this.getAttribute('id')+'.jpg';
           sky.setAttribute('src', picturePath);
      };

      for (var i = 0; i < miniatures.length; i++) {
          miniatures[i].addEventListener('click', changeSky, false);
      }

  </script>
</html>