1 - Introduction
A- Frame est un puissant framework. Il prend en charge la plupart des casques VR tels que Vive, Rift, Windows Mixed Reality, Daydream, GearVR, Cardboard, Oculus Go et oculus questet peut même être utilisé pour la réalité augmentée. Bien qu'A-Frame prenne en charge l'ensemble du spectre, A-Frame vise à définir des expériences de RV interactives totalement immersives qui vont au-delà du contenu de base à 360 °, en utilisant pleinement le suivi de position et les contrôleurs. Il n'a pas besoin d'installation, il est open source et gratuit.
2 - Fonctionnement
A-Frame est basé sur une déclaration html.
Il est basé sur three.js, une bibliothèque javascript. A-frame fournit une structure de composant d'entité déclarative, composable et réutilisable. Le HTML n'est que la partie visible de A-frame qui va permettre d'utiliser tout une bibliotheque de javscript et aux API DOM>, à three.js, à WebVR à WebXR et à WebGL.
De nombreux composants de base sont disponible tels que les géométries, les matériaux, les lumières, les animations, les modèles, les raycasters, les ombres, le son de position, le texte et les commandes pour la plupart des principaux casques. D'autres composants sont devellopés par la communauté, notamment l'environnement, l'état, les systèmes de particules, la physique, le multi-utilisateur, les océans, la téléportation, les super mains et la réalité augmentée.
1 - Introduction
A- Frame est un puissant framework. Il prend en charge la plupart des casques VR tels que Vive, Rift, Windows Mixed Reality, Daydream, GearVR, Cardboard, Oculus Go et oculus questet peut même être utilisé pour la réalité augmentée. Bien qu'A-Frame prenne en charge l'ensemble du spectre, A-Frame vise à définir des expériences de RV interactives totalement immersives qui vont au-delà du contenu de base à 360 °, en utilisant pleinement le suivi de position et les contrôleurs. Il n'a pas besoin d'installation, il est open source et gratuit.
2 - Fonctionnement
A-Frame est basé sur une déclaration html.
Il est basé sur three.js, une bibliothèque javascript. A-frame fournit une structure de composant d'entité déclarative, composable et réutilisable. Le HTML n'est que la partie visible de A-frame qui va permettre d'utiliser tout une bibliotheque de javscript et aux API DOM, à three.js, à WebVR à WebXR et à WebGL
De nombreux composants de base sont disponible tels que les géométries, les matériaux, les lumières, les animations, les modèles, les raycasters, les ombres, le son de position, le texte et les commandes pour la plupart des principaux casques. D'autres composants sont devellopés par la communauté, notamment l'environnement, l'état, les systèmes de particules, la physique, le multi-utilisateur, les océans, la téléportation, les super mains et la réalité augmentée.
A-frame
A-Frame fournit une poignée d'éléments tels que <a-box> ou <a-sky> appelés primitives qui enveloppent le modèle entité-composant pour le rendre attrayant pour les débutants.
Au bas de la barre latérale de navigation de la documentation, nous pouvons voir toutes les primitives fournies par A-Frame. Les développeurs peuvent également créer leurs propres primitives.
Ce qui revient au même d'écrire avec les primitives:
<html>
<head>
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
</head>
<body>
<a-scene>
<a-box position="-1 0.5 -3" width="3" color="red"></a-box></a-entity>
</a-entity>
</a-scene>
</body>
</html>
Par exemple, nous avons <a-entity> et attachons les composants de géométrie, de matériau, de lumière et de position avec diverses propriétés et valeurs de propriété:
<html>
<head>
<script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
</head>
<body>
<a-scene>
<a-entity geometry="primitive: box; width: 3" position="-1 0.5 -3" material="color: red"></a-entity>
</a-entity>
</a-scene>
</body>
</html>
Entité: Les entités sont des objets conteneurs dans lesquels des composants peuvent être attachés. Les entités sont la base de tous les objets de la scène. Sans composants, les entités ne font ni ne rendent quoi que ce soit, comme les <div> vides.
Composant: Les composants sont des modules réutilisables ou des conteneurs de données qui peuvent être attachés à des entités pour fournir une apparence, un comportement et / ou des fonctionnalités. Les composants sont comme plug-and-play pour les objets. Toute la logique est implémentée via des composants et nous définissons différents types d'objets en mélangeant, en faisant correspondre et en configurant des composants. Comme l'alchimie!
Système: fournir une portée, une gestion et des services globaux pour les classes de composants. Les systèmes sont souvent facultatifs, mais nous pouvons les utiliser pour séparer la logique et les données; les systèmes gèrent la logique, les composants agissent comme des conteneurs de données.
3 - Structure de base. Une simple page html
<html>
<head>
<script src="https://aframe.io/releases/1.2.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>
