aframe
Mixins
Buscar..
Introducción
Los mixins proporcionan una forma de componer y reutilizar los conjuntos de propiedades de componentes utilizados comúnmente. Se definen utilizando el elemento <a-mixin> y se colocan en <a-assets> . Los mixins deben establecerse con un id, y cuando una entidad establece ese id como su atributo mixin, la entidad absorberá todos los atributos del mixin.
Ejemplo de uso 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>
La entidad con cubo rojo tomará las propiedades de la mezcla roja y la mezcla del cubo en ese orden. Lo mismo ocurre con el cubo azul. Conceptualmente, las entidades anteriores se expanden a:
<a-entity material="color: red" geometry="primitive: box"></a-entity>
<a-entity material="color: blue" geometry="primitive: box"></a-entity>
Fusionar propiedades de componentes
Las propiedades de un componente de múltiples propiedades se fusionarán si están definidas por varios mixins y / o la entidad. Por ejemplo:
<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>
Todas las propiedades del componente de geometría se fusionarán ya que se incluyen como mixins y se definen en la entidad. La entidad sería entonces equivalente a:
<a-entity geometry="primitive: box; height: 10; depth: 2; width: 10"></a-entity>
Orden y Precedencia
Cuando una entidad incluye varios mixins que definen las mismas propiedades del componente, el mixin más a la derecha tiene prioridad. En el siguiente ejemplo, la entidad incluye mixins red y blue , y como la mixin blue se incluye en último lugar, el color final del cubo será azul.
<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 una entidad define una propiedad que ya está definida por una combinación, la definición de la entidad tendrá prioridad. En el siguiente ejemplo, la entidad incluye mixins tanto red como blue y también define un color verde. Dado que la entidad define directamente su propio color, el color final del cubo será 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>