aframe
mixins
Zoeken…
Invoering
Mixins bieden een manier om veelgebruikte sets van componenteigenschappen samen te stellen en opnieuw te gebruiken. Ze worden gedefinieerd met behulp van het element <a-mixin> en worden in <a-assets> . Mixins moeten worden ingesteld met een id, en wanneer een entiteit die id instelt als het mixin-kenmerk, zal de entiteit alle attributen van de mixin absorberen.
Voorbeeldgebruik van 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>
De entiteit met rode kubus neemt de eigenschappen van de rode mixin en de kubusmixin in die volgorde. Evenzo met de blauwe kubus. Conceptueel breiden de bovenstaande entiteiten zich uit naar:
<a-entity material="color: red" geometry="primitive: box"></a-entity>
<a-entity material="color: blue" geometry="primitive: box"></a-entity>
Component eigenschappen samenvoegen
Eigenschappen van een component met meerdere eigenschappen worden samengevoegd als deze worden gedefinieerd door meerdere mixins en / of de entiteit. Bijvoorbeeld:
<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>
Alle eigenschappen van de geometriecomponenten worden samengevoegd omdat ze worden opgenomen als mixins en gedefinieerd op de entiteit. De entiteit zou dan gelijkwaardig zijn aan:
<a-entity geometry="primitive: box; height: 10; depth: 2; width: 10"></a-entity>
Orde en voorrang
Wanneer een entiteit meerdere mixins bevat die dezelfde componenteigenschappen definiëren, heeft de meest rechtse mixin voorrang. In het onderstaande voorbeeld bevat de entiteit zowel red als blue mixins, en aangezien de blue mix als laatste wordt opgenomen, is de uiteindelijke kleur van de kubus blauw.
<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>
Als een entiteit zelf een eigenschap definieert die al is gedefinieerd door een mixin, heeft de definitie van de entiteit voorrang. In het onderstaande voorbeeld bevat de entiteit zowel red als blue mixins en definieert ook een groene kleur. Omdat de entiteit zijn eigen kleur rechtstreeks definieert, is de uiteindelijke kleur van de kubus groen.
<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>