This component can be used to simplify implementation of thumbstick-based controls.
The key functions that it provides are:
This component should be set on the entity whose states you want to be modified when the thumbstick is operated.
Multiple instances of this component can be added to a single entity, for example to control it with thumbsticks on two different controllers.
Property | Description | Default |
---|---|---|
controller | A selector for the controller that has the thumbstick to be tracked | #lhand |
bindings | A set of 4 states to be set / cleared when the thumbstick is pushed in a particular direction. Order is: up, down, left, right |
“none”, “none”, “none”, “none”, |
tBindings | As per “bindings”, but applies when the trigger is held down (and grip is not held down). If nothing is specified, values from “bindings” are used. | empty |
gBindings | As per “bindings”, but applies when the grip is held down (and trigger is not held down). If nothing is specified, values from “bindings” are used. | empty |
tgBindngs | As per “bindings”, but applies when the trigger and grip are both held down. If nothing is specified, other values are used in this order: gBindings, tBindings, bindings. | empty |
sensitivity | in a range of 0 to 1, how far off-center should be counted as movement. | 0.5 |
Via CDN
<script src="https://cdn.jsdelivr.net/npm/aframe-thumbstick-states@0.1.0/index.min.js"></script>
Or via npm
npm install aframe-thumbstick-states
See object-manipulation.html for an example of how this can be used alongside the laser-manipulation component to build a control system using the thumbstick.
The object-manipulation.html example also uses desktop-vr-controller, so you can operate VR controller thumbstick controls even in a desktop (non-VR) environment.