aframe
ミックスイン

前書き

ミックスインの使用例

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

赤いキューブを持つエンティティは、赤いミクシィンとキューブのミックスインの順番でプロパティを取得します。青い立方体と同じように。概念上、上のエンティティは次のように展開されます。

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

コンポーネントのプロパティのマージ

複数のミックスインおよび/またはエンティティによって定義されている場合、複数のプロパティのコンポーネントのプロパティがマージされます。例えば：

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

ジオメトリコンポーネントのプロパティはすべて、ミックスインとして含まれ、エンティティで定義されるため、マージされます。エンティティは、次のものと同等になります。

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

順序と優先順位

エンティティに同じコンポーネントプロパティを定義する複数のミックスインが含まれている場合、最も右側のミックスインが優先されます。下の例では、エンティティにredとblueミックスインが含まれています。最後にblueミックスインが含まれているため、キューブの最終的な色は青です。

<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によって既に定義されているプロパティを定義する場合、エンティティの定義が優先されます。以下の例では、エンティティはredとblue両方のミックスインを含み、緑色も定義しています。エンティティは独自の色を直接定義するので、キューブの最終的な色は緑色になります。

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