https://github.com/dougreeder/aframe-button-controls

An A-Frame WebXR component that supports the controller functionality available everywhere - buttons. Especially useful for apps designed to be usable with Google Cardboard V2, Gear VR without a separate Controller, mobile and desktop.
https://github.com/dougreeder/aframe-button-controls

a-frame cardboard gearvr webvr webxr

Last synced: 3 months ago
JSON representation

An A-Frame WebXR component that supports the controller functionality available everywhere - buttons. Especially useful for apps designed to be usable with Google Cardboard V2, Gear VR without a separate Controller, mobile and desktop.

• Host: GitHub
• URL: https://github.com/dougreeder/aframe-button-controls
• Owner: DougReeder
• License: mit
• Created: 2018-04-06T02:40:53.000Z (over 6 years ago)
• Default Branch: master
• Last Pushed: 2024-09-29T02:01:31.000Z (3 months ago)
• Last Synced: 2024-10-01T14:26:18.115Z (3 months ago)
• Topics: a-frame, cardboard, gearvr, webvr, webxr
• Language: JavaScript
• Homepage:
• Size: 15.6 KB
• Stars: 14
• Watchers: 4
• Forks: 5
• Open Issues: 3
• Metadata Files:
  • Readme: README.md
  • License: LICENSE.md

Awesome Lists containing this project

README

        
aframe-button-controls

===

An [A-Frame](https://aframe.io) [WebVR](https://webvr.info/) component that supports the controller functionality

available everywhere - buttons.  Especially useful for apps designed to be usable with Google Cardboard V2, Gear VR

without a separate Controller, mobile and desktop.

Fires a **buttondown** event when *any* button on *any* controller is pressed, including the virtual controller in

Chrome in VR mode. Also fires when a pointerdown/touchstart/mousedown event is fired on the scene element and 

not handled by another element,

so it's uniform across browsers for Cardboard, and usable in flat mode, 

on mobile and on desktop.

(If the browser supports WebXR, only the trigger button, and possibly the squeeze button, is detected,

unless the `poll` parameter is set.)

Likewise fires a **buttonup** event.

Button events, in the **detail** property, have a **controllerId** property for the controller 

and an **index** property to distinguish which button on the controller was pressed.

You should only use indexes greater than 0 for optional commands

or cosmetic variations,

as Cardboard, mobile, and desktop have only one button.

[live example scene](https://dougreeder.github.io/aframe-button-controls/example.html)

Not appropriate as the base for object selection within a scene - for that you probably want 

[laser-controls](https://aframe.io/docs/0.8.0/components/laser-controls.html#sidebar).

 

Cannot detect the button on Cardboard V1, as the magnetic sensor is not exposed to browsers.

Basic use:

```html

	

	

	

		AFRAME.registerComponent('mystuff', {

            init: function () {

                this.handlers = {

                    buttondown: function (evt) {

                        // ...

                    },

                    buttonup: function (evt) {

                        // ...

                    }

                }

            },

            play: function () {

                const controlsEl = document.querySelector('[button-controls]');

                controlsEl.addEventListener('buttondown', this.handlers.buttondown);

                controlsEl.addEventListener('buttonup', this.handlers.buttonup);

            },

            pause: function () {

                const controlsEl = document.querySelector('[button-controls]');

                controlsEl.removeEventListener('buttondown', this.handlers.buttondown);

                controlsEl.removeEventListener('buttonup', this.handlers.buttonup);

            }

        });

	

	

		

```

If using [aframe-state-component](https://www.npmjs.com/package/aframe-state-component),

you can create **buttondown** and **buttonup** handlers, instead of calling addEventListener yourself.

Parameters

---

### poll

* default: false

If the browser supports WebXR, only the trigger button (and possibly the squeeze button) will be detected.

Setting this to `true` will detect all buttons, at the cost of less-accurate resolution in time.

Don't change this after initializing the component.

If the browser supports WebVR, this has no effect - all buttons are always detected.

### enabled

* default: true

Set to `false` to prevent button events from being detected.