animation component along with custom component in aframe

Question

I am trying to add animation along y axis to an entity using the animation component and also trying to change it's position along z axis in a custom component. However, the animation component takes the precedence and the position change in z-axis in the custom component does not work.

I would like to change the position along y axis using the animation component and change the position along z-axis using my custom component.

Here is my code -

<a-entity id="orca" position="4 1 -18" gltf-model="#orca1" static-body animation="property: position.y; dir: alternate; dur: 1000; easing: easeInSine; loop: true; to: -1"  move></a-entity>


AFRAME.registerComponent('move', {
  schema: {
  },
  init: function() {
    this.directionVec3 = new THREE.Vector3(0, 1, 1);
  },

  tick: function(t, dt) {
   var directionVec3 = this.directionVec3;
   var currentPosition = this.el.object3D.position;
    directionVec3.z = dt/1000;
    this.el.setAttribute('position', {
      z: currentPosition.z + directionVec3.z
    }); 

    if (currentPosition.z > 10) {
      this.el.setAttribute('position', {
      z: -14
    });     
  }
 }   
});

Could you please help? The only reason for me to choose the animation component for movement along y-axis is that I get the smooth sine curve movement using easeInSine.

Diego Marcos Diego Marcos · Accepted Answer · 2018-10-31T20:21:50

As you’ve seen the animation component overrides your position. In this case you can apply your component to a parent entity to avoid the collision:

<a-entity move>
  <a-entity id="orca" position="4 1 -18" gltf-model="#orca1" static-body animation="property: position.y; dir: alternate; dur: 1000; easing: easeInSine; loop: true; to: -1">
  </a-entity>
</a-entity>

animation component along with custom component in aframe

1 Answers