компонент анимации вместе с пользовательским компонентом в рамке - PullRequest
Новая
       17

компонент анимации вместе с пользовательским компонентом в рамке

0 голосов
/ 31 октября 2018

Я пытаюсь добавить анимацию вдоль оси y к объекту, используя компонент анимации, а также пытаюсь изменить его положение вдоль оси z в пользовательском компоненте. Однако компонент анимации имеет преимущество, и изменение позиции по оси z в пользовательском компоненте не работает.

Я бы хотел изменить положение вдоль оси y с помощью компонента анимации и изменить положение вдоль оси z с помощью моего пользовательского компонента.

Вот мой код - 

<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
    });     
  }
 }   
});

Не могли бы вы помочь? Единственная причина, по которой я выбрал компонент анимации для движения вдоль оси y, заключается в том, что я получаю плавное движение по синусоиде с помощью easeInSine.

1 Ответ

0 голосов
/ 31 октября 2018

Как вы уже видели, компонент анимации переопределяет вашу позицию. В этом случае вы можете применить свой компонент к родительской сущности, чтобы избежать конфликта: 

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