A-Frame中文教程

混合(Mixins)

混合(Mixins)提供一种方法来组合和重用常用组件属性集。它们使用<a-mixin>元素来定义并被放置在 <a-assets>中。Mixins必须有一个id,并且当一个实体把id设置为其mixin属性时,该实体将吸收这个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>

red cube实体将依次从red mixin和cubemixin中吸收属性。blue cube同样如此。从概念上讲,上面的实体扩展为:

<a-entity material="color: red" geometry="primitive: box"></a-entity>
<a-entity material="color: blue" geometry="primitive: box"></a-entity>

合并组件属性

如果通过多个mixins和/或实体来定义一个多属性组件,属性将发生合并。例如:

<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>

所有的几何组件属性将合并,因为它们被作为mixins包含进来并定义在实体上。此时实体就相当于:

<a-entity geometry="primitive: box; height: 10; depth: 2; width: 10"></a-entity>

顺序和优先级

当实体中包括多个mixins定义相同的组件属性时,最右边的mixin享有优先级。在下面的例子,包括两个实体redbluemixins,由于bluemixin是最后被包含的,立方体的最终颜色将是蓝色。

<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>

如果实体本身的一个属性定义已经由一个mixin所定义,实体的定义优先。在下面的示例中,实体包含两个redbluemixins并且定义了一个绿色属性,由于实体自己定义颜色,所以最终立方体的颜色将是绿色。

<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>