A-Frame : mettez de la réalité virtuelle dans vos sites Web
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/
