{"id":15282464,"url":"https://github.com/dougreeder/aframe-button-controls","last_synced_at":"2025-06-20T15:41:52.929Z","repository":{"id":48515387,"uuid":"128290148","full_name":"DougReeder/aframe-button-controls","owner":"DougReeder","description":"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.","archived":false,"fork":false,"pushed_at":"2024-09-29T02:01:31.000Z","size":16,"stargazers_count":14,"open_issues_count":3,"forks_count":4,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-04-12T22:55:20.323Z","etag":null,"topics":["a-frame","cardboard","gearvr","webvr","webxr"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/DougReeder.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE.md","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2018-04-06T02:40:53.000Z","updated_at":"2024-09-29T02:01:34.000Z","dependencies_parsed_at":"2024-10-14T14:20:48.137Z","dependency_job_id":null,"html_url":"https://github.com/DougReeder/aframe-button-controls","commit_stats":{"total_commits":13,"total_committers":1,"mean_commits":13.0,"dds":0.0,"last_synced_commit":"add54ef0ece1c7aea553520bb42ad76d0c2b2c79"},"previous_names":[],"tags_count":2,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DougReeder%2Faframe-button-controls","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DougReeder%2Faframe-button-controls/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DougReeder%2Faframe-button-controls/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/DougReeder%2Faframe-button-controls/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/DougReeder","download_url":"https://codeload.github.com/DougReeder/aframe-button-controls/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":248643050,"owners_count":21138353,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["a-frame","cardboard","gearvr","webvr","webxr"],"created_at":"2024-09-30T14:26:19.104Z","updated_at":"2025-04-12T22:55:24.990Z","avatar_url":"https://github.com/DougReeder.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"aframe-button-controls\n===\n\nAn [A-Frame](https://aframe.io) [WebVR](https://webvr.info/) component that supports the controller functionality\navailable everywhere - buttons.  Especially useful for apps designed to be usable with Google Cardboard V2, Gear VR\nwithout a separate Controller, mobile and desktop.\n\nFires a **buttondown** event when *any* button on *any* controller is pressed, including the virtual controller in\nChrome in VR mode. Also fires when a pointerdown/touchstart/mousedown event is fired on the scene element and \nnot handled by another element,\nso it's uniform across browsers for Cardboard, and usable in flat mode, \non mobile and on desktop.\n(If the browser supports WebXR, only the trigger button, and possibly the squeeze button, is detected,\nunless the `poll` parameter is set.)\n\nLikewise fires a **buttonup** event.\n\nButton events, in the **detail** property, have a **controllerId** property for the controller \nand an **index** property to distinguish which button on the controller was pressed.\nYou should only use indexes greater than 0 for optional commands\nor cosmetic variations,\nas Cardboard, mobile, and desktop have only one button.\n\n[live example scene](https://dougreeder.github.io/aframe-button-controls/example.html)\n\nNot appropriate as the base for object selection within a scene - for that you probably want \n[laser-controls](https://aframe.io/docs/0.8.0/components/laser-controls.html#sidebar).\n \nCannot detect the button on Cardboard V1, as the magnetic sensor is not exposed to browsers.\n\nBasic use:\n```html\n\t\u003cscript src=\"https://unpkg.com/aframe-button-controls@^1.1.0/aframe-button-controls.js\"\u003e\u003c/script\u003e\n\t\n\t\u003cscript\u003e\n\t\tAFRAME.registerComponent('mystuff', {\n            init: function () {\n                this.handlers = {\n                    buttondown: function (evt) {\n                        // ...\n                    },\n                    buttonup: function (evt) {\n                        // ...\n                    }\n                }\n            },\n\n            play: function () {\n                const controlsEl = document.querySelector('[button-controls]');\n                controlsEl.addEventListener('buttondown', this.handlers.buttondown);\n                controlsEl.addEventListener('buttonup', this.handlers.buttonup);\n            },\n\n            pause: function () {\n                const controlsEl = document.querySelector('[button-controls]');\n                controlsEl.removeEventListener('buttondown', this.handlers.buttondown);\n                controlsEl.removeEventListener('buttonup', this.handlers.buttonup);\n            }\n        });\n\t\u003c/script\u003e\n\n\u003c/head\u003e\n\u003cbody\u003e\n\t\u003ca-scene mystuff\u003e\u003c/a-scene\u003e\n\n\t\t\u003ca-entity button-controls\u003e\u003c/a-entity\u003e\n```\n\nIf using [aframe-state-component](https://www.npmjs.com/package/aframe-state-component),\nyou can create **buttondown** and **buttonup** handlers, instead of calling addEventListener yourself.\n\n\nParameters\n---\n\n### poll\n* default: false\n\nIf the browser supports WebXR, only the trigger button (and possibly the squeeze button) will be detected.\nSetting this to `true` will detect all buttons, at the cost of less-accurate resolution in time.\n\nDon't change this after initializing the component.\n\nIf the browser supports WebVR, this has no effect - all buttons are always detected.\n\n\n### enabled\n* default: true\n\nSet to `false` to prevent button events from being detected.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdougreeder%2Faframe-button-controls","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fdougreeder%2Faframe-button-controls","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fdougreeder%2Faframe-button-controls/lists"}