Accueil / Tutoriel A-Frame : Comment démarrer le WebVR avec A-Frame ?
aframe-tutoriel-webvr

Tutoriel A-Frame : Comment démarrer le WebVR avec A-Frame ?

Vous souhaitez développer des sites en réalité virtuelle pour le web via le WebVR ? Vous cherchez le meilleure framework pour le WebVR ? A-Frame est là pour vous aider à développer des sites en WebVR. GoGlasses vous propose un tutoriel pour démarrer avec A-Frame et le WebVR.

Ce tutoriel est repris à partir du post Medium d’Ada Rose, Developer Advocate chez Samsung (anglais). On vous conseille de la suivre sur Twitter pour suivre les évolutions sur WebVR et en apprendre plus sur A-Frame.

On va vous confier un secret : pas besoin d’être un grand développeur web pour créer des expériences en réalité virtuelle pour le Web (plus communément appelé WebVR). En effet, en quelques lignes simples de code, vous allez être capable de créer votre premier site en webvr. Comment cela est-il possible ? Il vous suffit d’utiliser le framework A-Frame. On vous guide ici pas à pas sur les différentes étapes pour créer votre premier site webVR.

A-Frame : Qu’est-ce que c’est ?

A-Frame est un framework qui vous permet de créer des sites WebVR, c’est-à-dire compatible avec les casques VR et un navigateur web. Son concurrent le plus direct est ReactVR (qui est dérivé de ReactJS, le framework de Facebook). Il a été créé par l’équipe de Mozilla afin de promouvoir la réalité virtuelle sur le web. En effet, pour développer de la réalité virtuelle aujourd’hui, la solution qui est choisie par le plus grand nombre est celle de développer des jeux VR ou expériences VR de manière native, c’est-à-dire via des applications comme Unity ou Unreal Engine. L’idée derrière le WebVR, c’est de pouvoir coder des sites web via un langage web et donc de rendre compatible toutes les applications en réalité virtuelle codées de cette manière avec tous les casques VR du marché en naviguant simplement sur le web. Et la bonne nouvelle dans tout cela, c’est qu’il suffit d’utiliser un langage et balise web bien connu des développeurs web et quelques fonctionnalités javascript pour créer certaines interactions. En somme, si vous êtes développeur web, vous n’aurez pas trop d’efforts à fournir pour démarrer avec A-Frame.

Créer un site WebVR ? Quels sont les prérequis ?

Pour créer votre premier site WebVR facilement et rapidement, voici les prérequis :

  1. Connaître les bases du HTML
  2. Avoir A-Frame
  3. Posséder un compte Glitch pour héberger votre code
  4. Aller sur Blocks, la bibliothèque d’objets 3D pour trouver des objets 3D facilement.

C’est tout ? Et oui ! Pour un premier site webVR c’est tout ce dont vous aurez besoin !

N.B. : ceci est une introduction rapide. Il vous faudra un peu plus de temps pour créer un site web plus fourni.

A-Frame : téléchargez un objet 3D pour votre site webVR

Pour démarrer, il vous faut aller sur la bibliothèque 3D de Google nommée Blocks. Trouvez y un (ou plusieurs) objet 3D qui vous plaît et cliquez sur « Download ».

A-Frame : importez un objet 3D dans votre site webVR

Dès que vous avez trouvé l’objet qui vous plaît le plus et que vous l’avez téléchargé, il va convenir de l’importer dans votre éditeur de code – en l’occurence Glitch. Après avoir créé un « Nouveau Projet » (« New Project »), ajoutez un nouvel asset (« Add Asset »).

Créez un tag <a-assets> si celui-ci n’existe pas. Ajoutez également <a-asset-item> pour le material de l’objet. Ajoutez également obj-model="obj: #obj; mtl: #mtl” afin de créer un objet pour la scène <a-entity>

Voici le code complet :

<a-assets>
  <a-asset-item id="mtl" src="./materials.mtl"></a-asset-item>
  <a-asset-item id="obj" src="./model.obj"></a-asset-item>
</a-assets>
    
<a-entity obj-model="obj: #obj; mtl: #mtl;"></a-entity>

Normalement à ce stade vous devriez voir l’objet dans votre scène. Il se peut toutefois qu’il soit petit. Il va donc nous falloir changer la taille de cet objet. Pour faire cela, nous allons changer la camera de position et l’échelle de notre objet comme cela (bien évidemment vous pouvez faire varier les chiffres pour tester comment cela fonctionne et jouer avec les différentes positions de caméra et d’échelle de l’objet) :

<a-entity obj-model="obj: #obj; mtl: #mtl;" position="0 2 -5" scale="5 5 5"></a-entity>

Et voilà !

aframe-blocks-objet-3d-webvr

A-Frame : Tout le code de votre premier site WebVR

Pour plus de simplicité, vous pouvez copier-coller directement le code ci-dessous pour voir directement ce que cela donne. Vous en conviendrez, ce code est extrêmement simple pour démarrer, mais comme on vous le disait plus haut, ceci n’est qu’une introduction !

<!DOCTYPE html>
<html lang="en">
 <head>
  <title>AFrame Demo</title>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <script src="https://aframe.io/releases/0.6.0/aframe.min.js"></script>
  <script src="https://cdn.rawgit.com/feiss/aframe-environment-component/ad57b15d/dist/aframe-environment-component.min.js"></script>
 </head>
 <body>
<a-scene>
    
    <a-assets>
      <a-asset-item id="mtl" src="https://cdn.glitch.com/b57e6f01-0eed-4775-bd9a-9951d1f0c7ab%2Fmaterials.mtl?1499698177296"></a-asset-item>
      <a-asset-item id="obj" src="https://cdn.glitch.com/b57e6f01-0eed-4775-bd9a-9951d1f0c7ab%2Fmodel.obj?1499698177926"></a-asset-item>
    </a-assets>
    
    <a-entity obj-model="obj: #obj; mtl: #mtl;" shadow="receive: false;" position="0 2 -5" scale="5 5 5"></a-entity>
    
  <a-entity environment="shadow: true; shadowSize: 10; preset:default;" ></a-entity>
 </a-scene>
</body>
</html>

Et après ?

A vous maintenant de construire une scène complète avec d’autres objets 3D venant de Blocks (ou non) et d’y ajouter différentes interactions. N’hésitez pas à tester votre scène également avec le plus de casques VR possibles. On vous conseille fortement si vous souhaitez vous inspirer de lire très régulièrement le blog d’A-Frame qui regorge d’idée et possède une communauté de passionnés qui ne cesse de grossir.

Si vous souhaitez agrémenter ce tutoriel ou que vous avez d’autres idées, n’hésitez pas à le faire en commentaire ci-dessous.