An A-Frame component that provides and normalizes directional events for thumbpads and thumbsticks.
At the moment, A-Frame out of the box does not provide thumb-related
directional events, merely
trackpadup. We would
like events such as
But also to solve the issue that the interaction between thumbpads (e.g., Vive) and thumbsticks (Oculus) are different. Thumbpads operate on clicks. Thumbsticks operate via pulls. This component normalizes the two to start and end events:
The component provides start and end events in each direction (as well as plain
thumbend event indicating any direction).
|thresholdAngle||Degrees indicating size of target for up, left, right, down directions. Like a pie.||70|
|thresholdPad||Minimum distance (from 0 to 1) that thumb needs to be from center to trigger event for thumbpads (e.g., Vive).||0.05|
|thresholdStick||Minimum distance (from 0 to 1) that thumb needs to be from center to trigger event for thumbsticks (e.g., Oculus).||0.75|
There is a helper component that provides a thumb emulator that can be used on a 2D computer:
<a-entity oculus-touch-controls="hand: left" thumb-controls="hand: left" thumb-controls-debug="enabled: true; controllerType: oculus">
Install and use by directly including the browser files:
<head> <title>My A-Frame Scene</title> <script src="https://aframe.io/releases/0.8.2/aframe.min.js"></script> <script src="https://email@example.com/dist/aframe-thumb-controls-component.min.js"></script> </head> <body> <a-scene> <a-entity oculus-touch-controls="hand: left" vive-controls="hand: left" thumb-controls="hand: left"></a-entity> <a-entity oculus-touch-controls="hand: right" vive-controls="hand: right" thumb-controls="hand: right"></a-entity> </a-scene> </body>
Install via npm:
npm install aframe-thumb-controls-component
Then require and use.