Skip to content
An Aframe component that renders a fully functional 3D keyboard, that works on mobile, desktop browers, and VR headsets!
Branch: master
Clone or download
avasconcelos114 Merge pull request #4 from WandererOU/experimental
Adding handling for keys to be ignored (in physical keyboard)
Latest commit 504024d Apr 12, 2019
Type Name Latest commit message Commit time
Failed to load latest commit information.
.github/ISSUE_TEMPLATE Update issue templates Mar 27, 2019
examples WIP: Adding exception cases for key handling (F1~F12, Shift, Ctrl, etc) Apr 11, 2019
src Improved handling for key events to be ignored Apr 12, 2019
tests WIP: Adding experimental features Apr 8, 2019
.eslintrc.json Implementing eslint rules Mar 28, 2019
LICENSE Create LICENSE Mar 26, 2019 Improved handling for key events to be ignored Apr 12, 2019
karma.conf.js Adding automated tests with mocha-sinon-chai Mar 28, 2019
package-lock.json Adding automated tests with mocha-sinon-chai Mar 28, 2019
webpack.config.js Implementing eslint rules Mar 28, 2019


An Aframe component that renders a fully functional 3D keyboard, that works on mobile, desktop browers, and VR headsets!

Noticing the lack of variety of libraries available for a-frame and WebVR in general, I decided to make my own library that can support customization to fit various projects (like adding your own keyboard key models to it, or setting font types and colors), and if possible, adding multi-lingual support by parsing through a JSON-formatted keyboard layout (see files in src/i18n for details)

The project is still very much in its infancy, so any feedback on what would create a better user experience or easier/more useful features for developers to use this library would be greatly appreciated!


This project is written purely with javascript, and it makes use of custom event handlers to return which key has been pressed by the user (what you want to do with the returned value however, is up to you to implement).

  1. Import aframe into your project (it should load before any other aframe lib)
  2. Add the file dist/aframe-keyboard.min.js to your project and load it into a script tag
  3. Following the example project in examples/basic/index.js:
  • Add a scene to you html document, and inside it at an a-entity element
  • Set its id to keyboard, and add the a-keyboard attribute to it
  • Add a mouse entity to collide with the keyboard by adding an a-entity with the attributes raycaster="objects: .collidable" cursor="rayOrigin: mouse"
  • Add the keyboard-shortcuts="enterVR: false" attribute to the scene element to prevent it from triggering the VR mode when pressing F on desktops (users can still enter it by pressing the button in the bottom-right corner)
  • Add an event listener for the a-keyboard-update event, and add a handler method for it (a basic one has been provided in the example)


Property Description Default value
dismissable (WIP) Allows the user to dismiss the keyboard before pressing the submit button true
model (WIP) Relative path to a custom model (obj/mtl, or gltf) that will replace the default keys ''
font Either a stock font key provided by aframe, or the relative path for a custom font that will be displayed on the keyboard (WIP) 'dejavu'
color The color of fonts used in the keyboard '#000'
locale Sets which keyboard will be utilized from the i18n folder. Currently only en is supported, but additional language support is planned 'en'
audio (WIP) Relative path to sounds that should be player when a key is pressed ''
fontSize Size of each character printed (in aframe units) '0.35'
verticalAlign Setting the text's baseline, can be set as top, center, and bottom 'center'

Release History

  • 0.0.1 (Work in progress)
    • Added color option to define which colors the text should be rendered with
    • Added dismissable option to define whether keyboard can be dismissed before being "Submitted"
    • Added fontSize option to set how big keys should look
    • Added verticalAlign option to set the baseline property of texts
    • Added font option where you can choose from one of the stock fonts to be used in the keyboard
    • Added basic coordinate-based layout to keyboard (looking for a fancier method that allows for customized layouts with differing button sizes and colors)


Distributed under the MIT license. See LICENSE for more information.

Roadmap (order of priority)

  • Adding automated tests
  • Improve event handling of misc keys (Ctrl, Alt, Home, End, etc)
  • Create grid-like layout to automatically render keyboard as it parses i18n files
  • Add support for custom fonts
  • Improving base keyboard models
  • Add support for custom keyboard key models


  1. Fork it (
  2. Create your feature branch (git checkout -b feature/fooBar)
  3. Commit your changes (git commit -am 'Add some fooBar')
  4. Push to the branch (git push origin feature/fooBar)
  5. Create a new Pull Request
You can’t perform that action at this time.