Question

docs引用此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组件：

注册设置属性的事件侦听器。替换旧的未记录的Declarative Events API。

这创造了我需要的功能。

带有视觉反馈的A-Frame光标

2 个答案: