aframe-components

thumstick-states

Overview

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.

Schema

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

Installation

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

Examples

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.

Code

thumbstick-states