如何在AFrame中的mouseenter中触发动画？

Question

<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://aframe.io/releases/1.2.0/aframe.min.js"></script>
</head>

<body>
    <a-scene>

        <a-entity class="sign" id="sign" position="2.5 1 -3.5" animation__mouseenter="property:rotation; to:0 -390 0; easing:linear; dur:2000; startEvents: mouseenter" rotation="0 -30 0" text="width: 4; align: center; color: black; value: Make the sign board rotate 360">
            <a-box color="#FFFF00" position="0 0 -0.05" scale="1.8 0.6 0.1"> </a-box>
            <a-box color="#FFFF00" position="0 -0.7 -0.05" scale="0.1 1 0.1"> </a-box>
        </a-entity>

        <a-camera position="0 0.2 1.3"><a-cursor objects=".duck1 .duck2 sign" ></a-cursor></a-camera>


    </a-scene>
</body>
</html>

我正在尝试为 Aframe 1.2.0 添加动画

 <a-entity class="sign" id="sign" position="2.5 1 -3.5" animation__mouseenter="property:rotation; to:0 -390 0; easing:linear; dur:2000; startEvents: mouseenter" rotation="0 -30 0" text="width: 4; align: center; color: black; value: Make the boxes meet">
            <a-box color="#FFFF00" position="0 0 -0.05" scale="1.8 0.6 0.1"> </a-box>
            <a-box color="#FFFF00" position="0 -0.7 -0.05" scale="0.1 1 0.1"> </a-box>
        </a-entity>

但是活动没有正常进行。我是不是做错了？

最后，在执行上述代码时，我收到了 raycaster 警告。为什么它出现时我没有使用它。我在实际项目中也遇到了同样的问题。如何解决？

警告

%ccomponents:raycaster:warn %c[raycaster] For performance, please define raycaster.objects when using raycaster or cursor components to whitelist which entities to intersect with. e.g., raycaster="objects: [data-raycastable]".%c  color: orange color: inherit color: orange

Answer 1

对于 gaze-based 光标在屏幕中央，你所拥有的几乎是正确的。

objects 中的条目：需要匹配一个选择器，所以 .sign 代表 class 或 #sign 代表 id。

然而，带有class“符号”的实体没有任何几何体，因此光线投射器永远不会击中它。一种解决方案是给 children 相同的 class 的“符号”——然后光线投射器会击中它们，事件会冒泡到 parent 实体，在那里它可以触发动画.

完整代码：

        <a-entity class="sign" id="sign" position="2.5 1 -3.5"
              animation__mouseenter="property:rotation; to:0 -390 0; easing:linear; dur:2000; startEvents: mouseenter"
              rotation="0 -30 0" text="width: 4; align: center; color: black; value: Make the sign board rotate 360">                  
        <a-box class="sign" color="#FFFF00" position="0 0 -0.05" scale="1.8 0.6 0.1"> </a-box>
        <a-box class="sign" color="#FFFF00" position="0 -0.7 -0.05" scale="0.1 1 0.1"> </a-box>
    </a-entity>

    <a-camera position="0 0.2 1.3">                
      <a-cursor "objects: .sign">
      </a-cursor>
    </a-camera>

另一种解决方案是为 parent 实体提供光线投射器可以击中的几何体（例如不可见平面）

此处显示第一个解决方案的工作故障：

https://glitch.com/edit/#!/raycast-sign-animation?path=index.html%3A24%3A7

我注意到的一件事是您指定的动画只会运行一次。如果您刷新页面，它将再次运行，但只有一次。

原因是动画有运行第一次后，实体旋转到“0 -390 0”的目标“to”旋转。

如果你想让动画运行多次，添加一个“0 -30 0”的“from”旋转，它应该每次都刷新。我也更新了故障以显示这一点。

如何在AFrame中的mouseenter中触发动画？

How to make animation trigger in mouseenter in AFrame?

aframe