Добавьте кнопки взгляда в сцену, используя A-frame

Question

Есть ли способ добавить кнопки взгляда в рамку? Также обратите внимание, что для лучшего опыта должна быть небольшая полоса прогресса, чтобы знать, как долго пользователь должен смотреть на это.

Я заглянул внутрь инструментов инспектора, но ничего не нашел, что работает.

В этом уроке YouTube я узнал, как добавить элементы управления кликами. Это так же, как я мог бы сделать события взгляда?

Answer 1

Вы можете выбрать элемент, глядя на него, используя свойство fuse компонента курсора. Проверьте документы в формате A-Frame здесь: https://aframe.io/docs/0.5.0/components/cursor.html

Это вызовет событие щелчка на элементе, поэтому вам также нужно настроить прослушиватель для элемента для события щелчка.

Answer 2

Поиском я нашел решение, которое работает. Вот мой код:

document.getElementsByTagName('a-sphere')[0].addEventListener('click', function(){
    alert('click');
});

<script src="https://aframe.io/releases/0.5.0/aframe.min.js"></script>
<a-scene>
    <!-- this is my object that must execute a click event when looked -->
    <a-sphere position="0 0 -7" color="red">
    </a-sphere>

    <!-- camera -->
    <a-camera look-controls wasd-controls cursor="maxDistance: 30; fuse: true">
        <!-- progress bar -->
        <a-entity position="0 0 -3" geometry="primitive: ring; radiusOuter: 0.07;radiusInner: 0.05;" material="color: cyan; shader: flat"
            cursor="maxDistance: 30; fuse: true">
            <!--<a-cursor color="red"></a-cursor>-->
            <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-camera>
</a-scene>

Спасибо @thoragio за его / ее ответ.