Présentation de A-Frame, un framework dédié à la VR

Elliott Chiaradia | 04-01-2016

Présentation

La VR (réalité virtuelle) n’est plus qu’un mythe, le casque d’Oculus sortira pour le grand public en début 2016, tandis que celui de HTC et de Sony arriveront un peu plus tard, dans le courant de l’année. Oui, le futur c’est maintenant ! La réalité virtuelle va tout chambouler ! Bien entendu, ça ne va pas se faire en un clin d’œil, cependant, miser dès maintenant sur cette technologie me semble être plus que nécessaire afin de ne pas être à la traine et de pouvoir innover.

Les gens de chez Mozilla, eux, ils ont tout misé sur la VR depuis déjà quelque temps. Ils pensent (tout comme moi) que la réalité virtuelle n’est pas limitée aux jeux vidéo. Ils ont donc développé A-Frame, un framework proposant divers outils pour créer des sites web non pas en deux dimensions, comme nous avons l’habitude de faire, mais en 3 dimensions dans le but d’offrir une expérience bien plus agréable pour les heureux possesseurs de ces casques virtuels.

A-Frame a été mis en ligne tout récemment, il n’est donc pas encore complet, mais vous allez vite pouvoir vous rendre compte du potentiel de la chose, notamment au cours du chapitre suivant.

 

Mise en place et démonstration

Pour ce qui est de la mise en place, il faut savoir que cette technologie n’est compatible au jour d’aujourd’hui qu’avec Firefox ou Chrome. Si vous utilisez Firefox, vous allez devoir installer le plugin « Mozilla WebVR Enabler » disponible à cette adresse.

Et alors ça fonctionne comment ? Rien de plus compliqué, pour avoir accès au framework, vous pouvez soit télécharger le fichier aframe.min.js soit l'utiliser en CDN, il ne vous reste plus qu’à appeler le script normalement.

<!-- Si on utilise le CDN -->
<script src="https://aframe.io/releases/latest/aframe.min.js"></script>

 

Si vous voulez voir ce que pourrait donner ce site avec la VR, je vous invite à tester cette petite démo disponible sur cette page.

test_vr

 

La démo a été réalisée avec seulement quelques lignes de code, les voici :

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Test WebVR</title>
    <meta name="description" content="Test WebVR">
    <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"></a-camera>

      <a-curvedimage src="images/fond.png" radius="5.7" theta-length="360" height="11" rotation="0 80 0" scale="1.2 1.2 1.2"></a-curvedimage>

      <a-curvedimage src="images/article.png" radius="5.7" theta-length="64" height="6.2" rotation="0 80 0" scale="0.8 0.8 0.8"></a-curvedimage>
      <a-curvedimage src="images/article.png" radius="5.7" theta-length="64" height="6.2" rotation="0 10 0" scale="0.8 0.8 0.8"></a-curvedimage>
      <a-curvedimage src="images/article.png" radius="5.7" theta-length="64" height="6.2" rotation="0 -60 0" scale="0.8 0.8 0.8"></a-curvedimage>
      <a-curvedimage src="images/article.png" radius="5.7" theta-length="64" height="6.2" rotation="0 -130 0" scale="0.8 0.8 0.8"></a-curvedimage>
      <a-curvedimage src="images/article.png" radius="5.7" theta-length="64" height="6.2" rotation="0 -205 0" scale="0.8 0.8 0.8"></a-curvedimage>

      <a-image position="0 -5 0" src="images/terre.png" radius="5.7" rotation="-90 0 0" scale="6 6 6"></a-image>
      <a-sky color="#26383f"></a-sky>

    </a-scene>
  </body>
</html>

 

Si le sujet vous intéresse, voici quelques liens qui vous seront utiles :