带有视觉反馈的 A 形光标

Question

docs reference this Codepen。但是这段代码似乎不适用于最新版本的 A-Frame v0.4.0。

在 v0.4.0 中实现相同视觉反馈的最佳做法是什么。

特别是我想在鼠标悬停时更改我的目标实体的属性。

这是 Codepen 中的代码：

<a-scene>
  <a-assets>
    <a-mixin id="cube" geometry="primitive: box"></a-mixin>
    <a-mixin id="cube-hovered" material="color: magenta"></a-mixin>
    <a-mixin id="cube-selected" material="color: cyan"></a-mixin>
    <a-mixin id="red" material="color: red"></a-mixin>
    <a-mixin id="green" material="color: green"></a-mixin>
    <a-mixin id="blue" material="color: blue"></a-mixin>
    <a-mixin id="yellow" material="color: yellow"></a-mixin>
    <a-mixin id="sphere" geometry="primitive: sphere"></a-mixin>
  </a-assets>

  <a-entity position="0 2.2 4">
    <a-entity camera look-controls wasd-controls>
      <a-entity position="0 0 -3"
                geometry="primitive: ring; radiusOuter: 0.30;
                          radiusInner: 0.20;"
                material="color: cyan; shader: flat"
                cursor="maxDistance: 30; fuse: true">
        <a-animation begin="click" easing="ease-in" attribute="scale"
             fill="backwards" from="0.1 0.1 0.1" to="1 1 1" dur="150"></a-animation>
        <a-animation begin="fusing" easing="ease-in" attribute="scale"
             fill="forwards" from="1 1 1" to="0.1 0.1 0.1" dur="1500"></a-animation>
      </a-entity>
    </a-entity>
  </a-entity>

  <a-entity position="-3.5 1 0">
    <a-entity mixin="cube red">
      <a-animation begin="click" attribute="position" from="0 0 0"
                   to="0 0 -10" dur="2000" fill="both"></a-animation>
    </a-entity>
  </a-entity>

  <a-entity position="0 1 0">
    <a-entity mixin="cube green">
      <a-animation begin="click" attribute="rotation" to="0 360 0"
                   easing="linear" dur="2000" fill="backwards"></a-animation>
    </a-entity>
  </a-entity>

  <a-entity position="3.5 1 0" rotation="0 45 0">
    <a-entity mixin="cube blue">
      <a-animation begin="click" fill="forwards" repeat="1"
                   direction="alternate" attribute="position" from="0 0 0"
                   to="15 0 0" dur="2000"></a-animation>
    </a-entity>
  </a-entity>

  <a-entity position="0 3 0" class="clickable" mixin="cube yellow"
            rotation="0 45 0" scale=".5 .5 .5"></a-entity>
</a-scene>

感谢任何帮助。

Answer 1

这似乎有点工作，但如果您想要悬停效果而不是单击，请更改 begin 属性以指向不同的事件名称。

<a-entity position="3.5 1 0" rotation="0 45 0">
    <a-entity mixin="cube blue">
      <!-- Mouse-enter hover. -->
      <a-animation begin="mouseenter" fill="forwards" repeat="1"
                   direction="alternate" attribute="position" from="0 0 0"
                   to="15 0 0" dur="2000"></a-animation>
    </a-entity>
  </a-entity>

Answer 2

我最终使用了@ngokevin aframe-event-set-component。它是一个 A-Frame 组件：

register event listeners that set properties. Replacement for old undocumented Declarative Events API.

这创建了我需要的功能。

带有视觉反馈的 A 形光标

A-Frame cursor with visual feedback

aframe