How do you create an aframe button

问题

Does anyone know how to create a button in aframe

回答1:

One way to create a button with A-Frame would be to use the <a-box> primitive combined with a cursor. The following is a simple demo:

<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>

When the cursor focuses on the "button", the click event would fire. To add text to the button, you can use this component:

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

Lastly, if you're looking for a more traditional "button", you could simply float a <button> element over the canvas or Iframe if you're embedding.

回答2:

i like https://www.npmjs.com/package/aframe-event-set-component for the hover event. And i give my cursor an attribute (data clickable) and then i say the raycaster he should just trigger entities with the attribute. If you want to let something just be clickable if you for example enter the vr-mode simply remove the dataclickable attribute. Scene looks like this:

<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>

If you want that a button works just if something happend give him the attribute later:

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

If you done with the button use:

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

If you want that the cursor just triggers button if you for example enter vr-mode, change the raycaster="objects: .notclickable" and then give him later with this line his attribute back:

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

This is for now my way to do buttons, maybe there is a smarter way. I hope this helped a bit :D

来源：https://stackoverflow.com/questions/38987416/how-do-you-create-an-aframe-button

标签

button

aframe