aframe
Примеси
Поиск…
Вступление
Mixins обеспечивают способ составления и повторного использования часто используемых наборов свойств компонента. Они определяются с помощью элемента <a-mixin> и помещаются в <a-assets> . Микшины должны быть установлены с идентификатором, а когда объект устанавливает этот 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>
Слияние свойств компонентов
Свойства компонента с несколькими свойствами будут слиты, если они определены несколькими миксинами и / или сущностью. Например:
<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>
Порядок и приоритет
Когда объект включает в себя несколько микшинов, которые определяют одни и те же свойства компонента, самый правый mixin имеет приоритет. В приведенном ниже примере объект включает как 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>