aframe
Mixins
Recherche…
Introduction
Les mixins permettent de composer et de réutiliser des ensembles de propriétés de composants couramment utilisés. Ils sont définis à l'aide de l'élément <a-mixin> et sont placés dans <a-assets> . Les mixins doivent être définis avec un identifiant, et lorsqu'une entité définit cet identifiant comme attribut mixin, l'entité absorbera tous les attributs du mixin.
Exemple d'utilisation de mixins
<a-scene>
<a-assets>
<a-mixin id="red" material="color: red"></a-mixin>
<a-mixin id="blue" material="color: blue"></a-mixin>
<a-mixin id="cube" geometry="primitive: box"></a-mixin>
</a-assets>
<a-entity mixin="red cube"></a-entity>
<a-entity mixin="blue cube"></a-entity>
</a-scene>
L'entité avec le cube rouge reprendra les propriétés du mixin rouge et du cube dans cet ordre. De même avec le cube bleu. Conceptuellement, les entités ci-dessus se développent pour:
<a-entity material="color: red" geometry="primitive: box"></a-entity>
<a-entity material="color: blue" geometry="primitive: box"></a-entity>
Fusion des propriétés du composant
Les propriétés d'un composant multi-propriétés fusionneront si elles sont définies par plusieurs mixins et / ou l'entité. Par exemple:
<a-scene>
<a-assets>
<a-mixin id="box" geometry="primitive: box"></a-mixin>
<a-mixin id="tall" geometry="height: 10"></a-mixin>
<a-mixin id="wide" geometry="width: 10"></a-mixin>
</a-assets>
<a-entity mixin="wide tall box" geometry="depth: 2"></a-entity>
</a-scene>
Toutes les propriétés du composant géométrique fusionnent car elles sont incluses en tant que mixins et définies sur l'entité. L'entité serait alors équivalente à:
<a-entity geometry="primitive: box; height: 10; depth: 2; width: 10"></a-entity>
Ordre et préséance
Lorsqu'une entité inclut plusieurs mixins définissant les mêmes propriétés de composant, le mixin le plus à droite est prioritaire. Dans l'exemple ci-dessous, l'entité inclut à la fois red mixins red et blue , et comme le mixin blue est inclus en dernier, la couleur finale du cube sera bleue.
<a-scene>
<a-assets>
<a-mixin id="red" material="color: red"></a-mixin>
<a-mixin id="blue" material="color: blue"></a-mixin>
<a-mixin id="cube" geometry="primitive: box"></a-mixin>
</a-assets>
<a-entity mixin="red blue cube"></a-entity>
</a-scene>
Si une entité elle-même définit une propriété déjà définie par un mixin, la définition de l'entité est prioritaire. Dans l'exemple ci-dessous, l'entité comprend les mixins red et blue et définit également une couleur verte. Puisque l'entité définit directement sa propre couleur, la couleur finale du cube sera verte.
<a-scene>
<a-assets>
<a-mixin id="red" material="color: red"></a-mixin>
<a-mixin id="blue" material="color: blue"></a-mixin>
<a-mixin id="cube" geometry="primitive: box"></a-mixin>
</a-assets>
<a-entity mixin="red blue cube" material="color: green"></a-entity>
</a-scene>