aframe
Primitifs
Recherche…
Introduction
Les primitives ne sont que des <a-entity> sous le capot. Cela signifie que les primitives ont la même API que les entités telles que le positionnement, la rotation, la mise à l'échelle et l'attachement de composants. A-Frame fournit une poignée d'éléments tels que <a-box> ou <a-sky> appelées primitives qui enveloppent le motif entité-composant pour le rendre attrayant pour les débutants. . Les développeurs peuvent également créer leurs propres primitives.
Remarques
Sous la capuche
Les primitives agissent comme une couche de commodité (c.-à-d. Du sucre syntaxique) principalement pour les nouveaux arrivants. Gardez à l'esprit pour le moment que les primitives sont <a-entity> s sous le capot:
- Avoir un nom sémantique (par exemple,
<a-box>) - Avoir un lot prédéfini de composants avec des valeurs par défaut
- Attributs HTML de carte ou de proxy pour les données [composant] [composant]
Les primitifs sont similaires aux préfabriqués dans Unity . Certaines publications sur le modèle entité-composant-système les appellent des assemblages . Ils décrivent l'API principale des composants de l'entité pour:
- Composer des composants utiles avec des valeurs par défaut prescrites
- Agir comme un raccourci pour les types d'entités complexes mais courantes (par exemple,
<a-sky>) - Fournir une interface familière aux débutants puisque A-Frame prend le HTML dans une nouvelle direction
Sous le capot, cette primitive <a-box> :
<a-box color="red" width="3"></a-box>
représente cette forme entité-composant:
<a-entity geometry="primitive: box; width: 3" material="color: red"></a-entity>
<a-box> défaut la propriété geometry.primitive à la box . Et la primitive mappe l'attribut de width HTML à la propriété geometry.width sous-jacente ainsi qu'à l'attribut de color HTML à la propriété material.color sous-jacente.
Enregistrer une primitive
Nous pouvons enregistrer nos propres primitives (c'est-à-dire enregistrer un élément) en utilisant AFRAME.registerPrimitive(name, definition) . definition est un objet JavaScript définissant ces propriétés:
| Propriété | La description |
|---|---|
| defaultComponents | Objet spécifiant les composants par défaut de la primitive. Les clés sont les noms des composants et les valeurs sont les données par défaut des composants. |
| cartographie | Objet spécifiant le mappage entre le nom d'attribut HTML et les noms de propriété du composant. Chaque fois que le nom d'attribut HTML est mis à jour, la primitive met à jour la propriété de composant correspondante. La propriété du composant est définie à l'aide d'une syntaxe à points ${componentName}.${propertyName} . |
Par exemple, vous trouverez ci-dessous l'enregistrement de A-Frame pour la primitive <a-box> :
var extendDeep = AFRAME.utils.extendDeep;
// The mesh mixin provides common material properties for creating mesh-based primitives.
// This makes the material component a default component and maps all the base material properties.
var meshMixin = AFRAME.primitives.getMeshMixin();
AFRAME.registerPrimitive('a-box', extendDeep({}, meshMixin, {
// Preset default components. These components and component properties will be attached to the entity out-of-the-box.
defaultComponents: {
geometry: {primitive: 'box'}
},
// Defined mappings from HTML attributes to component properties (using dots as delimiters).
// If we set `depth="5"` in HTML, then the primitive will automatically set `geometry="depth: 5"`.
mappings: {
depth: 'geometry.depth',
height: 'geometry.height',
width: 'geometry.width'
}
}));
Que pouvons-nous utiliser alors
<a-box depth="1.5" height="1.5" width="1.5"></a-box>
représente cette forme entité-composant:
<a-entity geometry="primitive: box; depth: 1.5; height: 1.5; width:1.5;"></a-entity>