Hello, friends, we have already seen three basic examples today we will see aframe mixin component.
Aframe mixn component is we can say reusable code blocks. It is useful to reuse commonly-used sets of component properties.
Table of Contents
- Aframe Example – 4: Aframe mixin entity
- A-Frame: How to define a-mixin dynamically?
- Multiple component properties with single mixin!
- How to reuse animations in A-Frame?
- Aframjs animation loop example
- Aframe Challange 4 – Aframe mixin
We will continue our learning but before that here is a quick Example code for you.
Aframe Example – 4: Aframe mixin entity
<html>
<head>
<script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
</head>
<body>
<a-scene inspector="" keyboard-shortcuts="" screenshot="" vr-mode-ui="" device-orientation-permission-ui="">
<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>
</body>
</html>
Just copy the above example and see the mixin component magic. They are defined using the <a-mixin> element and are placed in <a-assets>. The aframe assets component is useful to manage your image, audio, 3d model, etc. The assets component will help you to load assets before rendering the output scene. Also assets
All Mixins are set with an id, and when an entity sets that id as its mixin attribute, the entity will absorb all of the mixin’s attributes.
<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 id="box1" mixin="blue cube"></a-entity>
<a-entity id="box2" geometry="primitive: box" material="color: blue"></a-entity>
In the above example, we had taken three mixin components and applied that mixin to aframe entities. In this example, box1 and box2 are the same.
Please refer official documentation on mixin : link
A-Frame: How to define a-mixin dynamically?
Below is a very basic code on how to update the mixin and aframe entity with that mixin update. By updating mixin all the entities which used that mixin will get updated.
<html>
<head>
<script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
</head>
<a-scene>
<a-assets>
<a-mixin id="cube" material="color: blue"></a-mixin>
</a-assets>
<a-sky color="#ECECEC" material="color: #000000" geometry=""></a-sky>
<a-plane position="0 0 -4" rotation="-90 0 0" width="4" height="4" color="#7BC8A4" material="color: #ffffff"
geometry=""></a-plane>
<a-entity id="box1" position="1 2 -3" mixin="cube" geometry="primitive: box"></a-entity>
</a-scene>
<script type="text/javascript">
setTimeout(() => {
let mixinEl = document.getElementById('cube');
mixinEl.setAttribute('material', 'color: red;');
}, 2000);
</script>
</body>
</html>
Multiple component properties with single mixin!
Yes, It is possible to use multiple properties within a single mixin. Please refer below code for a better understanding.
<a-assets>
<a-mixin id="blue"
material="color: blue"
geometry="primitive: box"></a-mixin>
</a-assets>
How to reuse animations in A-Frame?
Not only animation but as we have already seen we can reuse any component property. We can also reuse our custom component property in the mixin. We will see how to make a custom component in a future post.
To get started just copy and start editing the code to learn basic animation component usage. In the below code, we have used animation with the cursor component. so we need to add a cursor component. Please get in touch with us to learn the cursor component in detail in the future.
<html>
<head>
<script src="https://aframe.io/releases/1.3.0/aframe.min.js"></script>
</head>
<body>
<a-scene cursor="rayOrigin: mouse">
<a-assets>
<a-mixin id="red" material="color: red"></a-mixin>
<a-mixin id="cube" geometry="primitive: box"></a-mixin>
<a-mixin id="animation"
animation__mouseenter="property: components.material.material.color; type: color; to: blue; startEvents: mouseenter; dur: 500"
animation__mouseleave="property: components.material.material.color; type: color; to: red; startEvents: mouseleave; dur: 500"
></a-mixin>
</a-assets>
<a-entity position="-1 1 -3" mixin="red cube animation"></a-entity>
<a-entity position="1.5 1 -3" mixin="red cube animation"></a-entity>
<a-plane position="0 0 -4" rotation="-90 0 0" width="6" height="5" color="#7BC8A4" material="color: #ffffff" geometry=""></a-plane>
<a-sky color="#ECECEC" material="color: #000000" geometry=""></a-sky>
<a-text position="-1.3 0.3 -2" text="anchor: align; width: 5; value: code.vatsalpatel32.com; color: #fb0909"></a-text>
</a-scene>
</body>
</html>
Aframjs animation loop example
<a-sphere position="-1 1.6 -5" animation="property: position; to: 1 8 -10; dur: 2000; easing: linear; loop: true" color="tomato"></a-sphere>
Friends this is a very simplest animation example in a future post we will see the animation using animejs in aframejs.
Aframe Challange 4 – Aframe mixin
Please refer to official documentation and use other properties of animation components such as delay, startEvents, autoplay, etc,. :link
Thank you.