混合（Mixins）
优质
小牛编辑
128浏览
2023-12-01
混合（Mixins）提供一种方法来组合和重用常用组件属性集。它们使用<a-mixin>元素来定义并被放置在 <a-assets>中。Mixins必须有一个id，并且当一个实体把id设置为其mixin属性时，该实体将吸收这个mixin的所有属性。
<a-scene> <a-assets> <a-mixin material="color: red"></a-mixin> <a-mixin material="color: blue"></a-mixin> <a-mixin 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 geometry="primitive: box"></a-mixin> <a-mixin geometry="height: 10"></a-mixin> <a-mixin 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享有优先级。在下面的例子，包括两个实体red和bluemixins，由于bluemixin是最后被包含的，立方体的最终颜色将是蓝色。
<a-scene> <a-assets> <a-mixin material="color: red"></a-mixin> <a-mixin material="color: blue"></a-mixin> <a-mixin geometry="primitive: box"></a-mixin> </a-assets> <a-entity mixin="red blue cube"></a-entity></a-scene> |
如果实体本身的一个属性定义已经由一个mixin所定义，实体的定义优先。在下面的示例中，实体包含两个red和bluemixins并且定义了一个绿色属性，由于实体自己定义颜色，所以最终立方体的颜色将是绿色。
<a-scene> <a-assets> <a-mixin material="color: red"></a-mixin> <a-mixin material="color: blue"></a-mixin> <a-mixin geometry="primitive: box"></a-mixin> </a-assets> <a-entity mixin="red blue cube" material="color: green"></a-entity></a-scene> |