具有视觉反馈的 A 帧光标答案

【问题标题】：A-Frame cursor with visual feedback具有视觉反馈的 A 帧光标
【发布时间】：2017-01-06 23:30:37
【问题描述】：

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>

任何帮助表示赞赏。

【问题讨论】：

标签： aframe

【解决方案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>

【讨论】：

谢谢@ngokevin。特别是我想复制立方体在悬停/熔断时变为洋红色，并在悬停/熔断时返回其原始颜色。在现有的 codepen 中，我可以看到 cube-hovered mixin，但我看不到它应用于多维数据集的位置。

【解决方案2】：

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

注册设置属性的事件监听器。替换旧的未记录的声明性事件 API。

这创建了我需要的功能。

【讨论】：