For interaction with the user we created a button component. This button component can be used in VR and in regular desktop mode.

The button emits an event on objects that have the button_listener component and where the button_channel is the same as that of the button. It emits events when it is pressed and when it is released. Use the button only in a empty a-entity as it will generate its own model.

To be able to use the button we require the AABB colider component. Include this using the following script before including the push_button script.

<script src="https://unpkg.com/[email protected]/dist/aframe-aabb-collider-component.min.js"></script>

To let the mouse work with the button we also need the cursor component on the scene

<a-scene cursor="rayOrigin:mouse">
    ...
</a-scene>

To be able to push the button you need to add the "hand" class to the entity you want to be able to push the button.

<a-entity class="hand" id="leftcontrl" oculus-touch-controls="hand: left" thumbstick-logging ></a-entity>

Below we define a button with all possible settings, all of these are optional. See table 1 for the default values and description of the parameters.

<a-entity button="button_channel: channel_1; 
    event_start: button_1_pressed; 
    event_stop: button_1_released; 
    button_color: #FF0000; 
    base_color: #0000FF;">
</a-entity>

To be able to receive an event we need to add the button_listener component to the entity we want to receive the events on. The events are emitted on the entity and not the component, so its easy to add components that listen to those events.

<a-entity some_controll_component button_listener="button_channel: channel_1"></a-entity>

If you want a button_listener to be able to listen to all button events on all channels. You can set the button_channel to "all" and all events will be emited on the entity.