Как создать кнопку рамки

Один из способов создать кнопку с A-Frame - использовать примитив <a-box> в сочетании с курсором. Ниже приводится простая демонстрация:

<a-scene>
    <a-entity position="0 .6 4">
        <a-camera>
            <a-entity id="mycursor" cursor="fuse: true; fuseTimeout: 500; max-distance: 30;"
            position="0 0 -5"
            geometry="primitive: ring"
            material="color: blue; shader: flat">
            </a-entity>
        </a-camera>
    </a-entity>

    <!-- "button" -->
    <a-entity id="refresh-button" geometry="primitive: box" material="color: red" position="0 0 -2"></a>
</a-scene>

<script>
    document.querySelector('#refresh-button').addEventListener('click', function() {
        // Refresh stuff would go here!
    });
</script>

Когда курсор фокусируется на «кнопке», срабатывает событие click. Чтобы добавить текст к кнопке, вы можете использовать этот компонент:

https://github.com/ngokevin/aframe-text-component

Наконец, если вы ищете более традиционную «кнопку», вы можете просто разместить элемент <button> над холстом или iframe, если вы встраиваете.

мне нравится https://www.npmjs.com/package/aframe-event-set-component для события наведения. И я даю своему курсору атрибут (данные доступны для щелчка), а затем я говорю, что Raycaster, он должен просто запускать объекты с этим атрибутом. Если вы хотите, чтобы что-то было просто кликабельным, если вы, например, входите в vr-режим, просто удалите атрибут dataclickable. Сцена выглядит так:

<a-scene cursor="rayOrigin: mouse" raycaster="objects: [data-clickable]">

        <a-image id="button" data-clickable visible="true" position="2 1.75 -0.2" height="0.5" width="0.5" rotation="0 90 0" onclick="dosomething()" event-set__enter="_event: mouseenter;  width: 0.53; height: 0.53;"
            event-set__leave="_event: mouseleave;  width: 0.5; height: 0.5;"></a-image>

    <a-camera>
      <a-cursor id="curseid" raycaster="objects: [data-clickable]"</a-cursor>
    </a-camera>

</a-scene>

Если вы хотите, чтобы кнопка работала, если что-то случилось, дайте ему атрибут позже:

document.getElementById('button').setAttribute('data-clickable', '');

Если вы закончили с кнопкой, используйте:

document.getElementById('button').setAttribute('visible', 'false');
document.getElementById('button').removeAttribute('data-clickable');

Если вы хотите, чтобы курсор просто запускал кнопку, если вы, например, входите в vr-режим, измените raycaster = "objects: .notclickable", а затем верните ему с этой строкой его атрибут:

document.getElementById('curseid').setAttribute('raycaster', 'objects: [data-clickable]');

На данный момент это мой способ делать кнопки, может быть, есть способ поумнее. Надеюсь, это немного помогло: D