Курсор A-Frame с визуальной обратной связью

документы ссылаются на этот Codepen. Однако этот код не работает с последней версией A-Frame v0.4.0.

Как лучше всего реализовать такую ​​же визуальную обратную связь в версии 0.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
person Dan    schedule 05.01.2017    source источник

Ответы (2)


arrow_upward
1
arrow_downward

Кажется, это работает, но если вам нужны эффекты наведения, а не щелчка, измените атрибут 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>
person ngokevin    schedule 05.01.2017
comment
Спасибо @ngokevin. В частности, я хочу воспроизвести кубы, изменяющиеся на пурпурный при наведении/плавлении, и возвращаться к исходному цвету при наведении/плавлении. В существующей кодовой ручке я вижу миксин cube-hovered, но не вижу, где он применяется к кубам. - person Dan; 06.01.2017

arrow_upward
0
arrow_downward

В итоге я использовал @ngokevin aframe-event-set-component. Это компонент A-Frame для:

зарегистрировать прослушиватели событий, которые устанавливают свойства. Замена старого недокументированного API декларативных событий.

Это создало необходимый мне функционал.

person Dan    schedule 06.01.2017