Aframe 当用户将鼠标悬停在实体上时，如何使其旋转？

当光标悬停在obj模型上时，我使用事件集组件使其增大比例

这工作正常

但我如何让它旋转并增大尺寸呢

我在一个框架文档上找到了以下代码，但我不知道如何实现它，所以当鼠标悬停在实体上时它会触发

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

---

如果正确设置开始事件，引用的动画将正常工作：

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

如有必要，快速改进：在触发动画时禁用侦听器。由打开mouseenter事件和animationend事件的布尔值生成。

2.您可以选择不使用动画组件，并在光标位于上方时选中勾选（）。如果是，则按实际旋转.y+0.1（或任何其他所需旋转）旋转元件。
如前所述，您可以通过getAttribute（）或el.object3D.rotation访问旋转。

---

至于缩放，如果您需要在mouseenter事件中旋转并重新缩放对象，只需添加另一个动画，并像我在旋转中所做的那样使用它。
我不确定通常是如何完成的，根据我的经验，当没有那么多交互时，动画是好的，因为它们有时会做意想不到的事情，你必须预测/发现并预防。

---

另一方面，如果旋转增量太大，手动制作任何动画（更改勾号上的属性）可能会显得滞后。
您需要使用它，并找出最适合您的动画。

如果您正确设置开始事件，引用的动画将起作用：

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

如有必要，快速改进：在触发动画时禁用侦听器。由打开mouseenter事件和animationend事件的布尔值生成。

2.您可以选择不使用动画组件，并在光标位于上方时选中勾选（）。如果是，则按实际旋转.y+0.1（或任何其他所需旋转）旋转元件。
如前所述，您可以通过getAttribute（）或el.object3D.rotation访问旋转。

---

至于缩放，如果您需要在mouseenter事件中旋转并重新缩放对象，只需添加另一个动画，并像我在旋转中所做的那样使用它。
我不确定通常是如何完成的，根据我的经验，当没有那么多交互时，动画是好的，因为它们有时会做意想不到的事情，你必须预测/发现并预防。

---

另一方面，如果旋转增量太大，手动制作任何动画（更改勾号上的属性）可能会显得滞后。
您需要使用它，并找出最适合您的方法。

由于您在评论中要求使用不同的方法，我建议使用一个类似于我所写的多用途组件：

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>

---

direction=“alternate”应将其恢复到原始位置。

由于您在评论中要求使用不同的方法，我建议使用一个多用途组件，如我所写的组件：

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>

---

direction=“alternate”应将其恢复到原始位置。

太棒了！非常感谢您的帮助：）-我还注意到，当鼠标移动后动画停止时，对象不会返回其默认位置和旋转。我该如何确保它做到这一点呢？不妨问问——当鼠标悬停在3d模型上时，有没有比使用“设置事件”组件更优雅的方法来增加和减少3d模型的比例？或者这就是这个功能通常是如何实现的？太棒了！非常感谢您的帮助：）-我还注意到，当鼠标移动后动画停止时，对象不会返回其默认位置和旋转。我该如何确保它做到这一点呢？不妨问问——当鼠标悬停在3d模型上时，有没有比使用“设置事件”组件更优雅的方法来增加和减少3d模型的比例？或者这就是通常的功能实现方式？