Programmez! #239 PDF pour nos abonnés papier

Abonnés papier : en raison de la situation due au coronavirus, des retards sont à prévoir en ce qui concerne la distribution de Programmez! #239 par La Poste. C'est pourquoi nous mettons Programmez! #239 PDF à disposition dans votre compte utilisateur sous un onglet dédié en attendant. Pour y accéder, il vous suffit de saisir votre n° d'abonné (ou éventuellement le ressaisir comme pour l'accès aux archives) dans votre compte utilisateur, si ce n'est pas déjà fait. Si vous ne connaissez par votre numéro d'abonné, vous pouvez l'obtenir à cette page.

En cas de difficultés, contactez le webmaster à partir du formulaire de contact de ce site.

A-Frame : mettez de la réalité virtuelle dans vos sites Web

Par:
fredericmazue

lun, 04/01/2016 - 14:43

Vous voudriez mettre de la belle 3D dans vos pages Web, mais l'idée de vous 'farcir' l'API WebGL ne vous tente guère ?

Pour vous simplifier la vie de développeur 3D, Mozilla a publié, courant décembre 2015,  un framework du nom de A-Frame qui pour permettra de remplacer les appels de fonctions compliquées par un langage déclaratif, sous forme de balise HTML.

Du code JavaScript tout entier inclus dans un fichier aframe.js doit d'abord être inclus dans la page. Après quoi e code va traiter les balises spéciales qu'il va y trouver. Toutes ces balises situées dans une balise <a-scene></a-scene> vont ainsi définir... une scène.

Voici par exemple une scène qui rend un cube tourné de 45° autour de son axe vertical.:

 <a-scene>
      <a-cube position="-1 0.5 1" rotation="0 45 0" width="1" height="1" depth="1"  color="#4CC3D9"></a-cube>
</a-scene>

Ce principe permet de faire beaucoup :

avec peu :

<!DOCTYPE html>
             <html>
               <head>
                 <meta charset="utf-8">
                 <title>Composite</title>
                 <meta name="description" content="Composite — A-Frame">
                 <script src="../../dist/aframe.js"></script>
               </head>
               <body>
                 <a-scene>
                   <a-sky src="../_skies/lake.jpg"></a-sky>
                   <a-model src="sculpture.dae" position="0 0 -2"></a-model>
                   <a-image src="portland.png" width="10" height="5" position="-2 1.2 1.2" scale="0.2 0.2 0.2"></a-image>        
                 </a-scene>
               </body>
             </html>

Cerise sur le gâteau, A-Frame est compatible Oculus Rift (documentation ici). Il est aussi compatible avec le Cardboard de Google donc il est compatible avec Android et iOS pour faire de la réalité virtuelle.

A-Frame est open source, disponible sur GitHub

Mozilla fournit une documentation complète sur le site dédié : https://aframe.io/