Mixinは、一般的に使用されるコンポーネントのプロパティのセットを構成し、再利用する方法を提供します。 それらは<a-mixin>要素を用いて定義され、<a-assets>に配置されます。Mixin には 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>

赤いキューブを持つエンティティは、赤いmixin、キューブのmixinの順にプロパティを取得します。 同様に、青いキューブもです。概念的には、上のエンティティは次のように展開されます。

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

コンポーネントプロパティをマージする

マルチプロパティコンポーネントのプロパティは、複数の'Mixin`および/またはエンティティによって定義されている場合、マージされます。例えば

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

全てのジオメトリコンポーネントのプロパティは、Mixinとして含まれ、エンティティに定義されているため、すべてマージされます。その場合、エンティティは以下と同等となります。

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

順序と優先順位

エンティティが同じプロパティを定義する複数のMixinを含む場合、一番右にあるMixinが優先されます。以下の例では、エンティティに赤と青の両方の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 blue cube"></a-entity>
</a-scene>

エンティティ自身が定義したプロパティが既に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 blue cube" material="color: green"></a-entity>
</a-scene>