aframe Tutoriel
Démarrer avec aframe
Recherche…
Remarques
Cette section fournit une vue d'ensemble de ce qu'est l'aframe et de la raison pour laquelle un développeur peut vouloir l'utiliser.
Il devrait également mentionner tous les sujets importants dans le cadre, et établir un lien avec les sujets connexes. La documentation pour aframe étant nouvelle, vous devrez peut-être créer des versions initiales de ces rubriques connexes.
Versions
A-Frame 0.x
| Version | Date de sortie |
|---|---|
| 0,6 | 2017-05-25 |
| 0.5 | 2017-02-10 |
| 0,4 | 2016-12-17 |
| 0.3 | 2016-08-18 |
Versions héritées
| Version | Date de sortie |
|---|---|
| 0,2 | 2016-03-26 |
| 0,1 | 2015-12-17 |
Commencer
A-Frame peut être développé à partir d'un simple fichier HTML sans avoir à installer quoi que ce soit! Un excellent moyen d'essayer A-Frame pour remixer l'exemple de démarrage sur Glitch, un éditeur de code en ligne qui héberge et déploie instantanément gratuitement. Ou créez un fichier .html et incluez A-Frame dans la head :
<html>
<head>
<script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script>
</head>
<body>
<a-scene>
<a-box position="-1 0.5 -3" rotation="0 45 0" color="#4CC3D9"></a-box>
<a-sphere position="0 1.25 -5" radius="1.25" color="#EF2D5E"></a-sphere>
<a-cylinder position="1 0.75 -3" radius="0.5" height="1.5" color="#FFC65D"></a-cylinder>
<a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4"></a-plane>
<a-sky color="#ECECEC"></a-sky>
</a-scene>
</body>
</html>
Inclure le build JS
Pour inclure A-Frame dans un fichier HTML, nous déposons une balise de script pointant vers la version CDN:
<head>
<script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script>
</head>
Installer à partir de npm
Nous pouvons également installer A-Frame via npm:
$ npm install aframe
Nous pouvons ensuite intégrer A-Frame dans notre application. Par exemple, avec Browserify ou Webpack:
require('aframe');
Si vous utilisez npm, vous pouvez utiliser angle, une interface de ligne de commande pour A-Frame. angle peut initialiser un modèle de scène avec une seule commande:
npm install -g angle && angle initscene
Caractéristiques
VR Made Simple
Il suffit de déposer une balise de script et a-scene . A-Frame prend en charge les commandes 3D, la configuration VR et les contrôles par défaut. Rien à installer, pas d'étapes de construction.
HTML déclaratif
HTML est facile à lire, à comprendre et à copier-coller. S'appuyant sur le langage HTML, A-Frame est accessible à tous: développeurs Web, passionnés de VR, artistes, concepteurs, éducateurs, fabricants, enfants.
VR multiplateforme
Construisez des applications VR pour Vive, Rift, Daydream, GearVR et Cardboard avec le support de tous les contrôleurs respectifs. Vous n'avez pas de casque ou de contrôleurs? Aucun problème! A-Frame fonctionne toujours sur les ordinateurs de bureau et les smartphones standard.
Architecture de composant d'entité
A-Frame est un puissant framework three.js, fournissant une structure.js entité-composant déclarative, composable et réutilisable. HTML n'est que la pointe de l'iceberg; les développeurs ont un accès illimité à JavaScript, aux API DOM, à three.js, à WebVR et à WebGL.
Performance
A-Frame est optimisé pour WebVR. Alors qu'A-Frame utilise le DOM, ses éléments ne touchent pas le moteur de présentation du navigateur. Les mises à jour des objets 3D sont toutes effectuées en mémoire avec peu de surcharge sous un seul appel requestAnimationFrame. Pour référence, voir A-Painter, un clone de Tilt Brush intégré dans A-Frame qui fonctionne comme un natif (90+ FPS).
Outil agnostique
Le Web étant basé sur la notion de HTML, A-Frame est compatible avec la plupart des bibliothèques, des frameworks et des outils, notamment React, Preact, Vue.js, Angular, d3.js, Ember.js, jQuery.
Inspecteur visuel
A-Frame fournit un inspecteur 3D visuel intégré pratique. Ouvrez n'importe quelle scène A-Frame, appuyez sur Ctrl + Alt + i et survolez le capot!
Enregistrement
Prenez des composants puissants que les développeurs ont publiés et connectez-les directement depuis HTML. Semblable à Unity Asset Store, le registre A-Frame collecte et organise ces composants pour faciliter leur découverte.
Composants
Frappez le sol avec les composants principaux d'A-Frame tels que les géométries, les matériaux, les lumières, les animations, les modèles, les raycasters, les ombres, les positions, le texte et les commandes Vive / Touch / Daydream / GearVR / Cardboard. Approfondissez encore davantage les composants communautaires tels que les systèmes de particules, la physique, les multi-utilisateurs, les océans, les montagnes, la reconnaissance vocale, la capture de mouvement, la téléportation, les super mains et la réalité augmentée.
Démarrer pour AR
Pour créer des applications AR sur le Web, vous devez ajouter une nouvelle bibliothèque nommée AR.js. Vous commencez par charger A-frame suivi de AR.js.
Newt vous devez configurer votre scène en utilisant le a-scene -tag A-frames avec l' artoolkit -attribute ajouté. Le sourceType doit être votre webcam. L'appareil photo de votre smartphone est également pris en charge avec cette fonction.
la a-marker-camera marque une image à l'intérieur de l'écran enregistré qui représente une image. Dans ce cas, c'est marker.png . Lorsque la caméra détecte ce marqueur, la boîte s’affiche sur le marqueur.
Vous trouverez ci-dessous le code exemple:
<script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script>
<script src="https://rawgit.com/jeromeetienne/ar.js/master/aframe/build/aframe-ar.js"></script>
<script>
THREEx.ArToolkitContext.baseURL = 'https://rawgit.com/jeromeetienne/ar.js/master/three.js/'
</script>
<body>
<a-scene artoolkit='sourceType: webcam;'>
<a-box position='0 0 0.5' material='opacity: 0.5;'></a-box>
<a-marker-camera preset='marker.png'></a-marker-camera>
</a-scene>
</body>