keyboard-controls
Component
A-Frame Keyboard controls for A-Frame.
Overview
Bindings and events for keyboard controls on an A-Frame VR scene. When combined with ProxyControls.js (with the proxy-controls component for A-Frame), can also receive remote keyboard input by WebRTC.
Usage
Movement + keyboard events:
<a-scene>
<a-entity camera
keyboard-controls>
</a-entity>
</a-scene>
Keyboard events only (no movement):
<a-scene>
<a-entity camera
keyboard-controls="enabled: false">
</a-entity>
</a-scene>
The full list of options can be seen in
keyboard-controls.js
.
Usage + Remote Device
Example:
<a-scene proxy-controls>
<a-entity camera
keyboard-controls>
</a-entity>
</a-scene>
Check Keyboard State
To check the pressed/unpressed state of a given Keyboard.code, use the isPressed()
method:
var keyboardControls = el.components['keyboard-controls'];
keyboardControls.isPressed('ArrowLeft');
Events
keyboard-controls
comes with a polyfill guaranteeing support for KeyboardEvent.key and KeyboardEvent.code. When a keydown
or keyup
event is detected, an extra event is created with the code
attached. Example usage:
<a-entity keyboard-controls
sound="src: reload.wav;
on: keydown:KeyR">
</a-entity>
A complete list of code
values may be found here.
Known Issues
In OS X, pressing the Command/Meta (⌘) key blocks all other key events. For example, pressing A
, pressing ⌘
, releasing A
, and then releasing ⌘
would create a keydown:KeyA
event, but no keyup:KeyA
. Because of this, I do not recommend using the Command/Meta key in your apps.