Question

我正在使用event-set-component来使我的obj模型在光标悬停在其上时增加比例。

这是正常的。

但是我如何让它旋转以及增加尺寸？

我在AFrame文档中找到了以下代码，但我不知道如何实现它，因此当鼠标悬停在实体上时会触发它。

<a-animation attribute="material.opacity" begin="fade" to="0"></a-animation>

Answer 1

由于你在评论中要求使用不同的方法，我建议使用像我写的那样的多用途组件：

AFRAME.registerComponent('event-animate', {
schema: {
    target: {type: 'selector'},
    aevent: {default: 'animation1'},
    triggeraction: {default: 'click'}
},

init: function () {
    var data = this.data;

    this.el.addEventListener(data.triggeraction, function () {
        data.target.emit(data.aevent);
    });
}

});

所以在HTML中它看起来像这样：

<a-entity id="object1" 
          event-animate="target:object1;    
          triggeraction:mouseenter; 
          aevent:eventstart">
<a-animation attribute="scale" 
             dur="5000" 
             begin="eventstart" 
             from="1" 
             to ="5" 
             direction="alternate"> 
</a-animation>
<a-animation attribute="rotation" 
             dur="5000" 
             begin="eventstart" 
             from="0 0 0" 
             to="0 360 0" 
             direction="alternate">
</a-animation>
</a-entity>

方向=＆＃34;替代＆＃34;应该把它带回原来的位置。

Answer 2

如果正确设置了begin事件，引用的动画将起作用：

<a-animation attribute="rotation"
             dur="2000"
             begin="mouseenter"
             to="0 360 0"
             repeat="1"><a-animation>

在mouseenter上，动画触发并旋转实体一次。

为了更好地控制你的工作，你需要深入研究组件。

1.我能想到的最简单的方法是使用动画组件和你自己的组件。您需要设置一个侦听mouseenter / mousexit的组件，然后触发动画：

AFRAME.registerComponent('mouseenterhandler', {
  init: function () {    
  let el = this.el; //Your element reference
  el.addEventListener('mouseenter, function () {
      // get the rotation, by getAttribute, or by accessing the 
      //object3D.rotation
      let rotation = el.getAttribute('rotation');
      //lets rotate it to the same position
      rotation.y += 360; 
      //set the animation component accordingly:
      el.children[0].setAttribute('to',rotation);
      //emit the 'begin' event:
      el.emit('startrotating');
      });
    }   
});

必要时快速改进：触发动画时禁用侦听器。使用布尔值打开mouseenter事件和animationend事件。

2.您可以选择不使用动画组件，如果光标结束则检查tick（）。如果是这样，则通过actualRotation.y + 0.1（或任何其他所需的旋转）旋转元素如前所述，您可以通过getAttribute（）或el.object3D.rotation访问旋转。

至于比例，如果您需要在mouseenter事件上旋转+重新缩放对象，只需添加另一个动画，并像使用旋转一样使用它。
我＆＃39 ;我不确定它通常是怎么做的，根据我的经验，动画很好，当没有那么多的互动时，因为它们有时会做出意想不到的事情，你必须预测/找出并预防。
另一方面，如果旋转增量太大，手动制作任何动画（改变勾选属性）可能看起来很滞后。
你需要玩它，找出最适合你的动画。 p>

当用户将鼠标悬停在实体上时，如何让我的实体旋转？

2 个答案: