{"id":13731911,"url":"https://github.com/c-frame/aframe-super-hands-component","last_synced_at":"2025-05-08T06:30:43.825Z","repository":{"id":15250484,"uuid":"77786301","full_name":"c-frame/aframe-super-hands-component","owner":"c-frame","description":"👐All-in-one natural hand controller, pointer, and gaze interaction library for A-Frame","archived":false,"fork":false,"pushed_at":"2024-07-19T10:11:55.000Z","size":24226,"stargazers_count":357,"open_issues_count":36,"forks_count":71,"subscribers_count":20,"default_branch":"master","last_synced_at":"2024-11-14T08:56:01.687Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":"https://c-frame.github.io/aframe-super-hands-component/examples/","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/c-frame.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":"CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":"CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2017-01-01T16:18:52.000Z","updated_at":"2024-11-10T07:29:41.000Z","dependencies_parsed_at":"2023-02-15T11:45:55.129Z","dependency_job_id":null,"html_url":"https://github.com/c-frame/aframe-super-hands-component","commit_stats":null,"previous_names":["wmurphyrd/aframe-super-hands-component"],"tags_count":18,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/c-frame%2Faframe-super-hands-component","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/c-frame%2Faframe-super-hands-component/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/c-frame%2Faframe-super-hands-component/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/c-frame%2Faframe-super-hands-component/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/c-frame","download_url":"https://codeload.github.com/c-frame/aframe-super-hands-component/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":224593862,"owners_count":17337185,"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":[],"created_at":"2024-08-03T02:01:41.259Z","updated_at":"2025-05-08T06:30:43.818Z","avatar_url":"https://github.com/c-frame.png","language":"JavaScript","funding_links":[],"categories":["JavaScript"],"sub_categories":[],"readme":"# Super Hands\n\n[![npm Dowloads](https://img.shields.io/npm/dt/super-hands.svg?style=flat-square)](https://www.npmjs.com/package/super-hands)\n[![npm Version](http://img.shields.io/npm/v/super-hands.svg?style=flat-square)](https://www.npmjs.com/package/super-hands)\n[![JavaScript Style Guide](https://img.shields.io/badge/code_style-standard-brightgreen.svg)](https://standardjs.com)\n\nEffortlessly add natural, intuitive interactions with tracked controller,\ntouch, or mouse input in [A-Frame](https://aframe.io).\n\n![Demo Gif](readme_files/super-hands-demo.gif)\n\n![Super Hans Can't Make a Fist](readme_files/peep-show-super-hans.gif)\n\n## Introduction\n\nThe goal of `super-hands` is to make it easy to handle user input in\nWeb VR by providing a high-level API that is consistent across all devices.\nInstead of dealing directly with controller button events, raycasters, and\ncollision detection components, you setup your scene and components instead\nto respond to 'gestures' like hovering and grabbing.\n\nThe currently implemented gestures are:\n\n* Hover: Holding a controller in the collision space of an entity or pointing at\n  an entity with a cursor or laser pointer\n* Grab: Pressing a button while hovering an entity, potentially also moving it\n* Stretch: Grabbing an entity with two hands and resizing\n* Drag-drop: Activating one entity and then gesturing to another entity to\n  interact with it\n\n### How to use super-hands\n\nThe family of components in this library fall into two categories:\n\n**Core**: The `super-hands` component itself does the work of gathering\nevents from user input devices and collision detection components to\ninterpret them into gestures that it communicates out to the targeted\nentities via custom events. This component is placed on the same entities\nas your tracked controllers and/or your cursor raycaster.\n\n**Reaction Components**: The `super-hands` core component alone only\ncommunicates user intent via gesture events to the entities users want to\ninteract with; reaction components\nenable the interactivity on those entities. This package includes components for\ncommon reactions, `hoverable`, `clickable`, `grabbable`, `stretchable`,\n`draggable`, and `droppable`, and it is also designed to be easily\nextended with your own custom reaction components.\n\n### Getting started\n\n#### Browser\n\nInstall and use by directly by including the [browser files](dist):\n\n```html\n\u003chead\u003e\n  \u003ctitle\u003eMost Basic Super-Hands Example\u003c/title\u003e\n  \u003cscript src=\"https://aframe.io/releases/1.4.2/aframe.min.js\"\u003e\u003c/script\u003e\n  \u003cscript src=\"https://cdn.jsdelivr.net/gh/donmccurdy/aframe-extras@v6.1.1/dist/aframe-extras.misc.min.js\"\u003e\u003c/script\u003e\n  \u003cscript src=\"https://unpkg.com/super-hands@^3.0.5/dist/super-hands.min.js\"\u003e\u003c/script\u003e\n\u003c/head\u003e\n\n\u003cbody\u003e\n  \u003ca-scene\u003e\n    \u003ca-assets\u003e\u003c/a-assets\u003e\n    \u003ca-entity\u003e\n      \u003ca-camera\u003e\u003c/a-camera\u003e\n      \u003ca-entity sphere-collider=\"objects: a-box\" super-hands hand-controls=\"hand: left\"\u003e\u003c/a-entity\u003e\n      \u003ca-entity sphere-collider=\"objects: a-box\" super-hands hand-controls=\"hand: right\"\u003e\u003c/a-entity\u003e\n    \u003c/a-entity\u003e\n    \u003c!-- hover \u0026 drag-drop won't have any obvious effect without some additional event handlers or components. See the examples page for more --\u003e\n    \u003ca-box hoverable grabbable stretchable draggable droppable color=\"blue\" position=\"0 0 -1\"\u003e\u003c/a-box\u003e\n  \u003c/a-scene\u003e\n\u003c/body\u003e\n```\n\nTo use with A-Frame 1.5.0 and onward:\n\n```html\n\u003chead\u003e\n  \u003ctitle\u003eMost Basic Super-Hands Example\u003c/title\u003e\n  \u003cscript src=\"https://aframe.io/releases/1.6.0/aframe.min.js\"\u003e\u003c/script\u003e\n  \u003cscript\u003e\n    delete AFRAME.components[\"grabbable\"];\n  \u003c/script\u003e\n  \u003cscript src=\"https://cdn.jsdelivr.net/gh/c-frame/aframe-extras@7.5.x/dist/aframe-extras.min.js\"\u003e\u003c/script\u003e\u003c/script\u003e\n  \u003cscript src=\"https://unpkg.com/super-hands@^3.0.5/dist/super-hands.min.js\"\u003e\u003c/script\u003e\n\u003c/head\u003e\n\n\u003cbody\u003e\n  \u003ca-scene\u003e\n    \u003ca-assets\u003e\u003c/a-assets\u003e\n    \u003ca-entity\u003e\n      \u003ca-camera\u003e\u003c/a-camera\u003e\n      \u003ca-entity sphere-collider=\"objects: a-box\" super-hands hand-controls=\"hand: left\"\u003e\u003c/a-entity\u003e\n      \u003ca-entity sphere-collider=\"objects: a-box\" super-hands hand-controls=\"hand: right\"\u003e\u003c/a-entity\u003e\n    \u003c/a-entity\u003e\n    \u003c!-- hover \u0026 drag-drop won't have any obvious effect without some additional event handlers or components. See the examples page for more --\u003e\n    \u003ca-box hoverable grabbable stretchable draggable droppable color=\"blue\" position=\"0 0 -1\"\u003e\u003c/a-box\u003e\n  \u003c/a-scene\u003e\n\u003c/body\u003e\n```\n\nNote: This is a workaround solution to resolve the conflict between A-Frame grabbable component (introduced in A-Frame 1.5.0) and Superhands grabbable component.\n\n#### npm\n\nInstall via npm:\n\n```bash\nnpm install super-hands\n```\n\nThen require and use.\n\n```js\nrequire('aframe');\nrequire('super-hands');\n```\n\n## Readme contents:\n\n* [Examples](#examples)\n* [News](#news)\n* [Compatibility](#compatibility)\n* [Super Hands Core Component](#super-hands-component)\n* [Reaction components](#reaction-components)\n  * [`hoverable`](#hoverable-component)\n  * [`grabbable`](#grabbable-component)\n    * [`clickable`](#clickable-component)\n  * [`stretchable`](#stretchable-component)\n  * [`draggable`](#draggable-component)\n  * [`droppable`](#droppable-component)\n* [Customizing interactivity](#customizing-interactivity)\n\n## Examples\n\nThe [examples page](https://c-frame.github.io/aframe-super-hands-component/examples/) showcases a variety of configurations and use cases for `super-hands`.\n\n| Example Scene | Description | Target VR Devices |\n| --- | --- | --- |\n| [Hand controllers with physics](https://c-frame.github.io/aframe-super-hands-component/examples/#physics) | Grab, stretch, and drag-drop cubes with simulated physical behavior in roomscale VR | Vive, Rift, Windows MR |\n| [Gaze and laser pointer controls without physics](https://c-frame.github.io/aframe-super-hands-component/examples/#mouse) | Showcase fallback controls used for simpler VR devices and fallback interactivity without physics simulation | Desktop, mobile, cardboard, Gear VR, Daydream, Vive, Rift, Windows MR |\n\n## News\n\nv3.0.5\n* Add instanceId to Object3D.userData if available\n* Add instruction to use superhands with aframe 1.5.0 and onward\n\n[Previous news](news.md)\n\n### Known Issues\n\n* Two-handed physics grabs don't feel great\n  * Help wanted with configuring ideal constraints for this situation\n* `too much recursion` errors when using two raycasting controllers:\n  When using raycasters,\n  always set their `objects` property to prevent the raycasters from colliding\n  with each other's lines.\n\n## Compatibility\n\nWith the right configuration, `super-hands` can provide interactive controls\nfor any device: desktop, mobile (\"magic window\"), cardboard viewer + button,\n3DOF (Daydream, GearVR) and full 6DOF tracked controls (Vive, Oculus Touch, Valve Index, et c).\n\n`super-hands` dependency version compatibility:\n\n| super-hands Version | A-Frame Version | aframe-extras Version | @c-frame/aframe-physics-system Version |\n| --- | --- | --- | --- |\n| ^v3.0.4 | ^v1.4.0 | ^v6.1.1 | ^v4.1.0 |\n| ^v3.0.3 | ^v1.3.0 | ^v6.1.1 | ^v4.1.0 |\n| ^v3.0.2 | ^v1.0.4 | ^v6.1.1 | ^v4.0.1 |\n| v3.0.0 | ^v0.8.2 | ^v4.1.2 | ^v3.1.2 |\n\n## Core Component\n\n### super-hands component\n\nThe `super-hands` component is the core of the library.\nIt communicates gesture events to entities based on\nuser-input and entity collisions. The component is generally placed on\nthe controller entities (or the camera for gaze interaction) and depends on\na collision detection component (e.g. `raycaster`, [aframe-extras sphere-collider](https://github.com/donmccurdy/aframe-extras/blob/master/src/misc),\nof [aframe-physics-extras physics-collider](https://github.com/wmurphyrd/aframe-physics-extras))\nwhich needs to be placed on the same entity or a child entity of `super-hands`.\n\n#### Component Schema\n\n| Property | Description | Default Value |\n| -------- | ----------- | ------------- |\n| colliderEvent | Event that your chosen collider emits when identifying a new collision | `'hit'` |\n| colliderEventProperty | Name of property in event `detail` object which contains the collided entity | `'el'` |\n| colliderEndEvent | Event that your chosen collider emits when a collision ends | `'hitEnd'` |\n| colliderEndEventProperty | Name of property in event `detail` object which contains the un-collided entity | `'el'` |\n| grabStartButtons | Array of button event types that can initiate grab | Button press, touch start, and mouse down events |\n| grabEndButtons | Array of button event types that can terminate grab | Button release, touch end, and mouse up events |\n| stretchStartButtons | Array of button event types that can initiate stretch | Button press, touch start, and mouse down events |\n| stretchEndButtons | Array of button event types that can terminate stretch | Button release, touch end, and mouse up events |\n| dragDropStartButtons | Array of button event types that can initiate dragging/hovering | Button press, touch start, and mouse down events |\n| dragDropEndButtons | Array of button event types that can execute drag-drop | Button release, touch end, and mouse up events |\n\nCollider-related property defaults are set to work with `sphere-collider`.\nDefault button events include specific events for `vive-controls`,\n`hand-controls`, `oculus-touch-controls`, `daydream-controls`,\n`gearvr-controls`, `windows-motion-controls`, `oculus-go-controls`, mouse, and touch.\n\n#### Gesture Events\n\nEvents will be emitted by the entity being interacted with.\nThe entity that `super-hands` is attached to is sent in the event `detail` as the property `hand`.\n\n| Type | Description | Target |  detail object |\n| --- | --- | --- | --- |\n| hover-start | Collided with entity | collided entity | hand: `super-hands` entity |\n| hover-end | No longer collided with entity | collided entity | hand: `super-hands` entity |\n| grab-start | Button pressed while collided with entity and hand is empty | collided entity | hand: `super-hands` entity |\n| grab-end | Button released after grab-start | collided entity | hand: `super-hands` entity |\n| stretch-start | Both controllers have button pressed while collided with entity | collided entity | hand: `super-hands` entity, secondHand: second controller entity |\n| stretch-end | Release of button after stretch-start | collided entity | hand: `super-hands` entity |\n| drag-start | Drag-drop button pressed while collided with entity and hand is empty | collided entity | hand: `super-hands` entity |\n| drag-end | Drag-drop button released while dragging an entity | dragged entity | hand: `super-hands` entity |\n| dragover-start | Collision with entity while dragging another entity | collided entity \u0026 held entity | hand: `super-hands` entity, hovered: collided entity, carried: held entity |\n| dragover-end | No longer collided with entity from dragover-start | collided entity \u0026 held entity | hand: `super-hands` entity, hovered: collided entity, carried: held entity |\n| drag-drop | Button released while holding an entity and collided with another | collided entity \u0026 held entity | hand: `super-hands` entity, dropped: carried entity, on (carried entity only): receiving entity |\n\nNotes:\n\n* References to buttons being \"released\" and \"pressed\" are dependent on the schema settings.\n* Only one entity at a time will be targeted for each event type,\neven if multiple overlapping collision zones exist. `super-hands` tracks a\nLIFO stack of collided entities and a nearest-first queue of raycasted Entities\nto determine which will be affected.\n* drag-drop: For the receiving entity, `on` entry in the detail is `null`.\nIf needed, use `event.target` instead.\n* For events triggered by buttons, the triggering button event is passed\n  along in `detail.buttonEvent`\n* When entities are nested, gesture events will bubble to the closest parent\n  with a related reaction component. This makes it easy to make specific\n  hotspots on larger objects by making the child collidable\n  but placing the reaction component on the parent\n  (e.g., a door with the handle as a collidable child and a `grabable` parent\n  door so the whole door moves only when the handle is grabbed). To prevent\n  a gesture from bubbling, trap it on the child by giving it reaction components\n  or listening-for and cancelling the gesture events\n  (see [Gesture acceptance and rejection](#Gesture-acceptance-and-rejection]))\n\n#### Global Event Handler Integration\n\nIn addition to the A-Frame style gesture events,\n`super-hands` also causes standard HTML events analogous to VR\ninteractions to be emitted by the target entities. This allows the use of these\ncommon Global Event Handler properties on entities to add reaction directly\nin the HTML. View the\n[related example](https://c-frame.github.io/aframe-super-hands-component/examples/#events)\nto see this in use.\n\n| entity HTML attribute | conditions | event.relatedTarget |\n| --- | --- | --- |\n| onmouseover | hovering in an entity's collision zone | `super-hands` entity |\n| onmouseout | leaving an entity's collision zone | `super-hands` entity |\n| onmousedown | grab started while collided with entity | `super-hands` entity |\n| onmouseup | grab ended while collided with entity | controller entity |\n| onclick | grab started and then ended while collided with entity | controller entity |\n| ondragstart | drag-drop started while collided with entity | controller entity |\n| ondragend | drag-drop started while collided with entity | controller entity |\n| ondragenter | hovering in an entity's collision zone while drag-dropping another entity | the other entity\\* |\n| ondragleave | leaving an entity's collision zone while drag-dropping another entity | the other entity\\* |\n| ondrop | drag-drop ended while holding an entity over a target | the other entity\\* |\n\nThe event passed to the handler will be a `MouseEvent`. At present the only property implemented\nis `relatedTarget`, which is set as\nlisted in the table. Drag-dropping events will be dispatched on both the entity being dragged and the drop target, and the `relatedTarget` property for each will point to the other entity in the interaction.\n\n## Reaction Components\n\nAdd these components to entities in your scene to make them react to\nsuper-hands gestures.\n\n### hoverable component\n\nUsed to indicate when the controller is within range to interact with an entity\nby adding the 'hovered' state.\n\n#### States\n\n| Name | Description |\n| --- | --- |\n| hovered | Added to entity while it is collided with the controller |\n\n\n### grabbable component\n\nMakes and entity move along with the controller's movement and rotation\nwhile it is grabbed. `grabbable` works with\nup-close grabbing (6DOF controllers like Vive and Oculus Touch\nwith `hand-controls` and `sphere-collider`)\nand with pointing at a distance (3DOF controllers like GearVR and Daydream\nwith `laser-controls`).\n\nThis works best with [aframe-physics-system](https://github.com/donmccurdy/aframe-physics-system)\nto manage grabbed entity movement including position and rotation,\nbut it will fallback to manual `position` updates\nif physics is not available\nor is disabled with `usePhysics = never`.\n\nAllows for multiple hands to register a grab on an entity.\nIn a non-physics setup, this has no effect\nother than allowing smooth passing of entities between hands.\nWith physics enabled, additional grabbing\nhands register their own physics constraints to allow for\ntwo-handed wielding of entities. Limit or disable this\nby setting the maxGrabbers schema property.\n\n#### Component Schema\n\n| Property | Description | Default Value |\n| -------- | ----------- | ------------- |\n| startButtons | Which button events to accept to start grab | `[]` |\n| endButtons | Which button events to accept to end grab | `[]` |\n| usePhysics | Whether to use physics system constraints to handle movement, 'ifavailable', 'only', or 'never' | 'ifavailable' |\n| maxGrabbers | Limit number of hands that can grab entity simultaneously | NaN (no limit) |\n| invert | Reverse direction of entity movement compared to grabbing hand | false |\n| suppressY | Allow movement only in the horizontal plane | false |\n\nThe default for `startButtons` and `endButtons` is to accept any button\nrecognized by `super-hands` `grabStartButtons` and `grabDropEndButtons`.\n\n#### States\n\n| Name | Description |\n| --- | --- |\n| grabbed | Added to entity while it is being carried |\n\n### clickable component\n\nAn alternative version of `grabbable` that registers that a button was pressed, but does not\nmove the entity. Do not use `clickable` and `grabbable` on the same entity\n(just use `grabbable` and watch the \"grabbed\" state instead of \"clicked\")\n\n#### Component Schema\n\n| Property | Description | Default Value |\n| -------- | ----------- | ------------- |\n| startButtons | Which button events to accept to start grab | `[]` |\n| endButtons | Which button events to accept to end grab | `[]` |\n\nThe default for `startButtons` and `endButtons` is to accept any button\nrecognized by `super-hands` `grabStartButtons` and `grabDropEndButtons`.\n\n#### States\n\n| Name | Description |\n| --- | --- |\n| clicked | Added to entity while a button is held down |\n\n\n### stretchable component\n\nMakes and entity rescale while grabbed by both controllers as they are moved\ncloser together or further apart.\n\n#### Component Schema\n\n| Property | Description | Default Value |\n| -------- | ----------- | ------------- |\n| startButtons | Which button events to accept to start stretch | `[]` |\n| endButtons | Which button events to accept to end stretch | `[]` |\n| usePhysics | Whether to update physics body shapes with scale changes, 'ifavailable' or 'never' | 'ifavailable' |\n| invert | Reverse the direction of scaling in relation to controller movement | `false` |\n| phyicsUpdateRate | Milliseconds between each update to the physics bodies of a stretched entity | 100 |\n\nThe default for `startButtons` and `endButtons` is to accept any button\nrecognized by `super-hands` `stretchStartButtons` and `stretchEndButtons`.\n\nThere is no CANNON API method for updating physics body scale, but `stretchable`\nwill manually rescale shapes and offsets for stretched entity body and\nall descendent entity bodies.\nThis update is throttled and will occur no more than once every\n`physicsUpdateRate` milliseconds to improve performance. Set this to a smaller\nnumber to increase the physics simulation fidelity.\nCurrently rescalable shapes are: box and sphere. At present, this rescaling\nis only possible on when using the `'local'` physics driver. If using another\ndriver, setting `usePhysics: never` will avoid errors but also cause\nloss of sync between stretched entities' appearance and behavior.  \n\n#### States\n\n| Name | Description |\n| --- | --- |\n| stretched | Added to entity while it is grabbed with two hands |\n\n### draggable component\n\n`draggable` makes an entity able to participate in a drag and drop\ngesture with a `droppable` entity. This does not move an entity\n(also add `grabbable` for that functionality), but instead tracks whether\na gesture has been made that involves pressing a button down with the controller\npointed at this entity, and then moving the controller to point at another\nentity with the `droppable` component before releasing.\n\nFor interactivity, use the global event handler integration,\nthe `event-set` from [kframe](http://github.com/ngokevin/kframe)\nwith the `drag-drop` event, or create your own component.\n\n#### Component Schema\n\n| Property | Description | Default Value |\n| -------- | ----------- | ------------- |\n| startButtons | Which button events to accept to start drag | `[]` |\n| endButtons | Which button events to accept to end drag | `[]` |\n\nThe default for `startButtons` and `endButtons` is to accept any button\nrecognized by `super-hands` `dragDropStartButtons` and `dragDropEndButtons`.\n\n#### States\n\n| Name | Description |\n| --- | --- |\n| dragged | Added to entity from button press until button release |\n\n### droppable component\n\nThe `droppable` component sets an entity up as a target to respond to\n`dragged` entities. Optionally, it can be configured to accept only\nspecific entities and to emit custom events on acceptance or rejection.\n\nCombining the `accepts` and `acceptEvent` property of `droppable` with\n`event-set` from [kframe](http://github.com/ngokevin/kframe), you can\ncreate rich interactivity without any additional JavaScript or\ncustom components.\n\n#### Component Schema\n\n| Property | Description | Default Value |\n| -------- | ----------- | ------------- |\n| accepts | CSS query string to specify which entities to respond to | `''` (accept all entities) |\n| autoUpdate | Should it watch for newly added entities that match `accepts`? May impact performance. | `true` |\n| acceptEvent | String. Name of custom event to emit upon successful drag-drop interaction | `''` (don't emit event) |\n| rejectEvent | String. Name of custom event to emit upon rejecting attempted drag-drop that contained an entity not included in `accepts` | `''` (don't emit event) |\n\nAccept and reject events will contain the dragged entity that was accepted/rejected\nin the `el` property of `detail`.\n\n#### States\n\n| Name | Description |\n| --- | --- |\n| dragover | Added to the entity while a controller is holding an acceptable `draggable` entity in the collision space of the `droppable` entity |\n\n\n## Customizing interactivity\n\n### Gesture and Response Concept\n\n![Separation of Gesture and Response API](readme_files/super-hands-api.png)\n\nSeparating the reaction to be the responsibility of the entity affected allows for extensibility.\nIn response to a grab, you may want some entities to lock to the controller and move,\nothers to rotate around a fixed point, and others still to spawn a new entity but remain unchanged.\nWith this API schema, these options can be handled by adding or creating different reaction\ncomponents to the entities in your scene, and `super-hands` can work with all of them.\n\n### Interactivity\n\nThere are two pathways to adding additional interactivity.\n\n1. A-Frame style: Each component's API documentation describes the A-Frame\ncustom events and states it uses.\nThese can be used on conjunction with other community A-Frame components\nor by creating custom  components for your project that register\nevent listeners and react accordingly.\n1. HTML style: The `super-hands` component also integrates with the\nGlobal Event Handlers Web API to trigger standard mouse events analogous\nto the VR interactions that can easily be handled through\nproperties like `onclick`.\n\n### Gesture acceptance and rejection\n\nEntities which are the target of gestures communicate back to `super-hands`\nthat they have accepted the attempted interaction by 'cancelling' the\ngesture event (i.e. calling `.preventDefault()` on the event). This allows\n`super-hands` to penetrate overlapping and nested entities in order to find\nthe desired target and for reaction components to be discriminating about\ntheir conditions for interaction\n(e.g., [`droppable`](#droppable)). All of the provided\nreaction components handle this signaling automatically, but, if you\ncreate your own reaction components, it is important to cancel the events when\nresponding to a gesture so that `super-hands` knows the gesture has been\naccepted and stops searching for a viable target.\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fc-frame%2Faframe-super-hands-component","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fc-frame%2Faframe-super-hands-component","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fc-frame%2Faframe-super-hands-component/lists"}