A-сущность с недавно созданными компонентами - PullRequest
Новая
       15

A-сущность с недавно созданными компонентами

0 голосов
/ 10 июня 2019

Я пытаюсь включить недавно зарегистрированный компонент вместе с компонентом, который обеспечивает поведение внутри a-сцены.

Сначала я регистрирую компонент, чтобы изменить цвет при наведении курсора. Затем я регистрирую компонент, чтобы создать новый круг.

Когда я создаю сущность внутри a-сцены, она должна показывать поведение при наведении, но это не так. 

<html>
  <head>
    <script src="https://aframe.io/releases/0.9.2/aframe.min.js"></script>
    <script>
// here, I register the component to change color on hover
      AFRAME.registerComponent('change-color-on-hover', {
        schema: {
        color: {default: 'red'}
        },

        init: function () {
          var data = this.data;
          var el = this.el;
          var defaultColor = el.getAttribute('material').color;

          el.addEventListener('mouseenter', function () {
            el.setAttribute('color', data.color);
          });


          el.addEventListener('mouseleave', function () {
            el.setAttribute('color', defaultColor);
          });
        }
    });

// here, I create new circles that should later show the hover-behavior
      AFRAME.registerComponent('newcircle', {
        schema: {},
        multiple: true,
        init: function () {
            var sceneEl = document.querySelector('a-scene');
            var entityEl = document.createElement('a-ring');
            var posit = {x: 1, y: 0.1, z: -1};
            entityEl.setAttribute('position', posit);
            sceneEl.appendChild(entityEl);    
        }
      });

    </script>
  </head>

  <body>
    <a-scene background="color: #000000">
// here, the circle is created and should show the hover-behavior
      <a-entity newcircle change-color-on-hover></a-entity>          
    </a-scene>
  </body>
</html>

Круг создан, и я ожидаю, что он поменяет цвет при наведении, но это не так. Вы не представляете, почему?

Большое спасибо!

1 Ответ

0 голосов
/ 10 июня 2019

События mouseenter и mouseleave прослушиваются на пустом родительском элементе <a-entity>.

Если вы добавляете свой компонент в кольцо, он должен работать так, как вы хотите: 

// ...
entityEl.setAttribute('position', posit);
entityEl.setAttribute('change-color-on-hover', '')
// ...

Проверьте это в этой скрипке.

...