aframe
mixins
Ricerca…
introduzione
Le mixine forniscono un modo per comporre e riutilizzare gruppi di proprietà dei componenti di uso comune. Sono definiti usando l'elemento <a-mixin> e sono posti in <a-assets> . I mixins devono essere impostati con un id e quando un'entità imposta tale id come suo attributo mixin, l'entità assorbe tutti gli attributi del mixin.
Esempio di utilizzo di mixin
<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à con cubo rosso prenderà le proprietà dal mixin rosso e dal mixin cubo in quell'ordine. Allo stesso modo con il cubo blu. Concettualmente, le entità sopra si espandono in:
<a-entity material="color: red" geometry="primitive: box"></a-entity>
<a-entity material="color: blue" geometry="primitive: box"></a-entity>
Unione di proprietà dei componenti
Le proprietà di un componente multi-proprietà si uniranno se definite da più mixin e / o dall'entità. Per esempio:
<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>
Tutte le proprietà dei componenti geometrici si uniranno poiché sono incluse come mix e definite sull'entità. L'entità sarebbe quindi equivalente a:
<a-entity geometry="primitive: box; height: 10; depth: 2; width: 10"></a-entity>
Ordine e Precedenza
Quando un'entità include più mixine che definiscono le stesse proprietà del componente, il mixin più giusto ha la precedenza. Nell'esempio seguente, l'entità include sia red mixin red e blue , e poiché il mixin blue è incluso per ultimo, il colore finale del cubo sarà blu.
<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>
Se un'entità definisce una proprietà già definita da un mixin, la definizione dell'entità ha la precedenza. Nell'esempio seguente, l'entità include sia mixin red e blue e definisce anche un colore verde. Poiché l'entità definisce direttamente il proprio colore, il colore finale del cubo sarà verde.
<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>