A-Frame Animation не запускается при передаче события

Question

Я пытаюсь анимировать плоскость в A-кадре с помощью компонента a-animation или aframe-animation-component после того, как пользователь щелкнет текстовое поле. Я хочу повернуть плоскость в вертикальное положение, чтобы пользователь упал. Анимация работает без прослушивателя событий, но не срабатывает, когда я добавляю атрибуты startEvents или begin к a-entity, содержащему плоскость. Событие, называемое fallclick, генерируется из текста a-entity, называемого fallSelector, при нажатии на него.

Вот часть моего HTML-кода:

<a-entity 
                static-body
                id="plane" 
                rotation="-90 0 0" 
                geometry="primitive: plane; width: 2; height: 2" 
<!--            animation="property: rotation; to: 0 0 0; delay: 500; startEvents: fallclick;" -->
                >
        <a-animation attribute="rotation" to="0 0 0" delay="500" dur="1000" begin="fallclick" ></a-animation>
</a-entity>

Вот код события JavaScript:

fallSelector.addEventListener('click', function () {
            fallSelector.emit('fallclick');
            console.log(fallSelector + ': Emit fallclick');
});

Answer 1

1) для компонента <a-animation> необходимо сгенерировать событие в примитиве анимации:

<a-animation id="my-animation" begin="foo"></a-animation>
<!-- js: my-animation.emit("foo") --!>

2) для компонента анимации необходимо создать событие для объекта, содержащего анимацию

<a-entity id="bar" animation="startEvents: foo"></a-entity>
<!-- js: bar.emit("foo") --!>

живая скрипка здесь