代码之家  ›  专栏  ›  技术社区  ›  Niraj

动画组件以及帧中的自定义组件

  •  0
  • Niraj  · 技术社区  · 7 年前

    我试图添加动画沿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 回复  |  直到 7 年前
        1
  •  2
  •   Diego Marcos    7 年前

    如您所见,动画组件将覆盖您的位置。在这种情况下,可以将组件应用于父实体以避免冲突:

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